vue中Echarts动态数据
前言:在真正的开发中,我们使用的数据都是从后端获取过来的,有时候还需要做到实时刷新,今天我也遇到这种问题了,做个总结。方法一:通过computedcomputed: {options() {let that = this;let option = {tooltip : {trigger: 'axis',formatter: function(item) {re
·
前言:
在真正的开发中,我们使用的数据都是从后端获取过来的,有时候还需要做到实时刷新,今天我也遇到这种问题了,做个总结。
方法一:通过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);
}
// 修改完配置后一定要重新调用initEcharts函数,比如在请求接口调用完成之后,变量赋值完成之后,再调用initEcharts函数
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方法刷线图表
更多推荐
已为社区贡献13条内容
所有评论(0)