ECharts柱状图自定义lenged 图例图标使用vue项目中assets下的的图片

哄牛上树

<template>
  <div>
    <div ref="barChart" style="width: 800px; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import iconA from '@/assets/mhImg/iconTest.png';
// import iconB from '@/assets/icons/icon-b.png';
// import iconC from '@/assets/icons/icon-c.png';
export default {
  data() {
    return {
      types: ['A', 'B', 'C', 'D', 'E', 'F'],
      values: [20, 30, 15, 40, 25, 35],
      iconA: iconA,
      // icons: [iconA, iconB, iconC] // 图片路径数组
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.barChart;
      const myChart = echarts.init(chartDom);

      const option = {
        // 自定义图例配置
        legend: {
          data: this.types.map((type, index) => ({
            name: type,
            icon: type=='A' ? `image://${iconA}` : ''
          }))
        },
        // // 配置图例，循环使用 assets 图片
        // legend: {
        //   data: this.types.map((type, index) => ({
        //     name: type,
        //     icon: `image://${this.icons[index]}` // 关键：使用 image:// 前缀
        //   }))
        // },
        xAxis: {
          type: 'category',
          data: this.types
        },
        yAxis: {
          type: 'value'
        },
        series: this.types.map((type, index) => ({
          name: type,
          type: 'bar',
          data: [this.values[index]]
        }))
      };

      myChart.setOption(option);
    }
  }
};
</script>

 

是我吖~

来源：https://www.cnblogs.com/fkcqwq/p/18872129