echarts 漂亮的仪表盘

initChart (val) {

      // 指定图表的配置项和数据

      this.options = {

        angleAxis: {

          show: false,

          max: 144, // 这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)

          type: 'value',

          startAngle: 216.5, // 极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间

          splitLine: {

            show: false // 隐藏坐标

          }

        },

        barMaxWidth: transformChartFontSize(16), // 圆环宽度

        radiusAxis: { // 隐藏坐标

          show: false,

          type: 'category'

        },

        polar: { // 设置圆环位置和大小

          center: ['50%', '50%'],

          radius: '140'

        },

        series: [{

          type: 'bar',

          data: [{ // 上层圆环，用于显示真实数据

            value: val,

            itemStyle: {

              color: { // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%

                type: 'linear',

                x: 0,

                y: 0,

                x2: 1, // 从左到右 0-1

                y2: 0,

                colorStops: [{

                  offset: 0,

                  color: '#F45800 ' // 0% 处的颜色

                }, {

                  offset: 1,

                  color: '#FFA623' // 100% 处的颜色

                }],

                globalCoord: false // 缺省为 false

              },

              shadowColor: 'rgba(255, 255, 255, 0.2)', // 加白色阴影产生高亮效果

              shadowBlur: 10

            }

          }],

          barGap: '-100%', // 柱间距离,用来将上下两层圆环重合

          coordinateSystem: 'polar', // 类型，极坐标

          roundCap: true, // 顶端圆角

          z: 2 // 圆环层级，和zindex相似

        }, { // 下层圆环，用于显示最大值

          type: 'bar',

          data: [{

            value: 100,

            itemStyle: {

              color: 'rgba(1,42,103,1)',

              shadowColor: 'rgba(0, 0, 0, 0.2)', // 加白色阴影产生高亮效果

              shadowBlur: 5,

              shadowOffsetY: 2

            }

          }],

          barGap: '-100%', // 柱间距离,用来将上下两层圆环重合

          coordinateSystem: 'polar', // 类型，极坐标

          roundCap: true, // 顶端圆角

          z: 1 // 圆环层级，和zindex相似

        },

        { // 下层圆环，用于显示最大值

          name: 'small',

          type: 'pie',

          radius: '6%',

          data: [ // 数据数组，name 为数据项名称，value 为数据项值

            { value: 1, name: '1' } ],

          color: '#FF5956',

          label: {

            show: false

          },

          hoverAnimation: false,

          avoidLabelOverlap: false,

          z: 10 // 圆环层级，和zindex相似

        },

        { // 下层圆环，用于显示最大值

          type: 'pie',

          radius: '35%',

          name: 'big',

          data: [ // 数据数组，name 为数据项名称，value 为数据项值

            { value: 0, name: '' } ],

          color: 'rgba(1,42,103,1)',

          label: {

            show: false

          },

          hoverAnimation: false,

          avoidLabelOverlap: false,

          z: 1 // 圆环层级，和zindex相似

        },

        { // 仪表盘

          type: 'gauge',

          radius: '95%',

          startAngle: 220, // 起始角度，同极坐标

          endAngle: -40, // 终止角度，同极坐标

          max: 100,

          splitNumber: 5, // 分割线个数（除原点外）

          axisLine: { // 坐标轴线

            show: false,

            lineStyle: {

              color: '#fff'

            }

          },

          pointer: {

            width: 3,

            length: '45%'

          },

          axisLabel: {

            // 坐标轴数字

            textStyle: {

                           fontSize: transformChartFontSize(12),

              color: '#fff'

            }

          },

          axisTick: { // 坐标轴标记

            length: 10,

            lineStyle: {

              color: '#2461aa'

            }

          },

          itemStyle: {

            normal: {

              color: '#FF5956'

            }

          },

          splitLine: { // 分隔线

            length: 11,

            lineStyle: {

              width: 1

            }

          },

          title: { // 标题，显示''

            textStyle: {

              color: '#00FFFC',

              shadowColor: '#fff',

                            fontSize: transformChartFontSize(16)

              //  formatter: '{value}.0'

            },

            offsetCenter: ['0', '70%'] // 位置偏移

          },

          data: [{

            value: val,

            name: val + '%'

          }]

        }

        ]

      }

      this.myChart = echarts.init(this.$refs.socChart)

      this.myChart.setOption(this.options)

      window.addEventListener('resize', this.resizeChart)

    }