vue echarts各图表类型组件封装

// 全局注册
import commonChart from "@/components/CommonChart/index.vue";
Vue.component("commonChart", commonChart);

// 使用
<common-chart :chartOption="chartOption"></common-chart>


    chartOption: {
        chartRef: 'nav-chart',
        chartType: 3,
        chartData: {
          dataX: [1, 2, 3, 4],
          dataY1: [1, 2, 3, 4],
          dataY2: [1, 2, 3, 4],
          dataY3: [1, 2, 3, 4],
          dataY4: [1, 2, 3, 4],
        },
        color: ['#50b5ff', '#ff7a8c', '#25ecf1', '#762cee'],
        barWidth: 20,
        axisLabel: true,
        axisLine: false,
        name: ['2023年', '2022年', '2023率', '2022率'],
        legend: true,
        unit: ['户', '%'],
      },

// commonChart.vue
<template>
  <div class='chart-box'>
    <div class="item-chart" :ref="chartOption.chartRef"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { numReal } from '@/utils/index';

export default {
  props: ['chartOption'],
  components: {},
  data() {
    return {
      myChart: null,
    }
  },
  watch: {
    chartOption: {
      handler() {
        this.getList();
      },
      deep: true,
    },
  },
  destroyed() {
  },
  mounted() {
    var chartDom = this.$refs[this.chartOption.chartRef];
    this.myChart = echarts.init(chartDom);
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
    this.getList();
  },
  computed: {
  },
  methods: {
    getList() { // 1: 柱状图+折线图
      if (this.chartOption.chartType === 1) {
        this.drawChart1(this.chartOption.chartData);
      } else if (this.chartOption.chartType === 2) { // 2 漏斗图
        this.drawChart2(this.chartOption.chartData);
      } else if (this.chartOption.chartType === 3) { // 3 2折线图 2柱状图
        this.drawChart3(this.chartOption.chartData);
      } else if (this.chartOption.chartType === 4) { // 4 环图
        this.drawChart4(this.chartOption.chartData);
      }
    },
    drawChart1(chartD) {
      let OC = this.chartOption;
      const { dataX, dataY1, dataY2 } = chartD;
      var option = {
        color: OC.color,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left'
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
          },

        },
        legend: {
          icon: 'circle',
          textStyle: {
            color: "#111111",
            fontSize: 12
          },
          itemWidth: 10,
          selectorItemGap: 12,
          itemHeight: 10,
          bottom: '0%',
          left: 'center',
          show: OC.legend
        },
        grid: {
          top: '12%',
          bottom: '18%',
          // left: '4%',
          // right: '4%'
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false },
            splitLine: { show: false, lineStyle: { color: '#233C6C' } },
            axisLine: { show: OC.axisLine, lineStyle: { color: '#aeaeae' } },
            axisLabel: {
              color: '#849EBD',
              fontSize: 12,
              // padding: [0, -20, -10, 0],
              // rotate: 10,
              // verticalAlign: "bottom",
              interval: 0, // 使x轴文字显示全
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: OC.nameTip && OC.nameTip[0],
            nameTextStyle: { // y轴上方单位的颜色
              color: '#849EBD'
            },
            min: 0,
            axisLine: { show: false, lineStyle: { color: '#025148', } },
            splitLine: { show: false, lineStyle: { color: '#233C6C', type: 'dotted' } },
            axisLabel: {
              show: OC.axisLabel,
              color: '#849EBD',
            }
          },
          {
            type: 'value',
            name: OC.nameTip && OC.nameTip[1],
            nameTextStyle: { // y轴上方单位的颜色
              color: '#849EBD'
            },
            axisLine: { show: false, lineStyle: { color: '#025148' } },
            splitLine: { show: false },
            axisLabel: {
              show: OC.axisLabel,
              color: '#849EBD',
            }
          }
        ],
        series: [
          {
            name: OC.name[0],
            type: 'bar',
            barWidth: OC.barWidth || 12,
            tooltip: {
              valueFormatter: function (value) {
                return numReal(value.toFixed(1)) + OC.unit[0];
              },
            },
            yAxisIndex: 0,
            data: dataY1,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                // color: new echarts.graphic.LinearGradient(
                //   0, 0, 0, 1,
                //   [
                //     { offset: 0, color: '#00F1F5' },
                //     { offset: 1, color: '#00A7F5' }
                //   ]
                // )
              }
            }
          },
          {
            name: OC.name[1],
            type: 'line',
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value.toFixed(1) + OC.unit[1];
              },
            },
            yAxisIndex: 1,
            data: dataY2,
            lineStyle: {
              width: 3,
              // color: '#B80FFF'
            },
          },
        ]
      };
      if (OC.chartType === 1 && OC.colorChange) {
        option.series[1].lineStyle.color = {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: OC.colorChange[0], // 0% 处的颜色
            },
            {
              offset: 1,
              color: OC.colorChange[1], // 100% 处的颜色
            },
          ]
        }
      }
      option && this.myChart.setOption(option);
      this.myChart.on("legendselectchanged", function (params) { });
    },
    drawChart2(chartD) {
      let OC = this.chartOption;
      var option = {
        color: OC.color,
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c}%'
          formatter: '{b} : {c}%'
        },
        legend: {
          show: false,
          data: []
        },
        series: [
          {
            name: '',
            type: 'funnel',
            left: 10,
            top: 30,
            bottom: 40,
            width: '60%',
            min: 0,
            max: 100,
            minSize: '30%',
            maxSize: '100%',
            sort: 'none',
            gap: 0,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}%',
              color: '#fff',
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0
            },
            data: chartD,
            z: 100
          }
        ]
      };
      option && this.myChart.setOption(option);
    },
    drawChart3(chartD) {
      let OC = this.chartOption;
      const { dataX, dataY1, dataY2, dataY3, dataY4 } = chartD;
      var option = {
        color: OC.color,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left'
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
          },

        },
        legend: {
          icon: 'circle',
          textStyle: {
            color: "#111111",
            fontSize: 12
          },
          itemWidth: 10,
          selectorItemGap: 12,
          itemHeight: 10,
          bottom: '0%',
          left: 'center',
          show: OC.legend
        },
        grid: {
          top: '12%',
          bottom: '18%',
          // left: '4%',
          // right: '4%'
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false },
            splitLine: { show: false, lineStyle: { color: '#233C6C' } },
            axisLine: { show: OC.axisLine, lineStyle: { color: '#233C6C' } },
            axisLabel: {
              color: '#849EBD',
              fontSize: 12,
              // padding: [0, -20, -10, 0],
              // rotate: 10,
              // verticalAlign: "bottom",
              interval: 0, // 使x轴文字显示全
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: { // y轴上方单位的颜色
              color: '#849EBD'
            },
            min: 0,
            axisLine: { show: false, lineStyle: { color: '#025148', } },
            splitLine: { show: false, lineStyle: { color: '#233C6C', type: 'dotted' } },
            axisLabel: {
              show: OC.axisLabel,
              color: '#849EBD'
            }
          },
          {
            type: 'value',
            name: '',
            nameTextStyle: { // y轴上方单位的颜色
              color: '#849EBD'
            },
            axisLine: { show: false, lineStyle: { color: '#025148' } },
            splitLine: { show: false },
            axisLabel: {
              show: OC.axisLabel,
              color: '#849EBD'
            }
          }
        ],
        series: [
          {
            name: OC.name[0],
            type: 'bar',
            barWidth: OC.barWidth || 12,
            tooltip: {
              valueFormatter: function (value) {
                return numReal(value.toFixed(1)) + OC.unit[0];
              },
            },
            yAxisIndex: 0,
            data: dataY1,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              }
            }
          },
          {
            name: OC.name[1],
            type: 'bar',
            barWidth: OC.barWidth || 12,
            tooltip: {
              valueFormatter: function (value) {
                return numReal(value.toFixed(1)) + OC.unit[0];
              },
            },
            yAxisIndex: 0,
            data: dataY2,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              }
            }
          },
          {
            name: OC.name[2],
            type: 'line',
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value.toFixed(1) + OC.unit[1];
              },
            },
            yAxisIndex: 1,
            data: dataY3,
            lineStyle: {
              width: 3,
              // color: '#B80FFF'
            },
          },
          {
            name: OC.name[3],
            type: 'line',
            smooth: true,
            tooltip: {
              valueFormatter: function (value) {
                return value.toFixed(1) + OC.unit[1];
              },
            },
            yAxisIndex: 1,
            data: dataY4,
            lineStyle: {
              width: 3,
              // color: '#B80FFF'
            },
          },
        ]
      };
      option && this.myChart.setOption(option);
      this.myChart.on("legendselectchanged", function (params) { });
    },
    drawChart4(chartD) {
      let OC = this.chartOption;
      var option = {
        color: OC.color,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['42%', '60%'],
            avoidLabelOverlap: false,
            startAngle: 270, // 起始角度
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 51, name: '线上流失率',
                itemStyle: {
                  borderRadius: 2,
                  borderColor: '#fff',
                  borderWidth: 2,
                  // 设置渐变色
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0, color: '#a23df4' // 0% 处的颜色
                      },
                      {
                        offset: 1, color: '#8267fc' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
              },
              {
                value: 49, name: '线下流失率',
                itemStyle: {
                  borderRadius: 2,
                  borderColor: '#fff',
                  borderWidth: 2,
                  // 设置渐变色
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0, color: '#ddc7f9' // 0% 处的颜色
                      },
                      {
                        offset: 1, color: '#ddc7f9' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
              },
            ]
          }
        ]
      };
      option && this.myChart.setOption(option);
    }
  },
}
</script>
<style lang='scss' scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
  .item-chart {
    width: 100%;
    height: 100%;
  }
}
</style>