日常记录：创建自定义样式的 echarts 仪表盘

最新推荐文章于 2024-05-31 11:37:45 发布

墨小谖

最新推荐文章于 2024-05-31 11:37:45 发布

阅读量1.3k

点赞数 2

分类专栏：日常开发记录文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_40206575/article/details/127768910

版权

日常开发记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts 仪表盘

需要自定义样式和指针，实现了渐变的表盘和数据展示，代码记录一下~
注：指针这里不知道怎么画，所以把图片转成base64直接使用了，大佬们如果有啥更好的方法欢迎指导~

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

const baseIcon = 'image://data:image/png;base64,...'; // 太长了 这里省略了

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      detail: {
        formatter: '{value}%',
        color: 'rgba(	238,130,238, 1)',
        fontWeight: 700,
        fontSize: 100,
        fontFamily: 'Arial',
        offsetCenter: ['0', '-24%']
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ],
      endAngle: 0,
      colorBy: 'data',
      center: ['50%', '95%'],
      startAngle: 180,
      min: 0,
      splitNumber: 10,
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          color: [
            [
              1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(123,104,238,0.85)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(221,160,221,0.85)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,182,193,0.85)'
                }
              ])
            ]
          ],
          width: 16
        }
      },
      splitLine: {
        length: '6%',
        distance: 7,
        lineStyle: {
          color: '#ffffff',
          width: 1
        }
      },
      // 刻度样式
      axisTick: {
        show: true,
        splitNumber: 5,
        lineStyle: {
          color: '#ffffff'
        }
      },
      // 刻度标签
      axisLabel: {
        distance: 25,
        formatter: function (value) {
          if (value % 20 === 0) return value + '%';
        },
        color: '#ffffff',
        fontFamily: 'Arial',
        fontSize: 20
      },
      // 指针
      pointer: {
        icon: baseIcon,
        length: 25,
        width: 16,
        offsetCenter: [0, '-94%']
      },
      title: {
        offsetCenter: ['0', '0%'],
        color: 'rgba(255, 255, 255, 1)',
        fontWeight: 400
      }
    }
  ]
};

option && myChart.setOption(option);