Echarts 三角形柱状图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [320, 200, 150, 80, 60],
      name: 'sales',
      type: 'pictorialBar',
      legendHoverLink: true,
      label: {
        show: false,
        position: 'insideTop',
        rotate: 0,
        color: '#eee'
      },
      itemStyle: {
        normal: {
          color: (params) => {
            //  colorList是每根柱子的颜色,一组是一个渐变
            var colorList = [
              ['#62C467', '#278D65'],
              ['#FF5B7A', '#BC3535'],
              ['#FFF600', '#D69105'],
              ['#FFB400', '#F66800'],
              ['#00CCFF', '#2A54B4'],
              ['#F75271', '#754ABF']
            ];
            var index = params.dataIndex;
            // 柱子个数超过colorList设置的个数,循环使用
            if (index >= colorList.length) {
              index = index - colorList.length;
            }
            // 这里的this.$echarts是项目中的echarts示例,改成对应的名字就好
            return new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorList[index][0]
              },
              {
                offset: 1,
                color: colorList[index][1]
              }
            ]);
          },
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              // color: 'black',
              //fontSize: 16
            }
          }
        }
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },

      barWidth: '80',
      barCategoryGap: '5%',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z'
    }
  ]
};

 

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值