本篇主要讲echarts相关。首页展示饼图,双柱、双y轴柱状图,以及echarts图的钻取显示。
本人也是第一次接触echarts图。很多东西都是网上现学现卖。一般都是自己上网去搜的案例,从静态echarts图,到动态获取数据,很少去查echarts api。也是因为时间不允许,直接上网搜需求可能更直观一些。
echarts 饼图,双柱、双y轴柱状图案例网上基本都有。我这里简单说一下echarts的钻取吧。
echarts的钻取就是一个点击事件
Echarts.on('click',function(params){ var slipYear = params.name; var clazz = params.seriesName; nextEcharts(clazz,slipYear); });
基本上需要params.name,params.seriesName两个参数。以柱状图为例:我想显示一个不同年度数学,语文的成绩这么一个双柱状图,slipYear就是x轴坐标,年度;params.seriesName就是双柱参数(数学、语文)。当点击某根柱子后会传出两个参数给nextEcharts。钻取图表会根据接受的参数从数据库中取相应的数据。