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: '完成率'
          }
        ]
      }
    ]
  }

本文到此结束啦~,喜欢可以点个赞!!

上一篇:《Tomcat安装与使用》


下一篇:Mysql打开日志信息