echarts之gauge

mylbest

已于 2022-02-08 16:08:00 修改

阅读量5k

点赞数

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2022-02-08 15:16:22 首次发布

本文链接：https://blog.csdn.net/mylbest/article/details/122824584

版权

这篇博客记录了作者在项目中使用ECharts创建仪表盘图表的过程，包括遇到的问题和配置项的学习，虽然展示的不是最终效果，但后续会持续优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需求，写一个类似仪表盘的图表，因为对echarts的配置项不太熟悉，记录一下

不是最终效果，后续还在优化

import * as echarts from 'echarts';

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

option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 40,
      splitNumber: 10,
      itemStyle: {
        color: '#0EA80E'
      },
      progress: {
        show: true,
        width: 25
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 25
        }
      },
      axisTick: {
        distance: 3,
        length:18,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#073769'
        }
      },
      splitLine: {
        show:false,
        distance: -52,
        length: 14,
        lineSty

最低0.47元/天解锁文章