测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Echarts Test</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="app">
<div
ref="chart"
style="height: 300px;width: 500px"
></div>
</div>
</html>
const app = new Vue({
el: "#app",
data() {
return {
chart: {
data: {
timeline: [1, 2, 3, 4, 5, 6, 7, 8, 9],
bar: [1, 3, 5, 7, 9, 5, 3, 4],
line: [2, 4, 9, 4, 3, 5, 2],
},
instance: undefined
}
}
},
computed: {
color() {
const color = []
for (let index = 0; index < this.chart.data.timeline.length; index++) {
index < 5 ? color.push("#5bc0de") : color.push("#cfcfcf")
}
return color
}
},
methods: {
drawChart() {
if(!this.chart.instance) {
this.chart.instance = echarts.init(this.$refs.chart)
}
this.chart.instance.clear()
this.chart.instance.setOption({
xAxis: {
type: "category",
data: this.chart.data.timeline,
splitArea: { show: true, areaStyle: { color: this.color } }
},
yAxis: {
type: "value"
},
series: [
{ data: this.chart.data.bar, type: "line" },
{ data: this.chart.data.line, type: "bar" }
]
}, true)
}
},
mounted() {
this.drawChart()
setInterval(() => {
this.chart.data.timeline = new Array(Math.round(Math.random() * 50))
for(let index = 0; index < this.chart.data.timeline.length; index++) {
this.chart.data.timeline[index] = `${index}D`
}
this.drawChart()
}, 2000)
}
})
