echarts中的setOption
这个API可以设置echarts图的配置项,并按照配置项进行渲染,这个配置项其实有两个参数,第一个参数是option
,第二个参数是一个Boolean
类型,为true
就是覆盖原来的option
,为false
会与原来的option
进行合并:
// 原来的option
const option = {
legend: {
bottom: "bottom"
}
}
// 动态添加了option
echartsDom.setOption({
legend: {
left:"left"
}
}, false)
// 为false会把option进行合并,变成
/*
option = {
legend: {
bottom: "bottom",
left: "left"
}
*/
// 原来的option
const option = {
legend: {
bottom: "bottom"
}
}
// 动态添加了option
echartsDom.setOption({
legend: {
left:"left"
}
}, true)
// 为true会把option进行覆盖,变成
/*
option = {
legend: {
left: "left"
}
*/
动态修改了option后,应该要使用setOption来重新设置和渲染;
下面是我做的一个动态添加折线图的vue案例:
<template>
<div class="container">
<el-button size="small" type="primary" @click="handleDown"
>添加折线图</el-button
>
<div ref="echarts" style="width: 100%; height: 400px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
num: 0,
legend: ["广东", "广西", "云南", "贵州", "海南", "深圳"],
option: {
color: ['#000000', '#6300bf', '#02a7f0', '#f59a23', '#95f204', '#d9001b'],
tooltip: {
trigger: 'axis'
},
legend: {
bottom: "bottom",
itemGap: 40,
data: ["广东"]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
data: ['2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08']
},
yAxis: {
type: 'value'
},
series: [
{
name: "广东",
data: [820, 932, 901, 934, 1290, 1330, 1320],
symbolSize: 10,
showSymbol: false,
type: 'line'
}
]
}
}
},
mounted() {
this.Dchart()
},
methods: {
Dchart() {
var myChart = echarts.init(this.$refs.echarts);
myChart.setOption(this.option);
},
// 动态添加折线图
handleDown() {
this.num += 1
let data = []
// 设置随机的y轴数据
for (let i = 0; i < 7; i++) {
data.push(Math.ceil(Math.random() * 1000))
}
// 动态添加legend
this.option.legend.data.push(this.legend[this.num])
// 动态添加series
this.option.series.push({
name: this.legend[this.num],
data: data,
symbolSize: 10,
showSymbol: false,
type: 'line'
})
// 重新设置option并渲染
echarts.init(this.$refs.echarts).setOption(this.option, true)
}
}
}
</script>
效果如下: