Echarts 折线图、柱状图、饼图多种渐变色设置指南

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年04月18日

Echarts 折线图、柱状图、饼图多种渐变色设置指南

在技术层面灵活使用 Echarts 之后,我们开始追求美感,需要给带有数据的折线图、柱状图、饼图添加渐变颜色,让视觉体验上更丰富。Echart 内置多种方法使图表可以带有两种或多种渐变色,不仅可以控制过度颜色,还可以控制渐变的中心点等设置细节。

跟随本教程学习,你将学到:

  • Echarts 柱状图如何设置渐变色
  • 使用 color 方法生成两种渐变色,线性渐变、径向渐变
  • Echarts 折线图如何设置渐变色
  • 使用 Echarts 内置渐变生成器生成
  • Echarts 饼图如何设置渐变色

一、Echarts 柱状图颜色渐变 - 三种及多种颜色渐变

方法一:使用 color 中的方法生成渐变色

接着我们使用柱状图来做讲解,我们使用 Echarts 内置的第二种渐变方法来给图表做颜色渐变。

在 Echarts 的 color 中有生成渐变色的方法:

样式一:线性渐变

02-echarts-bar-add-gradient-color.jpg

myChart.setOption({

      ...

        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.2,
              color: '#8e3ff4', // 0% 处的颜色(颜色一)
            },
            {
              offset: 0.2,
              color: '#8e3ff4', // 20% 处的颜色(颜色二)
            },
            {
              offset: 1,
              color: '#00d4ff', // 100% 处的颜色(颜色三)
            },
          ],
          globalCoord: false, 
        }],

        .....

      });
...

Echarts 柱状图颜色渐变完整代码:Github

顺便推荐一个好用的工具 - 卡拉云。 卡拉云是一套低代码开发工具,内置常用的前端组件,无需写任何前端代码,直接数据库 & API 即可快速搭建一套属于你自己的后台管理工具。

卡拉云Echarts 图表渐变色示例

这是用卡拉云搭建的柱状图表,点 DEMO 换换里面的数字试试。立即注册,你也能用 1 分钟搭建出这样的工具。

样式二:径向渐变

02-02-echarts-bar-add-gradient-color

myChart.setOption({

      ...

    color: {
              type: "radial", // 0.5 为中心位置
              x: 0.9, // 中心轴左右移动
              y: 0.5, // 中心轴上下移动
              r: 1, // 圆点的半径
              colorStops: [
                {
                  offset: 0,
                  color: "#00d4ff", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#8e3ff4", // 100% 处的颜色
                },
              ],
              global: false,
        },

        .....

      });
...

Echarts 柱状图颜色渐变完整代码:Github

扩展阅读:《如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)

二、Echarts 折线图区域颜色渐变

方法二:使用 Echarts 内置渐变生成器 echarts.graphic.LinearGradient

01-echarts-line-add-gradient-color

series: [
....
    {
      name: '实际',
      data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170, 3665],
      type: 'line',
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //这里是渐变的角度,上下左右四个方向
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'//这里是渐变色的起始颜色
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'// 这里是渐变色的结束颜色
          }
        ])
      },
    }
...
]

Echarts 折线图区域颜色渐变完整代码:Github

扩展阅读:《Echarts 折线图完全配置指南

图表调试起来太费劲?

试用卡拉云,拖拽组件连接 API和数据库直接生成后台系统,将两个月的工期降低至两天

三、Echarts 饼图渐变

方法三:把 Echarts 图表的渐变色写在数组里

03-echarts-pie-add-gradient-color

......

itemStyle: {
           normal: {
           color: (list) => {
                      var colorList = [
                        {
                            colorStart:'#488BFF',
                            colorEnd:'#9abffd'                     
                        },
                        {
                            colorStart:'#26CEBA',
                            colorEnd:'#8efaed'
                        },
                        {
                            colorStart:'#FFC069',
                            colorEnd:'#fadfba'
                        },
                        {
                            colorStart:' #FD6865',
                            colorEnd:'#f8b2b1'
                        }
                      ]
                      return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                          offset: 0,
                          color: colorList[list.dataIndex]['colorStart']
                      }, {
                          offset: 1,
                          color: colorList[list.dataIndex]['colorEnd']
                      }])                                    
                    }
                }
            },
    }
  ]

......

Echarts 饼图渐变完整代码:Github

扩展阅读:《Echarts 关系图完全配置指南

渐变设置 error 'echarts' is not defined 报错的两种解决方式

04-error-echarts-is-not-defined

在使用 Echarts 内置渐变器(echarts.graphic.LinearGradient)时,运行程序会报错。碰到这种情况有两个解决方案

方法一:单独引入 echarts

在组件页面,再单独引用一次 Echarts,报错消失。

<script>
import * as echarts from 'echarts'
export default {
          .......
};
</script>

方法二:let t = this;

<script>
export default {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let t = this;
......

color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
         
......

        ])
      },

};
</script>

使用「卡拉云」直接生成各类图表

本文介绍了在 Echarts 中如何将各类图表做出渐变色的多种方法,虽然开源库已经帮我们解决了大部分造轮子的事,但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。

kalacloud-charts

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

一起交流

wechat-jiangchuan

蒋川,卡拉云联合创始人,B 端数据开发。

如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan

扩展阅读: