ECharts入門一
阿新 • • 發佈：2018-01-05
引入 require rip pre 展示 數據顯示 ali 直接 height
ECharts入門一
來源於官方網站整理
完整的一個餅狀圖網頁可運行源碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 8 </head> 9 <body> 10 <!-- 為ECharts準備一個具備大小（寬高）的Dom --> 11 <div id="main" style="width: 600px;height:400px;"></div> 12 <script type="text/javascript"> 13 // 基於準備好的dom，初始化echarts實例 14 15 var myChart = echarts.init(document.getElementById(‘main‘)); 16 17// 指定圖表的配置項和數據 18 option = { 19 backgroundColor: ‘#2c343c‘, 20 series : [ 21 { 22 name: ‘訪問來源‘, 23 type: ‘pie‘, 24 radius: ‘55%‘, 25 data:[ 26 {value:235, name:‘視頻廣告‘}, 27 {value:274, name:‘聯盟廣告‘},28 {value:310, name:‘郵件營銷‘}, 29 {value:335, name:‘直接訪問‘}, 30 {value:400, name:‘搜索引擎‘} 31 ], 32 33 roseType: ‘angle‘, 34 label: { 35 normal: { 36 textStyle: { 37 color: ‘rgba(255, 255, 255, 0.3)‘ 38 } 39 } 40 }, 41 labelLine: { 42 normal: { 43 lineStyle: { 44 color: ‘rgba(255, 255, 255, 0.3)‘ 45 } 46 } 47 }, 48 itemStyle: { 49 normal: { 50 shadowBlur: 200, 51 shadowColor: ‘rgba(0, 0, 0, 0.5)‘ 52 } 53 } 54 } 55 ] 56 }; 57 58 // 使用剛指定的配置項和數據顯示圖表。 59 myChart.setOption(option); 60 </script> 61 </body> 62 </html>
解析：
1.可以通過require加載需要使用到的模塊，默認是require(‘echarts‘),加載的是所有的圖表和組件的ECharts包。
2.type:‘pie‘ 餅狀型表格
3.radius:‘55%‘ 半徑大小
4.data內含有name和value屬性
5.itemStyle是一些通用樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等。
其中emphasis(是鼠標hover懸停事件的高亮樣式)、normal(正常展示下的樣式)
6.backgroundColor: ‘#2c343c‘ 背景顏色
7.textStyle 字體樣式
8.lineStyle 邊線樣式
9.roseType: ‘angle‘ 將餅圖顯示成南丁格爾圖
ECharts入門一