echarts 锥形图

// 锥形图
function taperEcharts(id) {
  let bridgeCharttaper = echarts.init(document.getElementById(id));
  let data = [4, 7],
    color1 = ['#18c89f', '#1f8ade', '#c9c222', '#0b10c4', '#b32444'],
    color2 = ['#091d34', '#091f38', '#0b1c33', '#4c75bd', '#b37d90']
  let option = {
    xAxis: {
      type: 'category',
      data: ['1月', '2月'],
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['#060a39', '#060a39'],
        },
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        }
      }
    },
    series: [
      {
        label: {
          show: true,
          position: 'top',
          color: '#E0A93A',
          fontSize: 18,
          fontWeight: 'bold',
        },
        name: 'test',
        data: data.map((item, index) => {
          return {
            value: item,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color1[index],
                  },
                  {
                    offset: 1,
                    color: color2[index],
                  },
                ],
                global: false,
              },
            },
          }
        }),
        type: 'pictorialBar',
        barWidth: 26,
        symbol: 'path://M150 50 L130 130 L170 130  Z',
      },
    ],
  };

  bridgeCharttaper.setOption(option);
}

 该文只为记录,如有更好方法请大佬指教

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值