vue+echarts+双层仪表盘效果

老规矩，先看效果图：

在vue中实现echarts图的话会面临一个问题，如果我们是写死的数据可能显示正常，但是如果是通过vuex版本控制拿到的数据就会有个时间差，我们还没有拿到数据时页面已经渲染了，面对这个问题可以通过在vue中用watch监听的方法，让他在拿到数据以后再次渲染下页面

调用方法：

//页面部分，其中Gztdtj.tq.data.value为后台拿来的值  比如：15
<Dashboard :data='Gztdtj.tq.data.value'></Dashboard>

引入并注册：

然后沾上我们的 Dashboard.vue 组件：

<template>
  <div class="echarts" ref="chart"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    props:{
      data:{//echarts数据
        required:true,
      },
      params:{//echarts数据
        required:true,
      },
    },
    data () {
      return {
        name:'仪表盘',
      };
    },
    components: {},
    mounted() {
      this.initCharts(this.data);
    },
    watch:{
      data(val,oldVal){
        if(val != oldVal){
          this.initCharts(val);
        }
      }
    },

    methods: {
      initCharts(data){

          var myChart = echarts.init(this.$refs.chart);
           myChart.setOption({
             series: [
                  {
                      type: "gauge",
                      center: ["50%", "45%"], // 仪表位置
                      radius: "90%", //仪表大小
                      startAngle: 220, //开始角度
                      endAngle: -40, //结束角度
                      axisLine: {
                          show: false,
                          lineStyle: { // 属性lineStyle控制线条样式
                              color: [
                                  [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                      offset: 1,
                                      color: "#E75F25" // 50% 处的颜色
                                  }, {
                                      offset: 0.8,
                                      color: "#D9452C" // 40% 处的颜色
                                  }], false) ], // 100% 处的颜色
                                    [ 0.7,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                      offset: 1,
                                      color: "#FFC539" // 70% 处的颜色
                                  }, {
                                      offset: 0.8,
                                      color: "#FE951E" // 66% 处的颜色
                                  }, {
                                      offset: 0,
                                      color: "#E75F25" // 50% 处的颜色
                                  }], false) ],
                                    [ 0.9,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 1,
                                      color: "#C7DD6B" // 90% 处的颜色
                                  }, {
                                      offset: 0.8,
                                      color: "#FEEC49" // 86% 处的颜色
                                  }, {
                                      offset: 0,
                                      color: "#FFC539" // 70% 处的颜色
                                  }], false) ],
                                  [1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                      offset: 0.2,
                                      color: "#1CAD52" // 92% 处的颜色
                                  }, {
                                      offset: 0,
                                      color: "#C7DD6B" // 90% 处的颜色
                                  }], false) ]
                              ],
                              width: 10
                          }
                      },
                      splitLine: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      pointer : { //指针样式
                          length: '45%'
                      },
                      detail: {
                          show: false
                      }
                  },
                  {
                      type : "gauge",
                      center: ["50%", "45%"], // 默认全局居中
                      radius : "75%",
                      startAngle: 200,
                      endAngle: -20,
                      axisLine : {
                          show : true,
                          lineStyle : { // 属性lineStyle控制线条样式
                              color : [ //表盘颜色
                                  [ 0.5, "#DA462C" ],//0-50%处的颜色
                                  [ 0.7, "#FF9618" ],//51%-70%处的颜色
                                  [ 0.9, "#FFED44" ],//70%-90%处的颜色
                                  [ 1,"#20AE51" ]//90%-100%处的颜色
                              ],
                              width : 10//表盘宽度
                          }
                      },
                      splitLine : { //分割线样式（及10、20等长线样式）
                          length : 10,
                          lineStyle : { // 属性lineStyle控制线条样式
                              width : 1
                          }
                      },
                      axisTick : { //刻度线样式（及短线样式）
                            length : 10
                      },
                      axisLabel : { //文字样式（及“10”、“20”等文字样式）
                          color : "#b8efff",
                          distance : 10 //文字离表盘的距离
                      },
                      detail: {
                          formatter : "{score|{value}%}",
                          offsetCenter: [0, "40%"],
                          backgroundColor: '#FFEC45',//文字部分背景颜色
                          height:30,
                          rich : {
                              score : {
                                  color : "#b8efff",
                                  fontFamily : "微软雅黑",
                                  fontSize : 22
                              }
                          }
                      },
                      data: [{
                          value: data,
                          label: {
                              textStyle: {
                                  fontSize: 12
                              }
                          }
                      }]
                  }
              ]
           })
           myChart.on('click',(params)=>{
              this.$emit('echartsClick',params);
           });
      },

    },
  }

</script>
<style lang='' scoped>
  .echarts{
    width: 100%;
    height:100%;
  }
</style>