push

lib/component/echarts/components/chart/bar/BaseBar.vue

@@ -0,0 +1,43 @@
+<!-- @format -->
+
+<template>
+  <div class="base-bar" id="basebar" ref="BaseBarRef"></div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { init } from 'echarts';
+
+  export default defineComponent({
+    name: 'BaseBar',
+    props: {},
+    data() {
+      return {
+        options: null,
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {
+      setOption(obj) {
+        this.options = obj;
+      },
+      getOption() {
+        return this.options;
+      },
+      renderChart() {
+        if (!this.chartbox) {
+          this.chartbox = init(this.$refs.BaseBarRef, null, { renderer: 'svg' });
+        }
+        this.chartbox.clear();
+        let option = this.getOption();
+        this.chartbox.setOption(option, { notMerge: false });
+      },
+    },
+  });
+</script>
+<style lang="less">
+  .base-bar {
+    height: 100%;
+    width: 100%;
+  }
+</style>

lib/component/echarts/components/chart/bar/MixedLineBar.vue

@@ -0,0 +1,255 @@
+<!-- @format -->
+
+<script>
+  import { defineComponent } from 'vue';
+  import BaseBar from './BaseBar.vue';
+  import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
+
+  export default defineComponent({
+    name: 'MultipleBar',
+    extends: BaseBar,
+    props: {
+      xAxis: {
+        type: Array,
+        required: true,
+      },
+      series: {
+        type: Array,
+        required: true,
+      },
+      yAxisName: {
+        type: Array,
+        required: true,
+      },
+      axisLabelRotate: {
+        type: Number,
+        default: 0,
+      },
+      colorDatas: {
+        type: Array,
+        default: () => {
+          return ['#33B8CB', '#00F0FF', '#00F3FF', '#32C691'];
+        },
+      },
+      borderColor: {
+        type: String,
+        default: '#24B0D4',
+      },
+      shadowColor: {
+        type: String,
+        default: '#2DBFDD',
+      },
+    },
+    data() {
+      return {
+        colorRgb: [],
+        borderColorRGB: {},
+        shadowColorRGB: {},
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      for (let i = 0; i < this.colorDatas.length; i++) {
+        this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
+      }
+      this.borderColorRGB = colorTransferToRgb(this.borderColor);
+      this.shadowColorRGB = colorTransferToRgb(this.shadowColor);
+
+      let optionData = this.optionHandle();
+
+      this.setOption(optionData);
+      this.renderChart();
+    },
+    methods: {
+      getChangeData() {
+        var seriesDatas = [];
+        var legendDatas = [];
+        var barObject = {
+          name: this.series[0].name,
+          barMaxWidth: '36%',
+          data: this.series[0].data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: `rgba(${this.colorRgb[1].r},${this.colorRgb[1].g},${this.colorRgb[1].b}, 1)`, // 100% 处的颜色
+                },
+                {
+                  offset: 0.13,
+                  color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},1)`, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},0.1)`, // 0% 处的颜色
+                },
+              ],
+            },
+          },
+          type: this.series[0].type,
+        };
+        var lineObject = {
+          type: this.series[1].type,
+          name: this.series[1].name,
+          data: this.series[1].data,
+          yAxisIndex: 1,
+          lineStyle: {
+            width: 2,
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          itemStyle: {
+            color: '#0F3A46',
+            borderColor: '#00F0FF',
+            borderWidth: 2,
+          },
+          lineStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: `rgba(${this.colorRgb[2].r},${this.colorRgb[2].g},${this.colorRgb[2].b}, 1)`, // 100% 处的颜色
+                },
+                {
+                  offset: 0.7,
+                  color: `rgba(${this.colorRgb[2].r},${this.colorRgb[2].g},${this.colorRgb[2].b}, 1)`, // 100% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: `rgba(${this.colorRgb[3].r},${this.colorRgb[3].g},${this.colorRgb[3].b},1)`, // 0% 处的颜色
+                },
+              ],
+            },
+          },
+        };
+        seriesDatas = [barObject, lineObject];
+        for (let i = 0; i < this.series.length; i++) {
+          legendDatas.push({
+            name: this.series[i].name,
+            icon: 'rect',
+            itemStyle: {
+              color: this.colorDatas[i],
+            },
+          });
+        }
+
+        return { series: seriesDatas, legendData: legendDatas };
+      },
+      getyAxisDatas() {
+        let yAxisArr = [];
+        for (let i = 0; i < this.yAxisName.length; i++) {
+          let name = this.yAxisName[i].length ? this.yAxisName[i] : '';
+          var offVal = name.length * 10 + 20;
+          var offArr = i == 0 ? [0, 0, 0, -offVal] : [0, -offVal, 0, 0];
+          yAxisArr.push({
+            type: 'value',
+            alignTicks: true,
+            name: this.yAxisName[i],
+            nameTextStyle: {
+              padding: offArr,
+              opacity: 0.34,
+              fontSize: 11,
+            },
+            nameLocation: 'end',
+            axisLine: {
+              show: true,
+              onZero: false,
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#FFFFFF',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              formatter: function (v) {
+                return tranNumber(v);
+              },
+            },
+          });
+        }
+
+        return yAxisArr;
+      },
+      optionHandle() {
+        let colorDatas = this.colorDatas;
+        let changeData = this.getChangeData();
+        let yAxisDatas = this.getyAxisDatas();
+        var option = {
+          animationDuration: 300,
+          animationEasing: 'linear',
+          textStyle: {
+            color: '#fff',
+            fontFamily: 'Microsoft YaHei',
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'none',
+            },
+            backgroundColor: 'rgba(0,0,0,0.65)',
+            borderColor: 'rgba(0,0,0,0.65)',
+            padding: [4, 8],
+
+            formatter: function (params) {
+              let res = '';
+              for (let i = 0; i < params.length; i++) {
+                let { name, data, seriesName } = params[i];
+                let color = colorDatas[i];
+                var resDiv = lineToolTips(name, color, data, seriesName, i);
+                res += resDiv;
+              }
+
+              return res;
+            },
+          },
+          grid: {
+            // top:'24',
+            left: '24',
+            right: '24',
+            bottom: '24',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'category',
+            data: this.xAxis,
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              // 文字斜着
+              rotate: this.axisLabelRotate,
+            },
+            axisTick: {
+              //x轴刻度线去掉
+              show: false,
+            },
+          },
+          yAxis: yAxisDatas,
+          series: changeData.series,
+        };
+        return option;
+      },
+    },
+  });
+</script>

lib/component/echarts/components/chart/bar/MultipleBar.vue

@@ -0,0 +1,223 @@
+<!-- @format -->
+
+<script>
+  import { defineComponent } from 'vue';
+  import BaseBar from './BaseBar.vue';
+  import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
+
+  export default defineComponent({
+    name: 'MultipleBar',
+    extends: BaseBar,
+    props: {
+      xAxis: {
+        type: Array,
+        required: true,
+      },
+      series: {
+        type: Array,
+        required: true,
+      },
+      yAxisName: {
+        type: String,
+        required: true,
+      },
+      axisLabelRotate: {
+        type: Number,
+        default: 0,
+      },
+      colorDatas: {
+        type: Array,
+        default: () => {
+          return ['#10DDDD', '#E0CFA3', '#50F3A8', '#88B8FF'];
+        },
+      },
+    },
+    data() {
+      return {
+        colorRgb: [],
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      for (let i = 0; i < this.colorDatas.length; i++) {
+        this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
+      }
+      let optionData = this.optionHandle();
+
+      this.setOption(optionData);
+      this.renderChart();
+    },
+    methods: {
+      getChangeData() {
+        var seriesDatas = [];
+        var legendDatas = [];
+
+        for (let i = 0; i < this.series.length; i++) {
+          legendDatas.push({
+            name: this.series[i].name,
+            icon: 'rect',
+            itemStyle: {
+              color: this.colorDatas[i],
+            },
+          });
+          seriesDatas.push({
+            name: this.series[i].name,
+            barMaxWidth: 15,
+            data: this.series[i].data,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b},0.8)`, // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(${this.colorRgb[i].r},${this.colorRgb[i].g},${this.colorRgb[i].b}, 0)`, // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            // emphasis:{
+            //   color:"#ff00ff"
+            // },
+            type: 'bar',
+          });
+        }
+
+        return { series: seriesDatas, legendData: legendDatas };
+      },
+      optionHandle() {
+        let colorDatas = this.colorDatas;
+        let changeData = this.getChangeData();
+        let offVal = this.yAxisName.length * 10 + 20;
+        let offArr = [0, 0, 0, -offVal];
+        let option = {
+          animationDuration: 300,
+          animationEasing: 'linear',
+          textStyle: {
+            color: '#fff',
+            fontFamily: 'Microsoft YaHei',
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0,0,0,0.65)',
+            borderColor: 'rgba(0,0,0,0.65)',
+            padding: [4, 8],
+            axisPointer: {
+              type: 'shadow',
+              shadowStyle: {
+                color: '#ffffff',
+                opacity: 0.08,
+                width: 'auto',
+              },
+            },
+            formatter: function (params) {
+              let res = '';
+              for (let i = 0; i < params.length; i++) {
+                let { name, data, seriesName } = params[i];
+                let color = colorDatas[i];
+                var resDiv = lineToolTips(name, color, data, seriesName, i);
+                res += resDiv;
+              }
+
+              return res;
+            },
+          },
+          legend: {
+            x: 'center', //可设定图例在左、右、居中
+            y: 'top', //可设定图例在上、下、居中
+            // padding:[25,10,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+            show: true,
+            textStyle: {
+              color: '#FFFFFF',
+              opacity: 0.85,
+            },
+            itemHeight: 8,
+            itemWidth: 8,
+            itemGap: 28,
+            data: changeData.legendData,
+            // right: '24',
+            // bottom: '24',
+            top: '24',
+          },
+          grid: {
+            // top:'24',
+            left: '24',
+            right: '24',
+            bottom: '24',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'category',
+            data: this.xAxis,
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              // 文字斜着
+              rotate: this.axisLabelRotate,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#FFFFFF',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            axisTick: {
+              //x轴刻度线去掉
+              show: false,
+            },
+          },
+          yAxis: {
+            show: true,
+            name: this.yAxisName,
+            nameTextStyle: {
+              padding: offArr,
+              opacity: 0.34,
+              fontSize: 11,
+            },
+            nameLocation: 'end',
+            type: 'value',
+            axisLine: {
+              show: true,
+              onZero: false,
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            splitLine: {
+              show: false,
+              onZero: false,
+            },
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              formatter: function (v) {
+                return tranNumber(v);
+              },
+            },
+            axisTick: {
+              //y轴刻度线去掉
+              show: false,
+            },
+          },
+          series: changeData.series,
+        };
+
+        return option;
+      },
+    },
+  });
+</script>

lib/component/echarts/components/chart/bar/SingleBar.vue

@@ -0,0 +1,236 @@
+<!-- @format -->
+
+<script>
+  import { defineComponent } from 'vue';
+  import BaseBar from './BaseBar.vue';
+  import { tranNumber, colorTransferToRgb } from '../tool.js';
+  //   import * as  from 'echarts';
+
+  export default defineComponent({
+    name: 'MultipleBar',
+    extends: BaseBar,
+    props: {
+      xAxis: {
+        type: Array,
+        required: true,
+      },
+      series: {
+        type: Array,
+        required: true,
+      },
+      yAxisName: {
+        type: String,
+        required: true,
+      },
+      axisLabelRotate: {
+        type: Number,
+        default: 0,
+      },
+      colorDatas: {
+        type: Array,
+        default: () => {
+          return ['#40E0F0', '#047CB6'];
+        },
+      },
+      borderColor: {
+        type: String,
+        default: '#24B0D4',
+      },
+      shadowColor: {
+        type: String,
+        default: '#2DBFDD',
+      },
+    },
+    data() {
+      return {
+        colorRgb: [],
+        borderColorRGB: {},
+        shadowColorRGB: {},
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      for (let i = 0; i < 2; i++) {
+        this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
+      }
+      this.borderColorRGB = colorTransferToRgb(this.borderColor);
+      this.shadowColorRGB = colorTransferToRgb(this.shadowColor);
+
+      let optionData = this.optionHandle();
+
+      this.setOption(optionData);
+      this.renderChart();
+    },
+    methods: {
+      getChangeData() {
+        var seriesDatas = [];
+        var legendDatas = [];
+        for (let i = 0; i < this.series.length; i++) {
+          legendDatas.push({
+            name: this.series[i].name,
+            icon: 'rect',
+            itemStyle: {
+              color: this.colorDatas[i],
+            },
+          });
+          seriesDatas.push({
+            name: this.series[i].name,
+            barMaxWidth: '24',
+            data: this.series[i].data,
+            showBackground: true,
+            backgroundStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.3,
+                    color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.7,
+                    color: `rgba(180, 180, 180, 0.1)`, // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b}, 0.2)`, // 100% 处的颜色
+                  },
+                ],
+              },
+              borderColor: `rgba(${this.borderColorRGB.r},${this.borderColorRGB.g},${this.borderColorRGB.b},1)`, //'rgba(36, 176, 212, 1)',
+              borderWidth: 0.5,
+              borderType: 'solid',
+              shadowColor: `rgba(${this.shadowColorRGB.r},${this.shadowColorRGB.g},${this.shadowColorRGB.b},1)`, //'rgba(45, 191, 221, 0.7)',
+              shadowBlur: 3,
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontWeight: 400,
+            },
+            // textStyle: {
+
+            // },
+            itemStyle: {
+              shadowColor: '#30C6E1',
+              shadowBlur: 4,
+              borderWidth: 0.5,
+              borderColor: '#00F0FF',
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: `rgba(${this.colorRgb[0].r},${this.colorRgb[0].g},${this.colorRgb[0].b},0.5)`, //color: 'rgba(64, 224, 240, 0.7)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(${this.colorRgb[1].r},${this.colorRgb[1].g},${this.colorRgb[1].b},0.7)`, // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            type: 'bar',
+          });
+        }
+
+        return { series: seriesDatas, legendData: legendDatas };
+      },
+      optionHandle() {
+        let colorDatas = this.colorDatas;
+        let changeData = this.getChangeData();
+        let yAxisName = this.yAxisName;
+        var offVal = yAxisName.length * 10 + 20;
+        var offArr = [0, 0, 0, -offVal];
+        var option = {
+          animationDuration: 300,
+          animationEasing: 'linear',
+          textStyle: {
+            color: '#fff',
+            fontFamily: 'Microsoft YaHei',
+          },
+          grid: {
+            // top:'24',
+            left: '24',
+            right: '24',
+            bottom: '24',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'category',
+            data: this.xAxis,
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              rotate: this.axisLabelRotate,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#FFFFFF',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            axisTick: {
+              //x轴刻度线去掉
+              show: false,
+            },
+          },
+          yAxis: {
+            show: true,
+            name: this.yAxisName,
+            nameTextStyle: {
+              padding: offArr,
+              opacity: 0.34,
+              fontSize: 11,
+            },
+            nameLocation: 'end',
+            type: 'value',
+            axisLine: {
+              show: true,
+              onZero: false,
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            splitLine: {
+              show: false,
+              onZero: false,
+            },
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              formatter: function (v) {
+                return tranNumber(v);
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: changeData.series,
+        };
+
+        return option;
+      },
+    },
+  });
+</script>

lib/component/echarts/components/chart/bar/StackedHorizontalBar.vue

@@ -0,0 +1,270 @@
+<!-- @format -->
+
+<script>
+  import { defineComponent } from 'vue';
+  import BaseBar from './BaseBar.vue';
+  import { tranNumber, lineToolTips, colorTransferToRgb } from '../tool.js';
+
+  export default defineComponent({
+    name: 'MultipleBar',
+    extends: BaseBar,
+    props: {
+      yAxis: {
+        type: Array,
+        required: true,
+      },
+      series: {
+        type: Array,
+        required: true,
+      },
+      axisLabelRotate: {
+        type: Number,
+        default: 0,
+      },
+      colorDatas: {
+        type: Array,
+        default: () => {
+          return [
+            '#085779',
+            '#16C5EC',
+            '#087D76',
+            '#14FFF1',
+            '#135572',
+            '#1593C9',
+            '#04613F',
+            '#11D683',
+          ];
+        },
+      },
+    },
+    data() {
+      return {
+        colorRgb: [],
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      for (let i = 0; i < this.colorDatas.length; i++) {
+        this.colorRgb.push(colorTransferToRgb(this.colorDatas[i]));
+      }
+      let optionData = this.optionHandle();
+
+      this.setOption(optionData);
+      this.renderChart();
+    },
+    methods: {
+      getChangeData() {
+        var seriesDatas = [];
+        var legendDatas = [];
+
+        for (let i = 0; i < this.series.length; i++) {
+          legendDatas.push({
+            name: this.series[i].name,
+            icon: 'rect',
+          });
+          seriesDatas.push({
+            name: this.series[i].name,
+            type: 'bar',
+            barMaxWidth: '40%',
+            showBackground: false,
+            stack: 'total',
+            barMinWidth: 5,
+            label: {
+              show: true,
+              color: '#FFFFFF',
+              distance: 0,
+              formatter: function (params) {
+                if (params.value > 0) {
+                  return params.value;
+                } else {
+                  return '';
+                }
+              },
+              // position:'insideRight'
+            },
+            emphasis: {
+              focus: 'series',
+              showBackground: false,
+            },
+            data: this.series[i].data,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: `rgba(${this.colorRgb[i * 2].r},${this.colorRgb[i * 2].g},${
+                      this.colorRgb[i * 2].b
+                    },1)`, // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(${this.colorRgb[i * 2 + 1].r},${this.colorRgb[i * 2 + 1].g},${
+                      this.colorRgb[i * 2 + 1].b
+                    }, 1)`, // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            type: 'bar',
+          });
+        }
+
+        return { series: seriesDatas, legendData: legendDatas };
+      },
+      optionHandle() {
+        let colorDatas = this.colorDatas;
+        let changeData = this.getChangeData();
+        var option = {
+          animationDuration: 300,
+          animationEasing: 'linear',
+          textStyle: {
+            color: '#fff',
+            fontFamily: 'Microsoft YaHei',
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0,0,0,0.65)',
+            borderColor: 'rgba(0,0,0,0.65)',
+            padding: [4, 8],
+            axisPointer: {
+              type: 'shadow',
+              shadowStyle: {
+                color: '#ffffff',
+                opacity: 0.08,
+                width: 'auto',
+              },
+            },
+            formatter: function (params) {
+              let res = '';
+              for (let i = 0; i < params.length; i++) {
+                let { name, data, seriesName } = params[i];
+                let color = colorDatas[i * 2];
+                var resDiv = lineToolTips(name, color, data, seriesName, i);
+                res += resDiv;
+              }
+
+              return res;
+            },
+          },
+          legend: {
+            x: 'right', //可设定图例在左、右、居中
+            y: 'top', //可设定图例在上、下、居中
+            padding: [0, 24, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+            show: true,
+            textStyle: {
+              color: '#FFFFFF',
+              opacity: 0.85,
+            },
+            itemHeight: 8,
+            itemWidth: 8,
+            itemGap: 28,
+            data: changeData.legendData,
+            top: '24',
+          },
+          grid: {
+            left: '24',
+            right: '24',
+            bottom: '24',
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'value',
+              position: 'bottom',
+              axisLine: {
+                show: true,
+                onZero: false,
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  opacity: 0.2,
+                },
+              },
+              axisLabel: {
+                show: true,
+                opacity: 0.65,
+                fontSize: 11,
+              },
+              splitLine: {
+                show: true,
+                interval: 2,
+                lineStyle: {
+                  color: '#FFFFFF',
+                  width: 1,
+                  opacity: 0.2,
+                },
+              },
+              axisTick: {
+                //x轴刻度线去掉
+                show: false,
+              },
+            },
+            {
+              type: 'value',
+              position: 'top',
+              axisLine: {
+                show: true,
+                onZero: false,
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  opacity: 0.2,
+                },
+              },
+              splitLine: {
+                show: true,
+                interval: 2,
+                lineStyle: {
+                  color: '#FFFFFF',
+                  width: 1,
+                  opacity: 0.2,
+                },
+              },
+              axisTick: {
+                //x轴刻度线去掉
+                show: false,
+              },
+            },
+          ],
+
+          yAxis: {
+            type: 'category',
+            data: this.yAxis,
+            show: true,
+            axisLine: {
+              show: true,
+              onZero: false,
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            splitLine: {
+              show: false,
+              onZero: false,
+            },
+            axisLabel: {
+              show: true,
+              opacity: 0.65,
+              fontSize: 11,
+              rotate: this.axisLabelRotate,
+            },
+            axisTick: {
+              //y轴刻度线去掉
+              show: false,
+            },
+          },
+          series: changeData.series,
+        };
+        return option;
+      },
+    },
+  });
+</script>