Vue+Echarts 绘制极坐标柱状图

效果展示

实现思路

1. 使用柱状图系列+设置极坐标绘制弧线
2. 使用自定义系列+设置极坐标绘制弧线末尾标签
3. 通过自定义柱状图data的item样式，设置热力效果，按数量多少来设置颜色深浅，颜色深浅通过rgba色值中的a设置透明度
4. 通过设置angleAxis和radiusAxis属性来设置半圆展示等效果

实现代码（仅options）

let dataList=[
	{
		item: 'text',
		value: 90
	},
	{
		item: 'csv',
		value: 100
	}
];
let options = {
  polar: {
    radius: '90%'
  },
  angleAxis: {
    // 设置角度最大值为数据最大值的两倍，即可实现半圆效果
    max: dataList.length ? dataList[dataList.length - 1].value * 2 : 0,
    startAngle: 90, // 圆弧起始角度
    boundaryGap: false, // 坐标轴两边不留白
    axisTick: {
      show: false // 隐藏坐标轴刻度
    },
    axisLine: {
      show: false // 隐藏坐标轴轴线
    },
    splitLine: {
      show: false // 隐藏区域分隔线
    },
    axisLabel: {
      show: false // 隐藏坐标轴刻度标签
    }
  },
  radiusAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      overflow: 'truncate', // 截断，并在末尾显示ellipsis配置的文本，默认为...
      interval: 0 // 不重叠展示完整标签
    },
    data: dataList.map((item) => {
      return item.name;
    })
  },
  tooltip: {},
  series: [
    {
      type: 'bar',
      barWidth: 8,
      data: dataList.map((item, index) => {
        return {
          value: item.value,
          itemStyle: {
            color: `rgba(66, 150, 253,${index * 0.1 + 0.1})` // 动态设置颜色
          }
        };
      }),
      coordinateSystem: 'polar' // 使用极坐标
    },
    {
      type: 'custom', // 自定义系列
      coordinateSystem: 'polar', // 使用极坐标
      tooltip: {
        show: false
      },
      renderItem: function (params, api) { //渲染末尾数字
        var values = [api.value(0), api.value(1)];
        var coord = api.coord(values);
        return {
          type: 'text',
          position: [3 * Math.sin(coord[3]), 3 * Math.cos(coord[3])],
          rotation: coord[3] + Math.PI / 2,
          origin: [coord[0], coord[1]],
          style: {
            text: api.value(1),
            fill: '#333333',
            textAlign: 'right',
            textVerticalAlign: 'middle',
            x: coord[0],
            y: coord[1]
          }
        };
      },
      data: dataList.map((item) => {
        return {
          value: item.value
        };
      })
    }
  ]
};