Echarts 实现点击更新图表(图标联动)

Echarts 实现点击更新图表(图标联动)

  1. 因为需要,领导要求做一个统计页面,要能点击图表实现数据更新
  2. 先上Demo

动画.gif
3.首先要在echarts 官网上下载最新的echarts,图中的圆角pie图和rose图就是最新版本的特性。
官网地址:Apache ECharts
4.html页面要加入三个div用来承载echarts的渲染,注意div一定要有高度,否则是渲染不出来的

 <div style="width:100%" id="initBar"></div>

我这里没写高度是因为我用的js动态设置它的高度达到自适应页面的要求

 var winHeight = $(window).height();
 $("#initBar").height(winHeight - 193);

5.js文件里先定义两个为null的对象

var initIndustryClassPieCharts = null;
var initConstructionNaturePieCharts = null;

6.定义和渲染echarts,有几个图标就写几个方法,需要动态渲染的图,方法要带参数名

function initIndustryClassPie(depemertId)
initConstructionNaturePie(depemertId, industryClass)

7.因为数据是动态获取的,所以这个参数要带入到后台去获取新的数据来达到更新的效果。
8.点击实现图表刷新

myChart.on('click', function (params) {
  //先把两个需要更新的图表销毁
  initConstructionNaturePieCharts.dispose();//这里的"initConstructionNaturePieCharts"就是上面的定义的对象
  initConstructionNaturePie(params.data.F_CompanyId, "");//执行重新获取;params里面就是你点击之后可以获取到的参数。
  //注意 销毁dispose 这一步是必须的。否则无法更新图表。
});

9.至此,联动效果就做好了

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.zfjsec.com/700.html
-- 展开阅读全文 --
ECharts5.x--堆叠柱状图并自定义数据和图例的颜色
« 上一篇 05-29
用遍历的方式给页面上元素赋值(表单页、详情页可用)
下一篇 » 06-21

发表评论