2021年8月25日

echarts图表换数据重新渲染示例 亲测有用


echarts的主要功能在于把数据可视化,这个应用场景也很多,比如外汇,股票,后台数据统计等等,市场上主要图表插件是echarts和hightcharts,前者是百度出的在国内比较高的使用率,后者在全球享有盛誉,还有轻量级的charts.js等等,图表有时候是纯展示,有时候需要更新数据,也是在最近切图项目中遇到的,代码实例如下:


var myChart_sqfb = echarts.init(document.getElementById('main_sqfb'));
var option_sqfb = {
title: {
text: '赛区分布',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
orient: 'vertical',
left: 'left',
// data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
},
grid: {
left: '15%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['亚太', '欧洲', '南美洲', '北美洲', '大洋洲', '非洲']

},
series: {
name: '赛区分布',
type: 'bar',
radius: '50%',
data: [
{value: 1048},
{value: 300},
{value: 735},
{value: 580},
{value: 484},
{value: 300}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
};

/*图表换一组数据重新执行*/
$('#searchbtn').click(function(){
layer.load();

//重新设置值
option_sqfb.series.data = [
{value: 1048},
{value: 600},
{value: 435},
{value: 280},
{value: 184},
{value: 500}
];

//console.log(option_sqfb.series.data);
//重新渲染
myChart_sqfb.setOption(option_sqfb,true);

setTimeout(function(){
layer.closeAll();
},1000)
})

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》