<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>
原文地址：https://www.cnblogs.com/liubingboke/p/10848771.html