vue+charts仪表盘填充的颜色随着数字变动_echarts仪表盘指针颜色跟着变-优快云博客

本文链接：https://blog.youkuaiyun.com/Polarisone/article/details/99346033

本文展示了如何在Vue应用中使用ECharts创建仪表盘，并根据数值变化动态调整颜色。重点在于Vue中的函数调用和ECharts的初始化方法。

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

最终效果:

颜色可以自己调整
在这里插入图片描述

注意:我这是在vue中的写法,在函数调用和初始化echarts时需要注意

warning() {
   
   
        // 计算颜色随着指针一起走动
        var dataArr = [{
   
   
        // show: false,
          value: '300',
          value1: '500',
          value2: '12'
        }];
        var value = dataArr[0].value;
        var value1 = dataArr[0].value1;
        var value2 = dataArr[0].value2;
        // var min = value.split('.');
        // var degrees = 180 - (180 * value / 15); //蓝色刻度尺计算
        // var degrees = (3 - value) / 50 * 30; //蓝色刻度尺计算
        // var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
        // var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
        
        //计算三个表盘数字跟着表盘颜色一起动
        var num = value / 300;
        var num1 = value1 / 500;
        var num2 = value2 / 12;
        var colorSet = [
            [num, '#00B3FE'],
            [1, '#212D43']
        ];
        // 指针走动为渐变色
        //var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{  //此处做过修改需注意因为直接拿过来用不了
        var axislineColor = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
   
   
                offset: 0,
                color: 'rgba(0, 201, 153, 1)'
            },
            {
   
   
                offset: 1,
                color: 'rgba(248, 6, 6, 1)'
            },  
        ]);
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.setOption({
   
   
          tooltip : {
   
   
            formatter: "{a} <br/>{c} {b}"
          },
          //去掉保存图片和刷新功能
          toolbox: {
   
   
            show: false,
            feature: {
   
   
              restore: <