echarts仪表盘的基础配置，附代码，超详细！！！

前言

echarts官网

基础配置

看不懂，可以与最后的代码对照看

1. startAngle 开始角度
2. endAngle 结束角度
3. name 鼠标移入显示的名称
4. radius 仪表盘的在父级中所占的百分比 类似大小
5. center 仪表盘的位置

6. pointer 指针样式

   • width 宽度
   • length 长度

1. detail 仪表盘中间数据值默认样式

   • formatter 数据值 语法类似模板字符串
   • textStyle 中间文字的大小
   • offsetCenter 中间值的位置

2. title 仪表中间标题的配置

   • offsetCenter 标题位置
3. axisTick 短刻度样式 与长刻度配置差不多

4. splitLine 长刻度样式

   • show 是否显示该刻度
   • distance 位置，负数在仪表盘外面，反之在里面
   • length 长度

   • lineStyle 刻度样式

     • width 宽度
     • color 刻度颜色

5. axisLabel 刻度值样式

   • distance 位置，负数在仪表盘外面，反之在里面
   • color 颜色
   • fontSize 字体大小
6. color 仪表盘的主体颜色
7. data 数据

代码

 option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        startAngle: 210, // 开始角度 左侧角度
        endAngle: -30, // 结束角度 右侧
        name: 'Pressure',
        type: 'gauge',
        radius: '65%',
        progress: {
          show: true
        },
        center: ['50%', '63%'],
        pointer: { // 指针样式
          width: 3,
          length: '60%',
          shadowBlur: 5
        },
        detail: { // 中间数据
          valueAnimation: true,
          formatter: '{value}%', // 数据值的样式
          textStyle: {
            fontSize: 14
          },
          offsetCenter: [0, '70%'] // 中间值的位置
        },
        title: { // 标题位置
          offsetCenter: [0, '45%']
        },
        axisTick: { // 短刻度样式
          show: false // false表示不显示
        },
        splitLine: { // 长刻度设置
          distance: -20, // 位置
          length: 8,
          lineStyle: {
            width: 3,
            color: '#bbb'
          }
        },
        axisLabel: { // 刻度值
          distance: -20, // 位置
          color: '#AAAAAA',
          fontSize: 12
        },
        color: [themeColor],
        data: [
          {
            value: 50,
            name: '完成率'
          }
        ]
      }
    ]
  }

本文到此结束啦~，喜欢可以点个赞！！