Echarts 柱状图颜色渐变渐变规则

最新推荐文章于 2025-06-24 16:51:29 发布

xiaoheisboy

最新推荐文章于 2025-06-24 16:51:29 发布

阅读量1.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：画个 Echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/xiaoheisboy/article/details/117263702

画个 Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用Echarts创建具有颜色渐变效果的柱状图，通过LinearGradient实现从红色到黑色的渐变。代码示例中详细说明了配置项，包括数据、坐标轴设置和itemStyle的定义，帮助读者理解并应用到自己的项目中。

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

Echarts 柱状图颜色渐变渐变规则

废话不多say 上代码

👍记得点赞哦 😄

👇大佬请看👇

颜色渐变控制：

color: new echarts.graphic.LinearGradient(
1, 0, 0, 0,
          [
            {offset: 0, color: '#D40F76'},
            {offset: 1, color: '#339DD9'}
          ]
        )

具体写法 Html

<div  id="even_reporting"></div>

具体写法 Js

方法名(){
 let even_reporting = echarts.init(document.getElementById("even_reporting"));
	option = {
		xAxis: [
		    {
		        type: 'category',
		        data: ['1','2','3','4','5'],
		        axisPointer: {
		            type: 'shadow'
		        }
		    }
		],
		yAxis: [
		    {
		        type: 'value',
		        name: '渐变',
		        min: 0,
		        max: 250,
		        interval: 50,
		    }
		],
		series: [{
		    name: '渐变',
		    type: 'bar',
		    data: [30, 60, 35, 150, 120,], 
		    itemStyle: {
		        normal: {
		            color: new echarts.graphic.LinearGradient(
		                1, 0, 0, 0, // 这里不同的排序会出现不同的效果   查看4 渐变规则
		                [
		                    {offset: 0, color: '#fa0020'},  // 红
		                    // 可以加0.2等
		                    {offset: 1, color: '#000000'},  // 黑
		                ]
		            )
		        },
		    },
		}]
  even_reporting.setOption(option);
}