(echarts)echarts柱状图渐变色实现

最新推荐文章于 2024-08-08 13:18:39 发布

nyf_unknown

最新推荐文章于 2024-08-08 13:18:39 发布

阅读量477

点赞数

分类专栏：图表文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_44754635/article/details/129901700

版权

图表专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章介绍了两种在Echarts中为柱状图设置渐变色的方法。第一种通过`newecharts.graphic.LinearGradient`定义渐变色；第二种使用`color`属性内的`linear`类型来设置渐变。两种方式都提供了从一种颜色渐变到另一种颜色的效果。

摘要由CSDN通过智能技术生成

(echarts)echarts柱状图渐变色实现

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

代码：

...
series: [
	{
		name: "重量",
		type: "bar",
		data: data,
		barWidth: 16,
		color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			{
				offset: 0,
				color: "#07a5f4",
			},
			{
				offset: 1,
				color: "#55ebfe",
			},
		]),
	},
	{
		name: "批次",
		type: "line",
		data: data2,
		color: "#91cc75",
	},
],
...

写法二：

 series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      color: {
        type: 'linear',
        x: 0, //右
        y: 0, //下
        x2: 0, //左
        y2: 1, //上
        colorStops: [
          {
            offset: 0,
            color: '#11d56d' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#83bff6' // 100% 处的颜色
          }
        ]
      }
    }
  ]