echarts两折线间填充颜色

<template>

<section>

<div id="barDouble" class="electricDescribeYear"></div>

</section>

</template>

<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

import ajax from "@/utils/ajax.js";

import echarts from "echarts";

@Component

export default class Home extends Vue {

mounted() {

const option = {

xAxis : {

type: 'category',

boundaryGap: false,

data : ['周一','周二','周三','周四','周五','周六','周日']

 

},

yAxis : [

{

type : 'value'

}

],

dataZoom: [

{

type: 'inside',

show: true,

xAxisIndex: [0],

start: 0,//默认为1

end: 50

}],

series : [

{

type:'line',

data:[10, 50, 70, 80, 85, 100, 200]

},

{

type:'line',

stack: 'lb', // 两根线这个字段值设置就会叠加

data:[0, 132, 101, 134, 90, 230, 310]

},

{

type:'line',

areaStyle: {}, // 设置此属性就会填充颜色

stack: 'lb',

data:[10, 50, 70, 80, 85, 100, 200]

}

]

}

echarts.init(document.getElementById("barDouble")).setOption(option);

}

}

</script>

<style lang="scss" scoped>

.electricDescribeYear {

width: 400px;

height: 400px;

margin: 0 auto;

z-index: 99;

top: -52px;

}

</style>