背景:当时项目上,请求数据后,出现两条数据,一条是0,一条的正常数据情况, 发现有闪烁问题。把初始值,改得不一样的时候,发现也是有闪动现象,感觉画了两次,
问题:仔细观察了一下。发现因为设置了初始值的问题。因为初始化的时候 echarts设置了初始值,后面网络请求成功后,拿到数据后,又画了一次 ,所以导致了画两次的现象,也就是闪动。
解决办法:就是把初始值干掉就可以了。
初始化init
drawChart_circular(id) {
this.c_chart = this.$echarts.init(document.getElementById(id))
// 使用刚指定的配置项和数据显示图表。
this.c_chart.setOption(circular_option)
},
//网络请求部分
queryData() {
queryStatistics({
// 请求参数
departDateFrom: this.startDateTime,
departDateTo: this.endDateTime
}).then(({ success, data }) => {
if (success) {
this.datas = data
//设置标题
circular_option.title.text = data.containerCount + ''
//设置数据 dataset
circular_option.dataset.source = [
{ value: data.cityInCount, name: '数据名称1' },
{ value: data.cityOutCount, name: '数据名称2' }
]
this.c_chart.clear()
this.c_chart.setOption(circular_option)
}
})
}
option的data 数据部分 注释掉dataset数据或者data数据如下:
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
// clockwise: false,
label: { // 饼图图形上的文本标签
normal: { // normal 是图形在默认状态下的样式
show: true,
position: 'top',
color: '#384744',
fontSize: 12,
formatter: p => {
console.log(p)
return Math.round(p.percent) + '%'
}
}
},
//注释掉data数据 防止请求数据后画两次
// data: [
// { value: 10, name: '流向市内' },
// { value: 0, name: '流向市外' },
// ]
}
],
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中,
// 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。
// 如果不指定 dimensions,也可以通过指定 series.encode
// 完成映射,参见后文。
dimensions: ['name', 'value'],
// //注释掉data数据 防止请求数据后画两次
source: [
// { name: '', 'value': 0, },
// { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
// { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
// { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
]
},