A: first download the official website
https://www.echartsjs.com/zh/download.html
Then create a project, import the two packages:
write the code:
. 1 <! DOCTYPE HTML > 2 < HTML > . 3 < head > . 4 < Meta charset = "UTF-. 8" > . 5 < title > ECharts </ title > . 6 <-! Introduced echarts.js -> . 7 <! - - this is just the good loading echarts.min.js, note the path -> . 8 < Script the src = "echarts.min.js" > </ Script > . 9 </ head > 10 <body> 11 <! - to prepare a ECharts includes size (width and height) of Dom -> 12 is < div ID = "main" style = "width: 1000px; height: 600px;" > </ div > 13 is < Script type = "text / JavaScript" > 14 // based ready dom, initialization echarts example 15 var myChart = echarts.init (document.getElementById ( ' main ' )); 16 var Option = { . 17 the backgroundColor: ' # 2c343c ' , 18 textStyle: { . 19 Color: ' RGBA (255, 255, 255, 0.3) ' 20 is }, 21 is Series: [ 22 is { 23 is name: ' referrer ' , 24 type: ' PIE ' , 25 RADIUS: ' 55% ' , 26 is Data: [ 27 {value: 400 , name: ' Search engine '}, 28 {value: 335 , name: ' Direct Access ' }, 29 {value: 310 , name: ' email marketing ' }, 30 {value: 274 , name: ' affiliate advertising ' }, 31 is {value: 235 , name: ' video ads ' } 32 ], 33 is roseType: ' angle ' , 34 is itemStyle: { 35 emphasis: { 36 shadowBlur: 200, 37 shadowColor: 'rgba(0, 0, 0, 0.5)' 38 } 39 }, 40 label: { 41 normal: { 42 textStyle: { 43 color: 'rgba(255, 255, 255, 0.3)' 44 } 45 } 46 is }, 47 labelLine: { 48 Normal: { 49 the lineStyle: { 50 Color: ' RGBA (255, 255, 255, 0.3) ' 51 is } 52 is } 53 is } 54 is } 55 ] 56 is } 57 is // used just specified CI graph and data. 58 myChart.setOption (Option); 59 </script> 60 </body> 61 </html>