echart 动画 饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
生活随笔
收集整理的這篇文章主要介紹了
echart 动画 饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
echarts下載及使用
ECharts，一個使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。 ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
這里我們用echarts來繪制關(guān)系圖，它長這樣。
echarts的使用與配置
1.下載 下載地址：https://echarts.apache.org/zh/download.html
從github上下載，我們需要的是這個文件
這里我們可以挑一個下載，一般來說，壓縮版的echart.min.js就夠用了。
5分鐘上手echarts
先用官網(wǎng)的例子做個演示，順便檢查前期的準(zhǔn)備是否就緒。 1.首先，創(chuàng)建一個html文件。我使用的是vs_code編輯器。當(dāng)然方法多種多樣，就看大家各顯神通了。 2.引入echarts
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script> </head> </html>這里需要注意，引用echarts時路徑要正確，比如
那么我們引用時就要這么寫
<script src="D:echartsecharts項目1echarts.min.js"></script>當(dāng)然更簡單的方法是，將echarts.min.js和html文件放在同一個文件夾里面。 這樣就可以直接引用
<script src="echarts.min.js"></script>3.準(zhǔn)備一個DOM容器，設(shè)置窗口的寬和高（必須有，不然顯示不出來）
<body><!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> </body>4.初始化一個echarts實(shí)例。 完整代碼：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script> </head> <body><!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>5.雙擊剛剛寫好的html。如果你看到這樣的圖，那么我們可以開始構(gòu)建關(guān)系圖了。
echarts使用過程中可能出現(xiàn)的問題及解決辦法
1.運(yùn)行后web上空白，無顯示。 原因：ecahrts.js文件不對 解決辦法： 1.http://echarts.baidu.com/build/dist/echarts-all.js 把之前的js換成這個。
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>2.下載正確的文件，我之前遇到的坑，用echarts.simple.js和echarts.all.js就不行，所以我建議大家就用ecahrts.min.js或者echarts.js。
節(jié)點(diǎn)的收縮與展開
直接上代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>關(guān)系圖</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: '發(fā)條',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>點(diǎn)擊事件的添加
在這里我添加一個跳轉(zhuǎn)網(wǎng)頁的點(diǎn)擊事件。點(diǎn)擊阿卡麗的技能后，跳轉(zhuǎn)到技能介紹頁面。
myChart.on('click', function(param) {url = 'https://www.ruan8.com/wenda/12132.html'if (param.data['category'] == '3') {window.open(url)}});完整代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>關(guān)系圖</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: '發(fā)條',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);myChart.on('click', function(param) {url = 'https://www.ruan8.com/wenda/12132.html'if (param.data['category'] == '3') {window.open(url)}});});</script></body></html>想看更多點(diǎn)擊事件的寫法可以上官方文檔：
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
總結(jié)
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的echart 动画 饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网友实拍浙江多地暴雨：杭州西湖被暴雨“隐
- 下一篇： 哪个读书app可以导入txt_QQ阅读i