echarts多组仪表盘渐变效果

已于 2024-06-12 15:20:33 修改
阅读量141 收藏
点赞数 2
文章标签： echarts javascript 前端
于 2024-06-12 10:39:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aquarius09/article/details/139619747
版权

想要实现以上效果，代码如下

<template>
  <div>
    <div class="fourth-chart">
       <div id="fourthChart" style="width: 100%; height: 100%"></div>
     </div>
  </div>
</template>

<script>
import echarts from "echarts";
import echarts5 from "echarts5";
export default {
  mounted() {
    this.initFourthChart();
  },
  methods: {
    //四种仪表盘
    initFourthChart() {
      let fourthChart = this.$echarts5.init(
        document.getElementById("fourthChart")
      ); //获取容器元素
      let option = {
        backgroundColor: "#041947",
        tooltip: {
          backgroundColor: "rgba(3, 25, 79,1)",
          borderWidth: 1,
          borderColor: "#32A1FF",
          padding: 5,
          textStyle: {
            color: "#fff",
          },
          // ...其他配置
          extraCssText: "width: auto !important; height: auto !important;", // 或者具体的宽度高度
          formatter: function (params) {
            return `${params.name}: ${params.value}% (${params.data.count}件)`;
          },
        },
        series: [
          {
            data: [
              {
                value: 55,
                count: 10,
                name: "第一种",
              },
            ],
            title: {
              offsetCenter: ["5%", "75%"],
              fontSize: 16,
              color: "#fff",
              show: true,
            },
            name: "最外层",
            type: "gauge",
            roundCap: true,
            radius: "80%",
            center: ["12%", "60%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 4,
            zlevel: 0,
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                // 轴线样式
                width: 8, // 宽度
                color: [
                  [
                    1,
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#14307b", // 渐变起始颜色
                        },
                        {
                          offset: 1,
                          color: "#14307b", // 渐变结束颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
            progress: {
              // 进度条填充
              show: true,
              roundCap: true,
              width: 15,
            },
            //分隔线样式
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            anchor: {
              show: true,
              size: 5,
              showAbove: true,
              itemStyle: {
                color: "#1dd7eb",
              },
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              show: true,
              length: "90%",
              width: 10,
              offsetCenter: [0, "5%"],
              itemStyle: {
                color: "#178ffe",
              },
            },
            detail: {
              color: "#385BF7",
              fontStyle: "normal",
              fontWeight: "bold",
              fontFamily: "D-DIN",
              fontSize: 16,
              offsetCenter: [0, "40%"],
              formatter: "{value}%",
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#2EE5E3",
              },
              {
                offset: 1,
                color: "#385BF7",
              },
            ]),
            barGap: "-100%",
          },
          {
            name: "里边刻度",
            type: "gauge",
            radius: "80%",
            center: ["12%", "60%"],
            // distance : 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#FFFFFF",
              distance: 16,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: "#4381ea",
                width: 1,
              },
              distance: 10,
              length: 10,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },

          {
            data: [
              {
                value: 70,
                count: 10,
                name: "第二种",
              },
            ],
            title: {
              offsetCenter: ["5%", "75%"],
              fontSize: 16,
              color: "#fff",
              show: true,
            },
            name: "最外层",
            type: "gauge",
            roundCap: true,
            radius: "80%",
            center: ["38%", "60%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 4,
            zlevel: 0,
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                // 轴线样式
                width: 8, // 宽度
                color: [
                  [
                    1,
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#14307b", // 渐变起始颜色
                        },
                        {
                          offset: 1,
                          color: "#14307b", // 渐变结束颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
            progress: {
              // 进度条填充
              show: true,
              roundCap: true,
              width: 15,
            },
            //分隔线样式
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            anchor: {
              show: true,
              size: 5,
              showAbove: true,
              itemStyle: {
                color: "#3164fc",
              },
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              show: true,
              length: "90%",
              width: 10,
              offsetCenter: [0, "5%"],
              itemStyle: {
                color: "#ae6aff",
              },
            },
            detail: {
              // backgroundColor: "#fff",
              color: "#9666ff",
              fontStyle: "normal",
              fontFamily: "D-DIN",
              fontSize: 16,
              offsetCenter: [0, "40%"],
              formatter: "{value}%",
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#3364fd",
              },
              {
                offset: 1,
                color: "#9666ff",
              },
            ]),
            barGap: "-100%",
          },
          {
            name: "里边刻度",
            type: "gauge",
            radius: "80%",
            center: ["38%", "60%"],
            // distance : 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#FFFFFF",
              distance: 16,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: "#4381ea",
                width: 1,
              },
              distance: 10,
              length: 10,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },

          {
            data: [
              {
                value: 60,
                count: 10,
                name: "第三种",
              },
            ],
            title: {
              offsetCenter: ["5%", "75%"],
              fontSize: 16,
              color: "#fff",
              show: true,
            },
            name: "最外层",
            type: "gauge",
            roundCap: true,
            radius: "80%",
            center: ["63%", "60%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 4,
            zlevel: 0,
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                // 轴线样式
                width: 8, // 宽度
                color: [
                  [
                    1,
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#14307b", // 渐变起始颜色
                        },
                        {
                          offset: 1,
                          color: "#14307b", // 渐变结束颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
            progress: {
              // 进度条填充
              show: true,
              roundCap: true,
              width: 15,
            },
            //分隔线样式
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            anchor: {
              show: true,
              size: 5,
              showAbove: true,
              itemStyle: {
                color: "#fdc06a",
              },
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              show: true,
              length: "90%",
              width: 10,
              offsetCenter: [0, "5%"],
              itemStyle: {
                color: "#ff6f27",
              },
            },
            detail: {
              // backgroundColor: "#fff",
              color: "#ff6922",
              fontStyle: "normal",
              fontFamily: "D-DIN",
              fontSize: 16,
              offsetCenter: [0, "40%"],
              formatter: "{value}%",
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#ffc069",
              },
              {
                offset: 1,
                color: "#ff6922",
              },
            ]),
            barGap: "-100%",
          },
          {
            name: "里边刻度",
            type: "gauge",
            radius: "80%",
            center: ["63%", "60%"],
            // distance : 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#14307b",
              distance: 16,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: "#4381ea",
                width: 1,
              },
              distance: 10,
              length: 10,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },

          {
            data: [
              {
                value: 85,
                count: 10,
                name: "第四种",
              },
            ],
            title: {
              offsetCenter: ["5%", "75%"],
              fontSize: 16,
              color: "#fff",
              show: true,
            },
            name: "最外层",
            type: "gauge",
            roundCap: true,
            radius: "80%",
            center: ["88%", "60%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 4,
            zlevel: 0,
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                // 轴线样式
                width: 8, // 宽度
                color: [
                  [
                    1,
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#14307b", // 渐变起始颜色
                        },
                        {
                          offset: 1,
                          color: "#14307b", // 渐变结束颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
            progress: {
              // 进度条填充
              show: true,
              roundCap: true,
              width: 15,
            },
            //分隔线样式
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            anchor: {
              show: true,
              size: 5,
              showAbove: true,
              itemStyle: {
                color: "#fd5b20",
              },
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              show: true,
              length: "90%",
              width: 10,
              offsetCenter: [0, "5%"],
              itemStyle: {
                color: "#f13b39",
              },
            },
            detail: {
              // backgroundColor: "#fff",
              color: "#f13b39",
              fontStyle: "normal",
              fontFamily: "D-DIN",
              fontSize: 16,
              offsetCenter: [0, "40%"],
              formatter: "{value}%",
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#ff6d27",
              },
              {
                offset: 1,
                color: "#f13b39",
              },
            ]),
            barGap: "-100%",
          },
          {
            name: "里边刻度",
            type: "gauge",
            radius: "80%",
            center: ["88%", "60%"],
            // distance : 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#FFFFFF",
              distance: 16,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: "#4381ea",
                width: 1,
              },
              distance: 10,
              length: 10,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      };

      //防止越界，重绘canvas
      window.onresize = fourthChart.resize;
      fourthChart.setOption(option); //设置option
    },
  },
};
</script>
<style lang="scss" scoped>
 .fourth-chart {
          width: 100%;
          height: 46%;
          #fourthChart {
            width: 100%;
            height: 100%;
            div {
              width: 100% !important;
              height: 100% !important;
              canvas {
                width: 100% !important;
                height: 100% !important;
              }
            }
          }
        }
</style>
Aquarius09
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
仪表盘渐变色配置.txt
03-06
利用echarts完成渐变色的仪表盘，使用两个仪表盘重叠展示效果。 这个里面主要是echarts的配置内容，颜色也尽量使用相近的颜色。 呈现的效果基本还是可以的。
【Echarts】echarts渐变色仪表盘
weixin_44100002的博客
03-09 2185
echarts渐变色仪表盘 echarts随意一个示例代码 直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里： let dataList9 = { total: "85", list: [ { name: "待处置", value: 1501 }, { name: "处置中", value: 8667 }, { name: "处置完成", value: 12901 }, ], }; var colors=["#0071C2", "#04B9FC",
echarts仪表盘颜色渐变
xifanxiaochaorou的博客
03-17 6738
echarts仪表盘背景颜色渐变 echarts仪表盘背景颜色渐变，offset设置偏移量 代码 option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ ...
echarts 实现渐变的仪表盘
sinat_33255495的博客
09-21 1168
这里只摘出了seies的配置项。
echarts仪表盘进度条、指针动态渐变色显示
stay hungry, stay foolish
05-30 4230
echarts仪表盘进度条、指针动态渐变色显示
Echarts案例：整一个炫酷一点的仪表盘
03-21
使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘，表盘渐变，边缘圆角，（备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge
Android自定义View实现渐变色仪表盘
08-26
Android自定义View实现渐变色仪表盘 Android自定义View是Android开发中一个重要的知识点，通过自定义View可以实现各种复杂的图形绘制，并且可以满足不同的需求。今天，我们将主要介绍Android自定义View实现渐变色...
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
汽车仪表盘-渐变效果+翻转效果
06-12
汽车仪表盘源代码。 效果链接：https://blog.csdn.net/wojiaoanchao/article/details/104068188
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 923
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 1057
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 506
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 246
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
若以框架学习（3），echarts结合后端数据展示，暂时完结。
最新发布
m0_51798113的博客
06-22 226
前三天，参加毕业典礼，领毕业证，顿时感到空落落的失去感，没有工作，啥也没有，总感觉一辈子白活了。因为数据太多了，有1000条，其实可以限制下不查那么多。由于自己前端技术问题，迟迟不能完成，所以我又网上搜了下。调整了下代码，终于完成了前后端echars数据。前端当初没搞懂，后端就太简单了，返回一个map。修改后的代码如下，大家可以参考下。然后在main.js中配置。自己的界面先用一个案例。导入echartss。//导入echats。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 355
【element 】修改下拉菜单
Vue3+ECharts
清晨-阳光的博客
06-17 338
在Vue3中，初始化echarts实例时，会将echarts实例对象转换成响应式对象，从而在resize时无法获取需要的数据。
什么是try-catch?
qq_60504665的博客
06-18 449
try-catch是编程中用于处理异常（errors 或 exceptions）的一种结构，特别是在许多编程语言中，如 JavaScript、Java、C#、Python（尽管 Python 的语法略有不同）等。它的主要目的是在代码执行过程中捕获并处理运行时错误，从而防止程序因未处理的异常而意外终止。以下是try-catch。
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 1012
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
echarts仪表盘渐变
09-06
要在 ECharts 仪表盘上实现渐变效果，可以通过使用颜色渐变的线性渐变（linear gradient）或径向渐变（radial gradient）来实现。以下是两种方法的示例： 1. 使用线性渐变： ```javascript option = { series: [{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值