zhgkpt-datav/app/src/views/Basic/components/HeightDistribution.vue

<template>
  <div>
    <div>
      <div ref="chart" class="item" style="height: 300px" />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
      timer: "",
    };
  },
  mounted() {
    // 初始化图表实例
    const chartDom = this.$refs.chart;
    //   // 初始化图表实例
    this.chart = echarts.init(chartDom);
    this.initChart();
  },
  methods: {
    initChart(data) {
      const datalsit = [220, 182, 191, 234, 290, 330, 310];
      const sideData = datalsit.map((item) => item + 4.5);
      const option = {
        backgroundColor: "#041730",
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          top: "5%",
          right: "2%",
          text: "单位：栋",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
          },
        },

        grid: {
          right: "10px",
        },
        xAxis: {
          data: ["30m以下", "30~50m", "50~80m", "80~100m", "100m以上"],
          //坐标轴
          axisLine: {
            lineStyle: {
              color: "#3eb2e8"
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: "#4784e8",
              type: 'dashed'
            },
          },
        },
        series: [
          {
            tooltip: {
              show: false,
            },
            type: "bar",
            barWidth: 6,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,209,255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255,224, .87)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
            barGap: 0,
          },
          {
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,209,255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255,224, .87)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            barGap: 0,
            data: sideData,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: 1,
              borderColor: "#0571D5",
              color: "#1779E0",
            },
            symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
            symbolSize: ["30", "12"],
            symbolOffset: ["0", "-11"],
            //symbolRotate: -5,
            symbolPosition: "end",
            data: data,
            z: 3,
          },
        ],
      };

      this.chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;
    },
  },
};
</script>

<style scoped></style>