养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何利用echarts图表插件获取legend切换参数

时间:2024-10-22 11:38:56

echart衡痕贤伎s图表基本上有x轴、y轴、legend等组成的,它们分别有点击事件,从事件中可以获取相关的参数指标。下面利用一个实例说明切换legend获取name和选中状态参数,操作如下:

如何利用echarts图表插件获取legend切换参数

工具/原料

echarts

eclipse

Tomcat7

jdk1.8

浏览器

截图工具

方法/步骤

1、第一步,新建静态页面line.html,并引入echarts相关的js文件,如下图所示:

如何利用echarts图表插件获取legend切换参数

2、第二步,在body元素内插入div作为折线图的容器,设置其高度和宽度,如下图所示:

如何利用echarts图表插件获取legend切换参数

3、第三步,编写生成折线图的核心js代码,并初始化函数,如下图所示:

如何利用echarts图表插件获取legend切换参数

4、第四步,调用ecahrts中的方法,生成折线图,如下图所示:

如何利用echarts图表插件获取legend切换参数

5、第五步,预览该静态页面,查看折线图显示效果,如下图所示:

如何利用echarts图表插件获取legend切换参数

6、第六步,添加折线图legend切换事件,再次预览界面,切换legend,查看打印结果,如下图所示:

如何利用echarts图表插件获取legend切换参数

如何利用echarts图表插件获取legend切换参数

© 一点知识