vue中Echarts使用动态数据的两种方式
在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts使用动态数据的方式。
1.通过computed
-
computed: {
-
options() {
-
let that =
this;
-
let option = {
-
tooltip : {
-
trigger:
'axis',
-
formatter:
function(item) {
-
return
`支付金额 ${item[0].value}元`
-
}
-
},
-
legend: {
-
formatter:
function(item){
-
return
`${item}: ${that.priceData.todayPrice}`
-
}
-
},
-
grid: {
-
left:
'3%',
-
right:
'4%',
-
bottom:
'3%',
-
containLabel:
true
-
},
-
xAxis: {
-
type:
'category',
-
boundaryGap:
false,
-
data: [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24]
-
},
-
yAxis: {
-
type:
'value',
-
splitLine: {
//网格线
-
show:
false
-
}
-
},
-
series: [{
-
data: that.priceData.timePriceRange,
-
type:
'line',
-
smooth:
true,
-
name:
'支付金额',
-
itemStyle : {
-
normal : {
-
color:
'#13CE66',
-
lineStyle:{
-
color:
'#13CE66'
-
}
-
}
-
}
-
}]
-
}
-
return option;
-
}
-
},
-
//初始化
-
initEcharts(){
-
let myChart = Echarts.init(
this.$refs.chart);
-
myChart.setOption(
this.options);
-
}
2.在data中定义option,通过在初始化之前，直接改变option对应属性值
-
//在data中定义option
-
initEcharts(){
-
this.option.yAxis[
1].max =
this.maxRate;
-
this.option.xAxis.data =
this.dateList;
-
this.option.series[
0].data =
this.payPriceTrendList;
-
let myChart = Echarts.init(
this.$refs.chart);
-
myChart.setOption(
this.option);
-
}
数据变化后需要再次调init方法刷线图表