當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/9 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了如何利用echarts图表获取条状图点击名称和值小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

聽語音

分步閱讀

echarts圖表插件工具，包含了各種不同類型的圖形，有圓餅圖、折線圖、圓環(huán)圖、柱狀圖等。其中，各種圖形帶有事件，觸發(fā)事件可以獲取到名稱和值，下面利用一個(gè)實(shí)例說明點(diǎn)擊條狀圖獲取名稱和值，操作如下：

https://jingyan.baidu.com/article/a3aad71ae1f3a7b1fb009689.html

第一步，新建靜態(tài)頁面bar.html，修改title并引入echarts js文件，如下圖所示：

第二步，添加條狀圖容器，在<body></body>插入一個(gè)div，并給出id屬性和寬度高度，如下圖所示：

第三步，編寫生成條狀圖的js代碼，添加數(shù)據(jù)和樣式，如下圖所示：

第四步，預(yù)覽該圖形界面，可以看到效果圖，如下圖所示：

第五步，編寫點(diǎn)擊條狀圖的柱子，然后獲取它們的name和value，如下圖所示：

第六步，再次預(yù)覽該界面，打開瀏覽器的控制臺，查看打印結(jié)果，如下圖所示：

END

以上是生活随笔為你收集整理的如何利用echarts图表获取条状图点击名称和值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。