首页 1 2 3 4 5 6 7

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);
}