<template>
  <div ref="chartContainer" :style="{width: '100%', height: '200px'}"
  ></div>
</template>

<script>
export default {
  name: 'DynamicChart',
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    chartHeight() {
      if (this.myChart) {
        this.myChart.resize(); // 让 ECharts 重新适应新高度
      }
    }
  },
  mounted() {
    console.log('->>>>')
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chartContainer);
      let colors = ['#1FDEA3'];
      const backgroundData = [50, 50, 50, 50]; // 自定义背景柱高度

      let c = 0;
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x + c, shape.y];
          const c1 = [shape.x - 9 + c, shape.y - 9];
          const c2 = [xAxisPoint[0] - 9 + c, xAxisPoint[1] - 9];
          const c3 = [xAxisPoint[0] + c, xAxisPoint[1]];
          ctx.moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath();
        },
      });

      const CubeRight = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x + c, shape.y];
          const c2 = [xAxisPoint[0] + c, xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 12 + c, xAxisPoint[1] - 6];
          const c4 = [shape.x + 12 + c, shape.y - 6];
          ctx.moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });

      const CubeTop = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x + c, shape.y];
          const c2 = [shape.x + 12 + c, shape.y - 6];
          const c3 = [shape.x + 3 + c, shape.y - 15];
          const c4 = [shape.x - 9 + c, shape.y - 9];
          ctx.moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });

      const CubeLeft1 = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x - c, shape.y];
          const c1 = [shape.x - 9 - c, shape.y - 9];
          const c2 = [xAxisPoint[0] - 9 - c, xAxisPoint[1] - 9];
          const c3 = [xAxisPoint[0] - c, xAxisPoint[1]];
          ctx.moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath();
        },
      });

      const CubeRight1 = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x - c, shape.y];
          const c2 = [xAxisPoint[0] - c, xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 12 - c, xAxisPoint[1] - 6];
          const c4 = [shape.x + 12 - c, shape.y - 6];
          ctx.moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });

      const CubeTop1 = this.$echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x - c, shape.y];
          const c2 = [shape.x + 12 - c, shape.y - 6];
          const c3 = [shape.x + 3 - c, shape.y - 15];
          const c4 = [shape.x - 9 - c, shape.y - 9];
          ctx.moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
        },
      });

      this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
      this.$echarts.graphic.registerShape('CubeRight', CubeRight);
      this.$echarts.graphic.registerShape('CubeTop', CubeTop);

      this.$echarts.graphic.registerShape('CubeLeft1', CubeLeft1);
      this.$echarts.graphic.registerShape('CubeRight1', CubeRight1);
      this.$echarts.graphic.registerShape('CubeTop1', CubeTop1);
      let xData = ['50万以下', '100万以下', '200万以下', '200万以上']
      const planned = [50, 10, 30, 40];
      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: 30,
          right: 30,
          bottom: 20,
          top: 40,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          // 坐标轴指示器，坐标轴触发有效(axis)
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            let returnData = params[0].axisValue + '<br/>';
            for (let i = 0; i < params.length; i++) {
              returnData += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + colors[i] + '"></span>';
              returnData += params[i].seriesName + '<span style="padding-left:13px;">' + params[i].value + '</span><br/>';
              if(i>0){
                break;
              }
            }
            return returnData;
          },
        },
        legend: {
          data: [
            {
              name: '主体数量',
              itemStyle: {
                color: colors[0]
              }
            },
            {
              name: '品牌数量',
              itemStyle: {
                color: colors[1]
              }
            }
          ],
          textStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 14,
            color: 'rgba(178, 175, 173, 1)'
          },
          itemWidth: 10,
          itemHeight: 8,
          itemGap: 15,
          top: '1%',
          right: '3%'
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            show: false
          },
          offset: 10,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#748EAB',
            },
          },
          axisLabel: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 12,
            fontWeight: 'bold',
            color: '#85B6BC',
            margin: 6,
            interval: 0,
            formatter: function (value) {
              return `{down|${value}}`;
            },
            rich: {
              down: {
                padding: [5, 0, 0, 0],
                fontSize: 12,
                fontWeight: 'bold',
                color: '#85B6BC',
                fontFamily: 'MicrosoftYaHei',
              }
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF20',
              type: 'dashed',   // 改为虚线
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 12,
            color: '#85B6BC'
          },
          min: 0,
        },
        series: [
          {
            type: 'custom',
            name: '主体数量(个)',
            label: {
              normal: {
                show: true,
                position: 'top',

                fontSize: 16,
                color: '#fff',
                offset: [2, -25]
              }
            },
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#023A8A' },
                        { offset: 1, color: '#0EC071' }
                      ]),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#023A8A' },
                        { offset: 1, color: '#27E588' }
                      ]),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#6EFFBA' },
                        { offset: 1, color: '#1EE783' }
                      ]),
                    },
                  },
                ],
              };
            },
            data: planned,
          },
          {
            //柱形顶端显示x轴数据
            type: "bar",
            name:'主体数量(个)',
            label: {
              normal: {
                distance:20,
                show: true,
                position: "top",
                fontSize: 12,
                color: "#fff",
                align: "center",
                verticalAlign: "bottom",
                offset: [0, 0],
                fontWeight: "bold"
              },
            },
            itemStyle: {
              color: "transparent",
            },
            data:planned,
          },
          {
            type: 'custom',
            name: '背景柱',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: '#2D9DD628' // 左面半透明色
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: '##01E0B360' // 左面半透明色
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#0F795D40' },
                        { offset: 1, color: '#52FFCF40' }
                      ]),
                    },
                  },
                ],
              };
            },
            data: backgroundData,
            z: 1 // 背景柱层级靠后
          },
        ],
      };
      this.myChart.setOption(option);
    },
  }
};
</script>
