echarts-仪表盘

image.png

• 代码块

const getChartOpt = (chartItem, chartIndex) => {

  let value = chartItem.total ==0 ?0 : (chartItem.arrived / chartItem.total).toFixed(2) *100

  const pointIconList = [getAssetsFile('指针blue.svg'), getAssetsFile('指针yellow.svg'), getAssetsFile('指针green.svg')]

  return {

    series: [

      {

        type:'gauge',

        startAngle:220,

        endAngle: -40,

        radius:'100%',

        splitNumber:30,

        progress: {// 进度条

          show:false,

        },

        pointer: {// 指针

          show:true,

          offsetCenter: [0, 20],

          icon:'image://' + pointIconList[chartIndex],

          length:124,

          width:19,

          color:'red'

        },

        splitLine: {//分割线样式,是大分割线

          show:true,

          length:10,

          // 距离线的位置

          distance: -10,

          lineStyle: {

            color:'#000000',

            width:2,

            opacity:1,

          }

        },

        axisTick: {// 小细刻度

          show:true,

          length:2,

          distance:6,

          splitNumber:2,

          lineStyle: {

            color:'rgba(255,255,255,0.2)',

            width:1,

            opacity:1,

          }

        },

        // 刻度标签

        axisLabel: {

          show:false

        },

        axisLine: {// 坐标轴线

          show:true,

          lineStyle: {// 属性lineStyle控制线条样式

            width:10, //宽度 可以写小点

            color: [

              [0, '#ffffff'],

              [value /100, new echarts.graphic.LinearGradient(0, 0, 1, 0, [

              {

                  offset:0.1,

                  color: chartItem.colorList[0]

              },

                {

                  offset:1,

                  color: chartItem.colorList[1]

              }

            ])],

              [1, 'rgba(32,187,252,0.1)']

              ],

          }

        },

        detail: {

          valueAnimation:true,

          formatter:'{value} %',

          color: chartItem.colorList[1],

          fontSize:40,

          fontFamily:'DINAlternate-Bold',

          offsetCenter: [0, '76%']

        },

        data: [{ value }]

      },

      {

        type:'gauge',

        startAngle:220,

        endAngle: -40,

        radius:'40%',

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

        progress: {show:false },

        detail: {show:false },

        axisLabel: {show:false },

        axisLine: {// 坐标轴线

          show:true,

          lineStyle: {// 属性lineStyle控制线条样式

              width:10, //宽度 可以写小点

              color:[[1, 'rgba(231,246,255,0.2)']], // 下面仪表盘颜色

            }

        },

        axisTick: {show:false},

        pointer: {show:false },

        splitLine: {show:false },

        data: [{value:0, }]

    }

  ]

  }

}