echarts记录贴

版权声明:个人笔记,不喜勿喷 https://blog.csdn.net/qq_39571197/article/details/89340699

说起来,基本不用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'
      }])
    },
  }]
};

 

 

没有更多推荐了,返回首页