push

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>