<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>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄