ECharts 仪表盘正负数刻度代码示例

以下是使用 echarts 库绘制正负数刻度的仪表盘的代码示例：

// 引入 echarts 库
import echarts from 'echarts';

// 初始化 echarts 实例
let chart = echarts.init(document.getElementById('chart'));

// 定义仪表盘的最小值和最大值
let minValue = -100;
let maxValue = 100;

// 定义仪表盘的刻度间隔
let interval = 20;

// 定义仪表盘的配置项
let option = {
  // 设置仪表盘的背景颜色
  backgroundColor: '#fff',
  
  // 设置仪表盘的标题
  title: {
    text: '仪表盘',
    textStyle: {
      color: '#333'
    },
    left: 'center',
    top: '5%'
  },
  
  // 设置仪表盘的刻度盘
  series: [
    {
      type: 'gauge',
      min: minValue,
      max: maxValue,
      
      // 设置仪表盘的刻度线
      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#00aaff'
            }, {
              offset: 1,
              color: '#ff0000'
            }])]
          ]
        }
      },
      
      // 设置仪表盘的刻度
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      
      // 设置仪表盘的刻度标签
      axisLabel: {
        color: '#333',
        fontSize: 10,
        distance: -30,
        formatter: function(value) {
          if (value === minValue || value === maxValue) {
            return '';
          }
          return value;
        }
      },
      
      // 设置仪表盘的指针
      pointer: {
        width: 5
      },
      
      // 设置仪表盘的指针标签
      itemStyle: {
        color: 'auto'
      },
      
      // 设置仪表盘的详情
      detail: {
        color: '#333',
        fontSize: 14,
        offsetCenter: [0, '60%'],
        formatter: function(value) {
          return value + '%';
        }
      },
      
      // 设置仪表盘的数据
      data: [
        {value: 50, name: '指标'}
      ]
    }
  ]
};

// 渲染仪表盘
chart.setOption(option);

在上述代码中，我们首先引入了 echarts 库并初始化了一个 echarts 实例。然后，我们定义了仪表盘的最小值和最大值，以及刻度间隔。接下来，我们设置了仪表盘的背景颜色和标题。然后，我们配置了仪表盘的刻度盘、刻度线、刻度、刻度标签、指针、指针标签和详情。最后，我们设置了仪表盘的数据，并通过chart.setOption(option)方法渲染了仪表盘。

注意，以上代码只是一个简单的示例，具体的刻度样式和数据可以根据实际需求进行调整。