圖解echarts經常使用配置項（餅圖，柱狀圖組件封裝）

        echarts算是比較經常使用的數據可視化工具了，之前作過不少這種統計的需求，今天總結一下echarts在vue-cli中的用法。

      首先，在項目中安裝而且引入echarts，代碼以下

npm install echarts --save   //全局安裝

在main.ts中註冊echarts
import echarts from 'echarts'       //引入echarts
Vue.prototype.$echarts = echarts;   //註冊組件複製代碼

      以下圖整理了echarts配置項：

      封裝組件，代碼以下：

餅圖

<template>
  <div class="about">
    <h1>餅圖</h1>
    <div class="echarts" ref="myChart">
    </div>  
</div>
</template>
<script>
export default {
  name:'home',
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          title: "餅狀圖",
          // xAxis: [],
          // y_value: [],
          xAxis: ["在線", "離線", "火警", "故障"],
          y_value: [
            { value: 200, name: "在線" },
            { value: 400, name: "離線" },
            { value: 100, name: "火警" },
            { value: 300, name: "故障" },
          ],
          overtip: ""
        };
      }
    }
  },
  data(){
    return{
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 繪製圖表
      myChart.setOption(
        {
          title: {
            text: this.data.title,
            textStyle: {
              fontSize: 14,
              color: "#24BBEE",
              fontStyle: "normal",
              fontWeight: "lighter", 
              fontFamily: "PingFangSC-Regular"
             },
            left: "12px",
            top: '8%',
          },
          color: [
            "#00A0E9",
            "#999999",
            "#E60012",
            "#F19149", 
         ],
         tooltip: {},
         legend: {
            orient: "vertical",
            show: true,
            right: 0,
            bottom: 10,
            textStyle: {
              width: 50
            },
            data: this.data.xAxis
          },
          grid: {
            left: 0
          }, 
         tooltip: { 
             trigger: 'item',
             formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            { 
             name: this.data.overtip, 
             radius: ['30%', '70%'],
             type: "pie",
             itemStyle:{ 
                borderWidth:5,
                borderColor:'#fff',
              },
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  }
                }
              },
              data: this.data.y_value
            }
          ]
        },
        true
      );
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  watch: {
    data: {
      // console.log(this.data,'this.data');
      handler(){
        this.drawLine();
      },
      deep:true,
    }
  }}
</script>
<style lang="less" scoped>
.echarts{
  width: 600px;
  height: 600px;
  margin:0 auto;
}
</style>複製代碼

柱狀圖

<template>
  <div class="home">
    <h1>柱圖</h1>
    <div class="echarts" ref="myChart">
    </div>
  </div>
</template>
<script>
export default {
  name:'home',
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          title: "柱形圖",
          // xAxis: [],
          // y_value: [],
          xAxis: ["在線", "離線", "火警", "故障"],
          y_value: [
            { value: 200, name: "在線" },
            { value: 400, name: "離線" },
            { value: 100, name: "火警" },
            { value: 300, name: "故障" },
          ],
          overtip: ""
        };
      }
    }
  },
  data(){
    return{
      // color: [
      //       "#00A0E9",
      //       "#999999",
      //       "#E60012",
      //       "#F19149",
      // ],
    } 
 },
 created(){  },
 mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基於準備好的dom，初始化echarts實例 
     // 全局引入時初始化
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 繪製圖表
      myChart.setOption(
        {
          title: {
            text: this.data.title,
            textStyle: {
              fontSize: 14,
              color: "#24BBEE",
              fontStyle: "normal",
              fontWeight: "lighter",
              fontFamily: "PingFangSC-Regular" 
            },
            left: "12px",
            top: "10px"
          },
          tooltip: {          },
          toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
          },
          xAxis:  {
            type: 'category',
            boundaryGap: true,
            data: this.data.xAxis ,
            axisLine: {
              lineStyle: {
                color: "#24BBEE" 
             }
            },
            axisLabel: {
              color: "#24BBEE"
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#24BBEE" 
             }
            },
            axisLabel: {
              color: "#24BBEE"
            },
            splitLine:{
              lineStyle:{
                color:'#24BBEE',
              }
            }
          },
          color:this.color,
          grid: {},
          series: [
            {
              name: this.data.overtip,
              type: "bar",
              barWidth:70,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  }
                } 
             },
             itemStyle:{
                normal: {
　　　　　　　　　　//好，這裏就是重頭戲了，定義一個list，而後根據因此取得不一樣的值，這樣就實現了，
                  color: function(params) {
                            // build a color map as your need.
                      var colorList = ["#00A0E9", "#999999", "#E60012", "#F19149",];
                     return colorList[params.dataIndex]
                  } 
               }
              },
              data: this.data.y_value,
            } 
         ]
        },
        true
      );
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  watch: {
    data: {
      handler(){
        console.log(this.data,'this.data');
        this.drawLine(); 
       }, 
       deep:true,
   }
  }
}
</script>
<style lang="less" scoped>
.echarts{
  width: 600px;
  height: 600px;
  margin:0 auto;
}
</style>複製代碼

有問題歡迎一塊兒探討。