echarts记录贴

说起来,基本不用echarts...

 饼图内圈

横向柱状图(圆角+渐变): https://blog.csdn.net/maxwell0401/article/details/72861035

function getIndexRichStyle(config = {}) {
  return Object.assign({
    align: 'center',
    color: 'rgb(199,86,83)',
    width: 27,
    height: 22,
    borderWidth: 1,
    borderColor: 'rgb(199,86,83)'
  },
  config);
}
const levelStyleMap = {
  0 : '{a|1}',
  1 : '{b|2}',
  2 : '{c|3}',
};
var option = {
  xAxis: {
    show: false
  },
  yAxis: {
    type: 'category',
    data: ['倒萨倒萨撒旦', '倒萨倒萨', '小阿斯顿赵', '小重传马', '撒旦', '小张', '小实时'],
    inverse: true,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      formatter(value, index) {
        return levelStyleMap[index] || `{index|${index}}`;
      },
      rich: {
        index: getIndexRichStyle(),
        a: getIndexRichStyle({
          color: 'red',
          borderColor: 'red'
        }),
        b: getIndexRichStyle({
          color: 'green',
          borderColor: 'green'
        }),
        c: getIndexRichStyle({
          color: 'blue',
          borderColor: 'blue'
        }),
      },
    },

  },

  series: [{
    type: 'bar',
    data: [3100, 2142, 1218, 581, 431, 383, 163],
    barWidth: 22,
    label: {
      show: true,
      position: 'insideLeft',
      offset: [5, 0],
      formatter(params) {
        return params.name;
      },
    },
    itemStyle: {
      barBorderRadius: 8,
      borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#fff'
      },
      {
        offset: 1,
        color: 'yellow'
      }])
    },
  }]
};

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值