ECharts- pie chart

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>
Guess you like
