数据可视化大屏项目开发中，设计师在设计大屏的时候，会尽可能让效果酷炫华丽，我们在开发时就遇到难题了，比如下面的效果，使用echarts默认的方法是实现不了的，我们只能换一种方法来实现。

我们将柱子图片分成上下两部分

最终效果

代码渲染

我们把图片拆为两部分，上面固定部分和下面可拉伸部分，然后在echarts中拼接起来，达到设计图上的效果。

{
    name: '进港件',
    type: 'pictorialBar',
    symbol: 'image://' + bg,
    symbolSize: [barWidth, '100%'],
    data: this.list.map(obj => obj.value),
    barWidth: barWidth,
    symbolOffset: [-12, 0],
    legend: {
      show: false
    }
  },
  {
    name: '进港件', // 顶部
    type: 'pictorialBar',
    symbolPosition: 'end',
    symbol: 'image://' + bgTop,
    symbolSize: [barWidth, 13],
    symbolOffset: [-12, -13],
    data: this.list.map(obj => obj.value), // 设置顶部位置
    barWidth: barWidth,
    tooltip: {
      show: false,
      trigger: 'axis'
    },
  },

点缀

在设计图上我们还有点缀需要增加

{
    name: '出港件', // 圆点
    type: 'pictorialBar',
    symbolPosition: 'end',
    symbol: 'image://' + dot2,
    symbolSize: [10, 8],
    symbolOffset: [10, -13],
    data: new Array(this.list.length).fill(0), // 将所有数据设置为0
    barWidth: barWidth,
    tooltip: {
      show: false,
      trigger: 'axis'
    },
  },

最终渲染效果

完整实例代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import * as echarts from "echarts";
import bg from '../assets/zhu1_02.png'
import bgTop from '../assets/zhu1_01.png'
import bg2 from '../assets/zhu2_02.png'
import bg2Top from '../assets/zhu2_01.png'
import dot1 from '../assets/dot1.png'
import dot2 from '../assets/dot2.png'

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    list() {
      this.drawLine()
    }
  },
  computed: {},
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = echarts.init(this.$refs.echarts)
      var barWidth = 16
      var option = {
        textStyle: {
          color: '#c0c3cd',
          fontSize: 14,
        },
        title: { // 添加标题配置
          text: '件',
          left: '0%', // 左上角位置
          top: '15',
          textStyle: {
            color: '#01405e', // 文本颜色
            fontSize: 14, // 字体大小
          }
        },
        legend: {
          show: true,
          top: 15,
          right: 0,
          itemWidth: 9,  // 修改为9px
          itemHeight: 5, // 修改为5px
          icon: 'rect',
          padding: 0,
          textStyle: {
            color: 'rgba(0, 178, 255, 1)',
            fontSize: 14,
            padding: [0, 0, 0, 0],
          },
          data: [
            {
              name: '进港件'
            },
            {
              name: '出港件',
            },
          ],
          itemStyle: {
            borderRadius: 1,  // 设置圆角
          }
        },

        color: ['rgba(109, 225, 232, 1)', 'rgba(9, 176, 252, 1)'],
        grid: {
          containLabel: true,
          left: 10,
          right: 10,
          bottom: 10,
          top: 60,
        },
        xAxis: {
          nameTextStyle: {
            color: '#c0c3cd',
            padding: [0, 0, -10, 0],
            fontSize: 12,
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 14,
            interval: 0,
            lineHeight: 20,
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#384267',
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#014264',
            },
            show: true,
          },
          data: this.list.map(obj => obj.name),
          type: 'category',
        },
        yAxis: {
          minInterval: 10,
          axisLabel: {
            color: '#003852',
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            lineStyle: {
              color: '#668092',
              width: 0,
            },
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#00283c'
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(8, 46, 124, 1.00)',
              width: 1,
              type: "dashed"
            },
            show: false,
          }
        },
        // 调整柱子间距
        series: [
          {
            name: '进港件',
            type: 'pictorialBar',
            symbol: 'image://' + bg,
            symbolSize: [barWidth, '100%'],
            data: this.list.map(obj => obj.value),
            barWidth: barWidth,
            symbolOffset: [-12, 0],
            legend: {
              show: false
            }
          },
          {
            name: '进港件', // 顶部
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'image://' + bgTop,
            symbolSize: [barWidth, 13],
            symbolOffset: [-12, -13],
            data: this.list.map(obj => obj.value), // 设置顶部位置
            barWidth: barWidth,
            tooltip: {
              show: false,
              trigger: 'axis'
            },
          },
          {
            name: '进港件', // 圆点
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'image://' + dot1,
            symbolSize: [10, 8],
            symbolOffset: [-12, -13],
            data: new Array(this.list.length).fill(0), // 将所有数据设置为0
            barWidth: barWidth,
            tooltip: {
              show: false,
              trigger: 'axis'
            },
          },
          {
            name: '出港件',
            type: 'pictorialBar',
            barCategoryGap: '40%', // 类别之间的间距
            symbol: 'image://' + bg2,
            symbolSize: [barWidth, '100%'],
            data: this.list.map(obj => obj.value2), // 减去底部的高度
            barWidth: barWidth,
            symbolOffset: [10, 0],
          },
          {
            name: '出港件', // 顶部
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'image://' + bg2Top,
            symbolSize: [barWidth, 13],
            symbolOffset: [10, -13],

            tooltip: {
              show: false,
              trigger: 'axis'
            },
            data: this.list.map(obj => obj.value2), // 设置顶部位置
            barWidth: barWidth,
          },

          {
            name: '出港件', // 圆点
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'image://' + dot2,
            symbolSize: [10, 8],
            symbolOffset: [10, -13],
            data: new Array(this.list.length).fill(0), // 将所有数据设置为0
            barWidth: barWidth,
            tooltip: {
              show: false,
              trigger: 'axis'
            },
          },
        ],
        tooltip: {
          show: true,
          trigger: 'axis'
        },
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>