echarts仪表盘配置

export default {
  props: {
    value: {
      type: Number,
      default: 20
    },
    img: {
      type: String,
      default: ''
    },
    color: {
      type: Array,
      default: () => {
        // return ['#DAE9FF', '#0066FF']
        return ['#2EC478', '#D2FFE8']
      }
    }
  },
  computed: {
    option () {
      const img = this.img
      const value = this.value
      const radius = ['36', '44']
      return {
        graphic: {
          elements: [
            {
              type: 'image',
              z: 5,
              style: {
                image: img,
                width: 20,
                height: 20
              },
              left: 'center',
              top: 'center'
            }
          ]
        },
        series: [
          {
            type: 'pie',
            radius: ['36', '42'],
            hoverAnimation: false,
            label: {
              show: false
            },
            animation: false,
            data: [
              {
                value: 100,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  width: 1,
                  color: '#fff',
                  shadowBlur: 8,
                  shadowColor: '#F2F2F4'
                },
                label: {
                  show: false
                }
              }
            ]
          },
          // 底色圈
          {
            type: 'pie',
            radius: ['28', '36'],
            hoverAnimation: false,
            animation: false,
            // clockwise: false, // 逆时针增长

            data: [
              {
                value: value,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: {
                    x: 0,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: this.color[0] // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: this.color[1] // 100% 处的颜色
                      }
                    ]
                  },
                  shadowBlur: 10,
                  shadowColor: '#F7F9FE'
                },
                label: {
                  show: false
                }
              },
              {
                value: 100 - value,
                itemStyle: {
                  // opacity: 0,
                  color: '#F4F6FA'
                },
                label: {
                  show: false
                }
              }
            ]
          },
          // 刻度线
          {
            name: '刻度2',
            z: 3,
            type: 'gauge',
            hoverAnimation: false,
            animation: false,
            startAngle: '0',
            endAngle: '360',
            splitNumber: 28,
            center: ['50%', '50%'],
            radius: '57',
            axisLine: {
              show: false
            }, // 分隔线样式。
            splitLine: {
              show: true,
              length: 10,
              lineStyle: {
                width: 2,
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            detail: {
              show: false
            }
          },
          // 指针外层圈
          {
            type: 'pie',
            radius: ['23', '25'],
            hoverAnimation: false,
            label: {
              show: false
            },
            animation: false,
            data: [
              {
                value: value,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: {
                    x: 0,
                    y: 1,
                    x2: 1,
                    y2: 0,
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: this.color[0] // 100% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: '#fff' // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#fff' // 100% 处的颜色
                      }
                    ]
                  },
                  shadowBlur: 10,
                  shadowColor: '#F2F2F4'
                },
                label: {
                  show: false
                }
              },
              {
                value: 100 - value,
                itemStyle: {
                  // opacity: 0,
                  color: '#fff'
                }
              }
            ]
          },
          // 指针
          {
            name: '刻度2',
            type: 'gauge',
            hoverAnimation: false,
            animation: false,
            startAngle: '90',
            endAngle: '450',
            center: ['50%', '50%'],
            radius: 100,
            // clockwise: false,
            axisLine: {
              show: false
            }, // 分隔线样式。
            splitLine: {
              show: false
            },
            labelLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            detail: {
              show: false
            },
            pointer: {
              show: true,
              width: 1,
              itemStyle: {
                // color: this.color[0]
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: '#Fff' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: this.color[0] // 100% 处的颜色
                    }
                  ]
                }
              },
              length: '38%'
            },
            data: [{ value: value }]
          }
        ]
      }
    }
  },
  data () {
    return {
      chart: null
    }
  }
}

2.如果需要倾斜 给父盒子 transform:rotateX(30deg)  30deg为倾斜角度