當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

echart 动画饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件

發布時間：2023/12/10 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 echart 动画饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

echarts下載及使用

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。 ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

這里我們用echarts來繪制關系圖，它長這樣。

echarts的使用與配置

1.下載下載地址：https://echarts.apache.org/zh/download.html

從github上下載，我們需要的是這個文件

這里我們可以挑一個下載，一般來說，壓縮版的echart.min.js就夠用了。

5分鐘上手echarts

先用官網的例子做個演示，順便檢查前期的準備是否就緒。 1.首先，創建一個html文件。我使用的是vs_code編輯器。當然方法多種多樣，就看大家各顯神通了。 2.引入echarts

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="echarts.min.js"></script> </head> </html>

這里需要注意，引用echarts時路徑要正確，比如

那么我們引用時就要這么寫

當然更簡單的方法是，將echarts.min.js和html文件放在同一個文件夾里面。這樣就可以直接引用

3.準備一個DOM容器，設置窗口的寬和高（必須有，不然顯示不出來）

4.初始化一個echarts實例。完整代碼：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>

5.雙擊剛剛寫好的html。如果你看到這樣的圖，那么我們可以開始構建關系圖了。

echarts使用過程中可能出現的問題及解決辦法

1.運行后web上空白，無顯示。原因：ecahrts.js文件不對解決辦法： 1.http://echarts.baidu.com/build/dist/echarts-all.js 把之前的js換成這個。

2.下載正確的文件，我之前遇到的坑，用echarts.simple.js和echarts.all.js就不行，所以我建議大家就用ecahrts.min.js或者echarts.js。

節點的收縮與展開

直接上代碼

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>關系圖</title> </head><body><div id="main" style="width: 1200px; height: 700px"></div><div id="ss"></div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});require(["echarts", "echarts/chart/force"], function(ec) {var myChart = ec.init(document.getElementById('main'), 'macarons');var option = {tooltip: {show: false},series: [{type: 'force',name: "Force tree",itemStyle: {normal: {label: {show: true},nodeStyle: {brushType: 'both',borderColor: 'rgba(0,215,0,0.4)',borderWidth: 1}}},categories: [{name: 'lol'}, {name: '位置'}, {name: '英雄'}, {name: '技能'}],nodes: [{id: 0,category: 0,name: '0',label: '峽谷之巔',symbolSize: 60,ignore: false,flag: true}, {id: 1,category: 1,name: '1',label: '上單',symbolSize: 40,ignore: true,flag: true}, {id: 2,category: 2,name: '2',label: '劍姬',symbolSize: 20,ignore: true,flag: true}, {id: 3,category: 2,name: '3',label: '賈科斯',symbolSize: 20,ignore: true,flag: true}, {id: 4,category: 1,name: '4',label: '中單',symbolSize: 40,ignore: true,flag: true}, {id: 5,category: 2,name: '5',label: '辛德拉',symbolSize: 20,ignore: true,flag: true}, {id: 6,category: 2,name: '6',label: '阿卡麗',symbolSize: 20,ignore: true,flag: true}, {id: 7,category: 2,name: '7',label: '發條',symbolSize: 20,ignore: true,flag: true}, {id: 8,category: 1,name: '8',label: '打野',symbolSize: 40,ignore: true,flag: true}, {id: 9,category: 2,name: '9',label: '扎克',symbolSize: 20,ignore: true,flag: true}, {id: 10,category: 2,name: '10',label: '男槍',symbolSize: 20,ignore: true,flag: true}, {id: 11,category: 2,name: '11',label: '豹女',symbolSize: 20,ignore: true,flag: true}, {id: 12,category: 2,name: '12',label: '千玨',symbolSize: 20,ignore: true,flag: true}, {id: 13,category: 3,name: '13',label: '隼舞',number: 45,symbolSize: 20,ignore: true,flag: true}, {id: 14,category: 3,name: '14',label: '寒影',number: 52,symbolSize: 20,ignore: true,flag: true}, {id: 15,category: 3,name: '15',label: '霞陣',number: 52,symbolSize: 20,ignore: true,flag: true}, {id: 16,category: 3,name: '16',label: '幻櫻殺繚亂',number: 52,symbolSize: 30,ignore: true,flag: true}],links: [{source: 1,target: 0}, {source: 4,target: 0}, {source: 8,target: 0}, {source: 2,target: 1}, {source: 3,target: 1}, {source: 5,target: 4}, {source: 6,target: 4}, {source: 7,target: 4}, {source: 9,target: 8}, {source: 10,target: 8}, {source: 11,target: 8}, {source: 12,target: 8}, {source: 13,target: 6}, {source: 14,target: 6}, {source: 15,target: 6}, {source: 16,target: 6}]}]};myChart.setOption(option);var ecConfig = require('echarts/config');function openOrFold(param) {var option = myChart.getOption();var nodesOption = option.series[0].nodes;var linksOption = option.series[0].links;var data = param.data;var linksNodes = [];var categoryLength = option.series[0].categories.length;if (data != null && data != undefined) {if (data.flag) {for (var m in linksOption) {if (linksOption[m].target == data.id) {linksNodes.push(linksOption[m].source);}}if (linksNodes != null && linksNodes != undefined) {for (var p in linksNodes) {nodesOption[linksNodes[p]].ignore = false;nodesOption[linksNodes[p]].flag = true;}}nodesOption[data.id].flag = false;myChart.setOption(option);} else {for (var m in linksOption) {if (linksOption[m].target == data.id) {linksNodes.push(linksOption[m].source);}if (linksNodes != null && linksNodes != undefined) {for (var n in linksNodes) {if (linksOption[m].target == linksNodes[n]) {linksNodes.push(linksOption[m].source);}}}}if (linksNodes != null && linksNodes != undefined) {for (var p in linksNodes) {nodesOption[linksNodes[p]].ignore = true;nodesOption[linksNodes[p]].flag = true;}}nodesOption[data.id].flag = true;myChart.setOption(option);}}}myChart.on(ecConfig.EVENT.CLICK, openOrFold);});</script></body></html>

點擊事件的添加

在這里我添加一個跳轉網頁的點擊事件。點擊阿卡麗的技能后，跳轉到技能介紹頁面。

myChart.on('click', function(param) {url = 'https://www.ruan8.com/wenda/12132.html'if (param.data['category'] == '3') {window.open(url)}});

完整代碼：

想看更多點擊事件的寫法可以上官方文檔：

https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

總結

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的echart 动画饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网友实拍浙江多地暴雨：杭州西湖被暴雨“隐
下一篇：哪个读书app可以导入txt_QQ阅读i