Echarts环形图如何设置渐变色

最新推荐文章于 2025-02-24 15:44:34 发布

贱嘴三张

最新推荐文章于 2025-02-24 15:44:34 发布

阅读量2.1k

点赞数 7

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/ende151/article/details/137773636

版权

本文介绍了如何在ECharts组件中使用渐变色来美化数据大屏图表，通过代码示例展示了如何配置颜色数组和使用`linear`类型的渐变，并推荐开发者查阅官方文档进行深入学习。

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

文章目录

前言

最近在写数据大屏领导要求全屏都是渐变色废话不多说直接上代码
文章最后有官网的链接可以自行查阅其他方法

代码展示

// 组件内部定义两个颜色数组（可以其他方式展示， 我只是为了好拿去对应的颜色做渐变）
let color = ["#13D2EB", "#23C234", "#FA8920","#1089FA",];
let colors = ["#24B3F6", "#2CE059","#FAB120","#0933F3" ,];


// data就是图标配置文件要展示的内容
// 此处的map就是接口返回的数据里面要做不同颜色的渐变
data: res.data.map((e, index) => {
         // 可以加判断条件
            return {
              value: e.value,  // 数据
              name: e.name,  // 名字
              itemStyle: {
                color: {
                  type: "linear",
                  // x,y坐标是用来调整渐变色的旋转角度
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,  
                  colorStops: [
                    {
                      offset: 0,
                      color: color[index], // 0% 处的颜色     
                    },
                    {
                      offset: 1,
                      color: colors[index], // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              label: {
                show: true,
                position: "top",
                color: "#fff",
              },
            };