echarts两折线间填充颜色
Posted liubingboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于echarts两折线间填充颜色的主要内容，如果未能解决你的问题，请参考以下文章
Echarts折线图表折线颜色与图例颜色不符且折线颜色自定义失败问题