Echarts 每个柱子设置不同的图例

效果如下,每个柱子设置了不同的图例
在这里插入图片描述

 <div id="mainTopLeft" style="width: 100%;height:300px;"></div>
optionTopLeft() {
    
    
      let bar_data = [12,23]; //模拟数据
      // 通过id获取获取画布
      const myChart = echarts.init(document.getElementById('mainTopLeft'));
      // 指定图表的配置项和数据
      let option = {
    
    
        title: {
    
    
          text: '测试',
          textStyle: {
    
    
            fontWeight: 'normal',
            fontSize:16,
          },
          left:30,
          top:15,
        },
        legend: {
    
    
          orient: 'vertical', // 'horizontal'
          data:['测试1','','测试2'],
          textStyle: {
    
      // 图列内容样式
            // color: '#fff',  // 字体颜色
          },
          top:20,
          right:20
        },
        grid: {
    
    
          left: 30,
          right: 30,
          top: '30%',
          bottom:'10%',
          containLabel: true
        },
        tooltip : {
    
    
          formatter: '{a}:{c}%'//a 是series中每条数据name值,c 是data数值
        },
        xAxis : [ //横坐标
          {
    
    
            type : 'category',
            data:[''],
            containLabel: true
          }
        ],
        yAxis : [ //纵坐标
          {
    
    
            type : 'value',
            axisLabel: {
    
    
              show:true,
              //Y轴数值可添加百分号
              formatter: '{value}%',
            },
          }
        ],
        color:['#49BFB3','#5C84AF'],//柱状图的颜色
        series : [
          {
    
    name:'测试1'},
          {
    
    name:'测试2'},
        ],
      };
      for(let i = 0; i< option.series.length; i++){
    
    
        let style = {
    
     //定义柱状图的样式
          normal: {
    
    
            label: {
    
    
              show: true,
              //柱子上方显示数值
              position: 'top',
              //数值可加上'%'
              formatter: '{c}'
            }
          }
        };
        //每条数据指定类型为'bar'
        option.series[i].type = 'bar';
        // series中每条数据都加的样式
        option.series[i].itemStyle = style;
        //series 中 data赋值
        option.series[i].data = [bar_data[i]];
      };
      // 使用刚指定的配置项和数据显示图表。画布为 myCharts  true为显示
      if (option && typeof option === "object") {
    
    
        myChart .setOption(option, true);
      }
    },

猜你喜欢

转载自blog.csdn.net/weixin_44640323/article/details/121145719