如何利用echarts图表获取条状图点击名称和值
听语音
- |
- 浏览：1505
- |
- 更新：2017-06-13 10:20
- |
- 标签：软件
-
1 -
2 -
3 -
4 -
5 -
6 -
7
分步阅读
echarts图表插件工具，包含了各种不同类型的图形，有圆饼图、折线图、圆环图、柱状图等。其中，各种图形带有事件，触发事件可以获取到名称和值，下面利用一个实例说明点击条状图获取名称和值，操作如下：
工具/原料
-
echarts
-
eclipse
-
Tomcat7.x
-
jdk1.8
-
截图工具
-
浏览器
方法/步骤
https://jingyan.baidu.com/article/a3aad71ae1f3a7b1fb009689.html
-
第一步，新建静态页面bar.html，修改title并引入echarts js文件，如下图所示：
-
第二步，添加条状图容器，在<body></body>插入一个div，并给出id属性和宽度高度，如下图所示：
-
第三步，编写生成条状图的js代码，添加数据和样式，如下图所示：
-
第四步，预览该图形界面，可以看到效果图，如下图所示：
-
第五步，编写点击条状图的柱子，然后获取它们的name和value，如下图所示：
-
第六步，再次预览该界面，打开浏览器的控制台，查看打印结果，如下图所示：
END
注意事项
-
注意echarts条状图的使用场景
-
注意获取条状图name和value
