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>

仪表盘配置：

git地址：https://github.com/aicai0/test_components.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！！