echarts仪表盘

随便叫个啥呢

已于 2022-06-23 17:11:28 修改

阅读量570

点赞数

分类专栏：工作之旅文章标签： echarts 前端 javascript

于 2022-06-23 17:10:53 首次发布

本文链接：https://blog.csdn.net/wanglj7525/article/details/125430965

版权

工作之旅专栏收录该内容

32 篇文章 0 订阅

订阅专栏

在这里插入图片描述

var num = 70;
var color = new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  {
    offset: 0,
    color: 'rgb(255,46,46)' // 0% 处的颜色
  },
  {
    offset: 1,
    color: 'rgb(255,100,46)' // 100% 处的颜色
  }
]);
let n = num;
let progress = (n * 0.01).toFixed(2);
option = {
  title: [
    {
      text: '话题占比',
      x: 'center',
      top: '65%',
      textStyle: {
        color: '#999999',
        fontSize: 44,
        fontWeight: '100'
      }
    }
  ],
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [progress, color],
            [1, 'rgba(0, 97, 226, 0.25)']
          ]
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        fontSize: 70,
        offsetCenter: [0, '0%'],
        valueAnimation: true,
        formatter: '{value} %',
        color: 'auto'
      },
      data: [
        {
          value: num
        }
      ]
    }
  ]
};