Echates timeline实现每一个柱子都有图例

<div style="width:100%;height:300px" id="experChart2"></div>

具体方法如下

getLoadEchart(id){
  let bar_data = [2,3];
  let bar_data2 = [23,45];
  let myChart = this.$echarts.init(document.getElementById(id));
  // prettier-ignore
  let option = {
    //timeline基本配置都写在baseoption 中
    baseOption: {
      timeline: {
        //loop: false,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 1000,
        data: ['2020', '2021', '2022']
      },
      grid: { containLabel: true },
      xAxis: [{
        type: 'category',
        name: '',
      }],
      yAxis: { type: 'value', name: '' },
      series: [
        {
          type: 'bar',
        },
      ],
      // tooltip : {
      //   formatter: '{a}:{c}亿元'//a 是series中每条数据name值，c 是data数值
      // },
    },
    //变量则写在options中
    options:[
      {
        tooltip : {
          formatter: '{a}:{c}亿元'//a 是series中每条数据name值，c 是data数值
        },
        legend: {
          orient: 'horizontal', // 'horizontal'
          icon:'rect',
          top:'1%',
          left:30,
          itemWidth:10,
          itemHeight:10,
          data:['概（估）算总投资','累计到位资金','中央预算','省预算','地方预算','地方转贷','部资金','国内贷款','利用外资','企事业自筹','PPP项目建设单位资本金','其他资金来源'],
          textStyle: {  // 图列内容样式
            color:'#8c8c8c',
            fontSize:12,
          },
        },
        grid: {
          left: 30,
          right: 30,
          top: '20%',
          bottom:'15%',
          containLabel: true
        },
        xAxis: [{
          type : 'category',
          data:[],
          containLabel: true
        }],
        title: {
          text: '金额（亿元）',
          textStyle: {
            fontWeight: 'normal',
            fontSize:16,
          },
          left:30,
          top:30,
        },
        color:['#C23531','#2F4554','#61A0A8','#D48265','#91C7AE','#749F83','#CA8622','#BDA29A','#6E7074','#546570','#C4CCD3','#C23531'],//柱状图的颜色
      },
      // {
      //   series:[
      //     {
      //       data: [560, 350, 180]
      //     }
      //   ]
      // },
      // {
      //   series:[
      //     {
      //       data: [36, 55, 96]
      //     }
      //   ]
      // }
    ]
  }
  // 填充多条数据
  let series = [
    {name:'概（估）算总投资'},
    {name:'累计到位资金'},
    {name:'中央预算'},
    {name:'省预算'},
    {name:'地方预算'},
    {name:'地方转贷'},
    {name:'部资金'},
    {name:'国内贷款'},
    {name:'利用外资'},
    {name:'企事业自筹'},
    {name:'PPP项目建设单位资本金'},
    {name:'其他资金来源'}
  ]
  series.forEach((item,index) => {
    if (index === 0) {
      option.options[index].series = this.setData(bar_data)
    }else {
      let obj = {}
      obj.series = this.setData(bar_data2)
      option.options.push(obj)
    }
  })
  // option.options[0].series = this.setData(bar_data)
  // 使用刚指定的配置项和数据显示图表。画布为 myCharts  true为显示
  if (option && typeof option === "object") {
    myChart .setOption(option, true);
  }
},

setData(data) {
  let series = [
    {name:'概（估）算总投资'},
    {name:'累计到位资金'},
    {name:'中央预算'},
    {name:'省预算'},
    {name:'地方预算'},
    {name:'地方转贷'},
    {name:'部资金'},
    {name:'国内贷款'},
    {name:'利用外资'},
    {name:'企事业自筹'},
    {name:'PPP项目建设单位资本金'},
    {name:'其他资金来源'}
  ]
  for(let i = 0; i< series.length; i++){
    let style = { //定义柱状图的样式
      normal: {
        label: {
          show: false,
          //柱子上方显示数值
          position: 'top',
          //数值可加上'%'
          formatter: '{c}'
        }
      }
    };
    let markLine = {
      itemStyle: {
        normal: {
          color:'red',
          label: {
            formatter: '{c}'
          }
        }
      },
      data : [
        {type : 'min',
          name: '预警线'
        },
        {type : 'max',
          name: '预警线'
        }
      ]
    }
    //每条数据指定类型为'bar'
    series[i].type = 'bar';
    // series中每条数据都加的样式
    series[i].itemStyle = style;
    // series中每条数据都加预警线
    // option.options[0].series[i].markLine = markLine;
    //series 中 data赋值
    series[i].data = [data[i]];
  };
  return series
}