首先echarts是一個可以提供給用戶體驗效果更好的一個圖形界面, Canvas 類庫 ZRender。
1、下載echarts的js,可以在官方網址進行下載echarts.min.js
2、將下載下來的echarts.min.js放到新建一個js文件夾
3、創建一個html頁面
項目文件擺放路徑如圖所示
4、進行編碼
- 首先在html中引入echarts.min.js
- <script src="js/echarts.min.js"/>
2.設置一個存放餅形圖的DOM,需要設置DOM的width,height,這樣echarts就不需要設置了,需要echarts重新設置
-
- <div id="main" style="width : 1000px ; height : 400 px ;"/>
3.初始化echarts,創建echarts的實例
-
- var myecharts=echarts.init(document.getElementById("main"));
4.設置數據項和圖標
1. var option={...}(見代碼)
5.將數據項和圖標顯示到餅形圖上
1. myecharts.setOption(option);
表現形式見下圖,鼠標點擊會出現效果
代碼見下
<!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>echars map</title> <!-- 引入echarts.js的js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 創建一個DOM --> <div id="div" style="width:1000px;height:400px;"></div> <script type="text/javascript"> //獲取DOM var myecharts=echarts.init(document.getElementById("div")); var option=({ title:{ text:'餅形圖',//主標題文本,支持\n換行 subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',//副文本 sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',//副文本鏈接 left:'center',//離容器左側的距離 top:'top'//距離容器上測的距離 }, backgroundColor: '#2c343c',//背景顏色 textStyle: { color: 'rgba(255, 255, 255, 0.3)'//文字的顏色 }, series : [ { name: '訪問來源', type: 'pie',//每個系列,通過type決定自己的系列型號 radius: '55%', data:[ {value:400, name:'搜索引擎'}, {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:274, name:'聯盟廣告'}, {value:235, name:'視頻廣告'} ], roseType: 'angle', itemStyle: {//圖形樣式 normal,emphasis emphasis: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: {//餅形圖上的文本標簽 normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: {//標簽的視覺引導線 normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } } } ] }); myecharts.setOption(option); </script> <!-- 1.引入echarts.min.js 2.准備DOM 3.初始化echars實例 4.准備數據項 5.調用setOption方法將數據和圖標顯示在圖表上 --> </body> </html>