echarts兩折線間填充顏色
阿新 • • 發佈：2019-05-11
<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>