如何利用echarts图表获取条状图点击名称和值

如何利用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

 

1. 第一步，新建静态页面bar.html，修改title并引入echarts js文件，如下图所示：

   

2. 第二步，添加条状图容器，在插入一个div，并给出id属性和宽度高度，如下图所示：

   

3. 第三步，编写生成条状图的js代码，添加数据和样式，如下图所示：

   

4. 第四步，预览该图形界面，可以看到效果图，如下图所示：

   

5. 第五步，编写点击条状图的柱子，然后获取它们的name和value，如下图所示：

   

6. 第六步，再次预览该界面，打开浏览器的控制台，查看打印结果，如下图所示：

   

   END

注意事项

• 注意echarts条状图的使用场景

• 注意获取条状图name和value