echarts 实现渐变的仪表盘

最新推荐文章于 2024-01-23 14:10:13 发布

代码搬运媛

最新推荐文章于 2024-01-23 14:10:13 发布

阅读量1.1k

点赞数

分类专栏： VUE专栏文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sinat_33255495/article/details/126971541

版权

VUE专栏专栏收录该内容

63 篇文章 5 订阅

订阅专栏

实现效果：
在这里插入图片描述
代码：

这里只摘出了seies的配置项

chartData: {
        series: [
          {
              startAngle: 180, //开始角度 左侧角度
              endAngle: 0, //结束角度 右侧
              type: 'gauge',
              detail: {
                  formatter: '{value}%',
                  fontSize: 10,
                  offsetCenter: [0, '-15%'],//设置仪表盘下方显示内容位置
                  color: '#ff6700' //设置仪表盘下方显示内容文字颜色
              },
              axisLabel:{
                  show:false
              },
              pointer: { //指针样式
	              show:false
	           },
              axisLine: {仪表盘轴线(轮廓线),默认 true。
                  show: false
              },
              splitLine: {  //分割线样式（及10、20等长线样式）
                  show: false
              },
              axisTick: {
                  show: false
              },
    
              axisLine: {
                  lineStyle: {  
                    width: 10,
                    color: [
                      [0.35, {
                        type: "linear",
                        colorStops: [
                          { offset: 0, color: "#fdaa02" },
                          { offset: 1, color: "#ff3a41" },
                        ],
                      }],
                     [1, '#04336e']]
                    
                  }  
              },
              data: [{value: 35}]
          }
        ],
      },