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

编程问答

echarts 常用图表示例

發布時間：2024/3/24 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts 常用图表示例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

既然說到 echarts，那就不得不分享一個了不得的鏈接啦：Documentation - Apache ECharts?（絕對不會讓你感到失望的喲）。

條形圖

餅圖

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個 ECharts 實例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/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'), 'dark'); // dark 可嘗試修改為 lightmyChart.setOption({series : [{// 此系列自己的調色盤//color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],name: '訪問來源',type: 'pie', // 設置圖表類型為餅圖radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。//roseType: 'angle', data:[ // 數據數組，name 為數據項名稱，value 為數據項值{value:235, name:'視頻廣告'},{value:274, name:'聯盟廣告'},{value:310, name:'郵件營銷'},{value:335, name:'直接訪問'},{value:400, name:'搜索引擎'}]}]})</script> </body> </html>

異步加載數據

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個 ECharts 實例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/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'));$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {myChart.setOption({series : [{name: '訪問來源',type: 'pie', // 設置圖表類型為餅圖radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。data:data.data_pie}]})}, 'json')</script> </body>

數據集

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個 ECharts 實例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {legend: {},tooltip: {},dataset: {// 提供一份數據。source: [['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。xAxis: {type: 'category'},// 聲明一個 Y 軸，數值軸。yAxis: {},// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。series: [{type: 'bar'}, # 可用 line{type: 'bar'}, # 可用 line{type: 'bar'} # 可用 line]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>

交互組件

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {xAxis: {type: 'value'},yAxis: {type: 'value'},dataZoom: [{ // 這個dataZoom組件，默認控制x軸。type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件start: 10, // 左邊在 10% 的位置。end: 60 // 右邊在 60% 的位置。}],series: [{type: 'scatter', // 這是個『散點圖』itemStyle: {opacity: 0.8},symbolSize: function (val) {return val[2] * 40;},data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"], ["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]}]}// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>

其中 data 的結構為： [[x1, y1, z1], [x2, y2, z2], ...]? 其中 x 表示 x 軸，y 表示 y 軸，z 表示點的權重，z 越大，點在圖中的顯示也就越大。

事件處理

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="height: 100%;min-height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化ECharts實例var myChart = echarts.init(document.getElementById('main'));var app = {};option = null;// 指定圖表的配置項和數據var option = {title : {text: '餅圖程序調用高亮示例',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',left: 'left',data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']},series : [{name: '訪問來源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接訪問'},{value:310, name:'郵件營銷'},{value:234, name:'聯盟廣告'},{value:135, name:'視頻廣告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};app.currentIndex = -1;setInterval(function () {var dataLen = option.series[0].data.length;// 取消之前高亮的圖形myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: app.currentIndex});app.currentIndex = (app.currentIndex + 1) % dataLen;// 高亮當前圖形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: app.currentIndex});// 顯示 tooltipmyChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: app.currentIndex});}, 1000);if (option && typeof option === "object") {myChart.setOption(option, true);}</script> </body> </html>

旭日圖

總結

以上是生活随笔為你收集整理的echarts 常用图表示例的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：如何精准选型物联网开发平台
下一篇： zedgraph右键菜单英文转换成中文