echarts餅狀統計圖、柱狀統計圖

  1 <div class="pie" style="width:500px;height:500px;"></div>
  2 
  3 <div class="line" style="width:500px;height:500px;"></div>
  4 
  5 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.js"></script>
  6 <script>
  7         //餅狀圖配置
  8         var dataPie = {
  9             tooltip: {
 10                 trigger: 'item',
 11                 formatter: "{a} <br/>{b} : {c} {d}%" //名字 : 數量 百分比
 12             },
 13             legend: {
 14                 orient: 'horizontal',
 15                 x: 'left',
 16                 data:[]
 17             },
 18             series: [
 19                 {
 20                     name:'example pie',
 21                     type:'pie', //圓形
 22                     //radius: ['35%', '70%'], //甜甜圈，可選項
 23                     avoidLabelOverlap: false,
 24                     label: {
 25                         normal: {
 26                             show: true,
 27                             position: 'inside', //文字位置，inside為扇區，center為正中
 28                             formatter: '{b} : {c} {d}%'
 29                         },
 30                         emphasis: {
 31                             show: true,
 32                             textStyle: { //文字樣式
 33                                 fontSize: '30',
 34                                 fontWeight: 'bold'
 35                             }
 36                         }
 37                     },
 38                     labelLine: {
 39                         normal: {
 40                             show: false
 41                         }
 42                     },
 43                     data:[
 44                     {value: 'xxx', name: ''xxx''}, //value數量，name名字
 45                     {value: 'xxx', name: ''xxx''},
 46                     {value: 'xxx', name: ''xxx''},
 47                     ]
 48                 }
 49             ]
 50         };
 51         //柱狀圖配置
 52         var dataLine = {
 53             color: ['#3398DB'], //柱形顏色
 54             tooltip : {
 55                 trigger: 'axis',
 56                 axisPointer : {
 57                     type : 'shadow'
 58                 }
 59             },
 60             grid: {
 61                 left: '3%',
 62                 right: '4%',
 63                 bottom: '3%',
 64                 containLabel: true
 65             },
 66             xAxis : [
 67                 {
 68                     axisLabel: {
 69                         textStyle: {
 70                             fontSize: 10 //x軸標題文字樣式
 71                         },
 72                         interval: 0 //防止部分標題隱藏
 73                     },
 74                     type : 'category',
 75                     data : ['標題1','標題2','標題3'],// X軸標題
 76                     axisTick: {
 77                         alignWithLabel: true
 78                     }
 79                 }
 80             ],
 81             yAxis : [
 82                 {
 83                     name: '(件)', //Y軸縱坐標量詞
 84                     type : 'value'
 85                 }
 86             ],
 87             series : [
 88                 {
 89                     name:'line',
 90                     type:'bar',
 91                     barWidth: '60%',
 92                     data:[123, 456, 789], // 標題對應數量
 93                     itemStyle: {
 94                         normal: {
 95                             label: {
 96                                 show: true,
 97                                 position: 'top',
 98                                 textStyle: { //圓柱上方數字文字樣式
 99                                     color: 'black',
100                                     fontSize: 10
101                                 }
102                             }
103                         }
104                     }
105                 }
106             ]
107         }
108         //設置顯示
109         var pie = echarts.init(document.getElementsByClassName("pie")[0]);
110         var line = echarts.init(document.getElementsByClassName("line")[0]);
111         pie.setOption(dataPie);
112         line.setOption(dataLine);
113 </script>