push

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>