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);
      }
    },
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值