echarts 带图形的渐变色柱子实现

效果图

 

 

实现：

首先图形是icon，就是跟UI拿的，不用自己用echart画

 

 功能点实现关键是象形柱图，就是可以设置各种具象图形元素的柱形图

 type: 'pictorialBar'

底图是个正常的柱形图（说明： 以下代码px2px是本地的单位转换方法，复制代码的注意删掉）

{
            type: 'bar',
            barWidth: px2px(28),
            label: {
              show: true,
              color: '#01F1FF',
              position: 'top',
              fontSize: px2px(12),
              fontWeight: 'bold',
              formatter: (p) => {
                return formatNumber(p.value, 0) + '%' + '\n'
              }
            },
            itemStyle: {
           // 渐变色实现
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(35,164,255,0.65)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(63,157,255,0)' // 100% 处的颜色
                }]
              }
            },
            data: [10， 20， 30]
          },

象形柱图 实现图标叠加

 {
            zlevel: 2,
            name: '图标',
            type: 'pictorialBar',
            symbolSize: [px2px(30), px2px(23)],
            symbolOffset: [px2px(0), px2px(-20)],
            symbolPosition: 'end',
            data: [
              { value: 10,  symbol: `image://${barIcon1}`}, // 引入图标
             { value: 20,  symbol: `image://${barIcon1}`},
             { value: 30,  symbol: `image://${barIcon1}`}
            ]
          }, 

 

图标引用（本地已有）

import barIcon1 from '@/assets/img/slPage/barIcon1.png'
import barIcon2 from '@/assets/img/slPage/barIcon2.png'

在线图标path如下，替换data里面symbol可以测试验证

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

 

完整option代码如下

let option = {
        color: ['#00A8FF'],
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          textStyle: {
            fontSize: px2px(12),
            color: 'rgba(255,255,255,0.8)'
          },
          formatter: function (params) {return params[0].name + '<br/>' + params[1].marker + formatNumber(params[0].value, 1) + '%'
          }
        },
        legend: {
          show: false
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#282E3B',
              width: px2px(1)
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0, // 强制显示完整
            color: 'rgba(255,255,255,0.8)',
            fontSize: px2px(12)
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#687e93',
              width: px2px(2)
            }
          },
          data: []
        },
        yAxis: [{
          type: 'value',
          name: '',
          // nameGap: 10,
          nameTextStyle: {
            color: '#687e93',
            fontFamily: 'PingFang Regular',
            fontSize: px2px(11),
            align: 'right'
          },
          axisLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.30)',
              width: px2px(1)
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,0.6)',
            fontSize: px2px(11),
            formatter: '{value}%'
          },
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#687e93',
            fontFamily: 'PingFang Regular',
            fontSize: px2px(11)
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#687e93',
              width: px2px(1)
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,0.6)',
            fontSize: px2px(11),
            formatter: '{value}%'
          },
          splitLine: {
            show: false
          }
        }],
        series: [
          {
            type: 'bar',
            barWidth: px2px(28),
            label: {
              show: true,
              color: '#01F1FF',
              position: 'top',
              fontSize: px2px(12),
              fontWeight: 'bold',
              formatter: (p) => {
                return formatNumber(p.value, 0) + '%' + '\n'
              }
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(35,164,255,0.65)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(63,157,255,0)' // 100% 处的颜色
                }]
              }
            },
            data: []
          },
          {
            zlevel: 2,
            name: '图标',
            type: 'pictorialBar',
            symbolSize: [px2px(30), px2px(23)],
            symbolOffset: [px2px(0), px2px(-20)],
            itemStyle: {

            },
            symbolPosition: 'end',
            data: []
          },
          {
            zlevel: 1,
            name: '图标',
            type: 'pictorialBar',
            symbolSize: [px2px(42), px2px(15)],
            symbolOffset: [px2px(0), px2px(0)],
            itemStyle: {

            },
            symbolPosition: 'end',
            data: []
          }
        ]
      }

数据代码
chartData =[
        { label: '大单品1', first: 10 },
        { label: '大单品2', first: 20 },
        { label: '大单品3', first: 30 }
      ]
 for (let item of chartData) {
        xLabelData.push(item.label)
        firstData.push(item.first)
        secondData.push({
          value: item.first,
          symbol: `image://${barIcon1}`
        })
        thirdData.push({
          value: item.first,
          symbol: `image://${barIcon2}`
        })
      }
      option.xAxis.data = xLabelData
      option.series[0].data = firstData
      option.series[1].data = secondData
      option.series[2].data = thirdData

 完~