Echarts极坐标系下的堆叠柱状图

Echarts极坐标系下的堆叠柱状图

<template>
  <div>
    <p class="trave_title">{{ title }}</p>
    <div :style="'width: 100%;' + 'height:' + height + ';'" :id="id"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "qiantaobt2",
  props: {
    id: String,
    title: String,
    colorArr: Object,
    height: String,
    polarBarData: Array,
  },
  data() {
    return {};
  },
  mounted() {
    this.initEchart(this.id);
  },
  methods: {
    initEchart(id) {
      var chartDom = document.getElementById(id);
      chartDom.removeAttribute("_echarts_instance_");

      var myChart = echarts.init(chartDom);

      var option;

      option = {
        angleAxis: {
          //极坐标系的角度轴
          type: "value",
          axisLine: {
            //坐标轴轴线设置
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            //刻度标签设置
            textStyle: {
              color: "#fff",
            },
            formatter: "{value} %",
          },
        },
        radiusAxis: {
          type: "category",
          data: this.polarBarData,
          z: 10,
          axisLabel: {
            interval: 0,
            //刻度标签设置
            textStyle: {
              color: "#fff",
            },
          },
        },

        polar: {
          center: ["50%", "55%"],
          radius: ["00%", "70%"],
        },
        tooltip: {},
        series: [
          {
            type: "bar",
            data: [10, 20, 30, 10],
            coordinateSystem: "polar",
            name: "时间不敏感-价格敏感",
            stack: "a",
          },
          {
            type: "bar",
            data: [20, 30, 20, 10],
            coordinateSystem: "polar",
            name: "时间敏感-价格不敏感",
            stack: "a",
          },
          {
            type: "bar",
            data: [30, 30, 10, 30],
            coordinateSystem: "polar",
            name: "时间价格均敏感",
            stack: "a",
          },
          {
            type: "bar",
            data: [40, 20, 40, 50],
            coordinateSystem: "polar",
            name: "时间价格均不敏感",
            stack: "a",
          },
        ],
        legend: {
          show: true,
          data: [
            "时间不敏感-价格敏感",
            "时间敏感-价格不敏感",
            "时间价格均敏感",
            "时间价格均不敏感",
          ],
          textStyle: {
            color: "#fff",
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss">
</style>

polarBarData数据

polarBarData: ["商务座", "二等座", "硬座硬卧"],