使用 echarts 实现象形图渐变色_echart pictorialbar 实现渐变-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45000975/article/details/130276302

该文章介绍了一种通过Echarts实现渐变柱状图与象形柱状图结合的方法。首先创建两个普通渐变柱状图，然后在上方叠加两个白色象形柱状图，通过调整位置和颜色来达到预期效果。代码示例中展示了具体的配置项，包括LinearGradient用于定义颜色渐变，以及pictorialBar类型用于创建象形图。

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

在这里插入图片描述
实现如图所示功能，
实现思路：象形图无法实现整块渐变，则先实现两个普通的渐变柱状图，然后再实现两个象形柱状图，背景色设置为白色（调试时若无法区分可加对应底色），定位象形柱状图在普通柱状图上面即可。
代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  yAxis: {
    type: 'value',
    show:false,  
  },
  series: [
     {
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      barWidth:20,
      data: [120, 200, 150, 80, 70, 110, 130],
     },
     {
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f4d6b5' },
          { offset: 0.5, color: '#c7945e' },
          { offset: 1, color: '#f79122' }
        ])
      },
      barWidth:20,
       data: [180, 120, 160, 40, 70, 210, 160],
     },
    {
        type: "pictorialBar", //设置类型为象形柱状图
        symbol: "rect", //图形类型，带圆角的矩形
        symbolMargin: "2", //图形垂直间隔
        symbolRepeat: true, //图形是否重复
        // 分隔
        itemStyle: {
          normal: {
            color: "#fff",
          },
        },
        symbolClip: true,
        symbolSize: [20, 2],
        symbolPosition: "start",
        symbolOffset: [-12, -1],
        data: [120, 200, 150, 80, 70, 110, 130],
        z: 1,
				zlevel: 2
      },
      {
        type: "pictorialBar", //设置类型为象形柱状图
        symbol: "rect", //图形类型，带圆角的矩形
        symbolMargin: "2", //图形垂直间隔
        symbolRepeat: true, //图形是否重复
        // 分隔
       itemStyle: {
          normal: {
            color: "#f6f6f6",
          },
        },
        symbolClip: true,
        symbolSize: [20, 2],
        symbolPosition: "start",
        symbolOffset: [12,0],
        data: [180, 120, 160, 40, 70, 210, 160],
        z: 1,
				zlevel: 2
      },

  ]
};