使用ECharts構建餅狀圖的示例
阿新 • • 發佈：2018-11-07
最近做專案，需要生成一個餅狀圖來展示結果資料，所以根據ECharts官方示例，自己寫了個簡單的Demo
（注：文末附有原始碼提供下載）
1、html檔案：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My ECharts Demo</title> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/echarts.common.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="myChartArea" style="width: 600px; height:400px;"></div> </body> <!-- 注意:操作echarts的js引用,必須放在div之後 --> <script type="text/javascript" src="js/myEcharts.js"></script> </html>
2、myEcharts.js檔案：
$(function () { // 為echarts物件載入資料 myChart.setOption(option); }); /** * echarts.init(dom容器):基於dom容器,例項化echarts物件 * dom容器必須是html的節點，如果是使用jQuery獲取的則必須指定集合中的一個元素節點，比如(“#main”)則表示jQuery物件。$(“#main”)[0]則表示一個id為main的節點 */ // var myChart = echarts.init(document.getElementById("myChartArea")); var myChart = echarts.init($("#myChartArea")[0]); var option = { title: { text: '某站點使用者訪問來源', subtext: '純屬虛構', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, 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)' } } } ] };
3、注意事項：
需要在頁面引入jquery和echarts兩個js
echarts.js下載：http://echarts.baidu.com/download.html，下載“常用”js即可
4、效果圖：
https://github.com/550690513/ECharts