echart 仪表盘实现指针的渐变色及添加图片

最新推荐文章于 2025-05-26 11:08:53 发布

zuo-yiran

最新推荐文章于 2025-05-26 11:08:53 发布

阅读量9.7k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签：前端 echarts vue.js

本文链接：https://blog.csdn.net/zuoyiran520081/article/details/132366301

需求：
在仪表盘中设置指针为渐变色，并在仪表盘中间添加图片。
实现重点：
1、仪表盘指针渐变色的实现
渐变色通过设置pointer的itemStyle属性内的color实现，重点是echart版本，这个原本使用4.8.0的版本不起作用，升级到5.0.0就可以了，另外需要指定渐变的类型为linear

2、仪表盘图片添加实现通过设置anchor属性实现，支持base64，矢量图，链接，本地图片等都可以（下面完整例子代码使用了链接及base64格式的图片）。
本地图片引入，使用require进行引入后拼接，示例：

let pointerIcon = require(`@/assets/images/plane-icon.png`);
let pointerUrl = `image://${
     
     pointerIcon}`;
anchor:{
   
   
	icon: pointerUrl
}

图片转base64格式的链接：
https://www.sojson.com/image2base64.html

效果如图所示：
在这里插入图片描述

完整代码如下：

import * as echarts from 'echarts';
var app = {
   
   };
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// 指针渐变色
let gradientColor = {
   
   
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [
    {
   
   
      offset: 0,
      color: 'red'
    },
    {
   
   
      offset: 0.5,
      color: 'yellow'
    },
    {
   
   
      offset: 1,
      color: 'blue'
    }
  ]
};
option = {
   
   
  series: [
    {
   
   
      type: 'gauge',
      min: 0,
      max: 100,
      splitNumber: 10,
      radius: '80%',
      axisLine: {
   
   
        lineStyle: {
   
   
          color: [[1, '#f00']],
          width: 3
        }
      },
      // 数值分隔线
      splitLine: {
   
   
        distance: 0,
        length: 20,
        lineStyle: {
   
   
          color: '#f00'
        }
      },
      // 坐标轴刻度
      axisTick: {
   
   
        distance: 0,
        length: 10,
        lineStyle: {
   
   
          color: '#f00'
        }
      },
      // 刻度标签
      axisLabel: {
   
   
        distance: 5,
        color: '#f00',