vue封装echarts组件

小鱼儿 2022-10-27 02:56 295阅读 0赞

话不多说，先上代码。  
组件：

<template>
        <div
          id="echartsItem"
          style="width: 100%; height: 400px"
          :legendData="legendData"
          :echartsData="echartsData"
        ></div>
    </template>
    <script>
    import echarts from "@/utils/echars";
    export default { 
      name: "echartsList",
      mixins: [mixin],
      components: { },
      props: { 
        legendData: { 
          type: Array,
          default: () => [],
        },
        echartsData: { 
          type: Object,
          default: null,
        }
      },
      data() { 
        return { 
          option: { 
            grid: { 
              left: "0",
              right: "10",
              top: "8%",
              bottom: "10%",
              containLabel: true,
            },
            tooltip: { 
              trigger: "axis",
              textStyle: { 
                color: "#79828b",
                fontSize: "12px",
              },
              axisPointer: { 
                color: "#0FA0F8",
              }
            },
            legend: { 
              bottom: "0",
              icon: "circle",
              itemHeight: 10,
              textStyle: { 
                padding: [0, 30, 0, 0],
              },
              data: this.legendData,
            },
            toolbox: { 
              show: true,
              feature: { 
                magicType: {  show: true, type: ["stack", "tiled"] },
                saveAsImage: {  show: true },
              },
            },
            xAxis: { 
              type: "category",
              axisLabel: { 
                color: "#A9A9A9",
              },
              axisLine: { 
                show: false,
              },
              axisTick: { 
                show: false,
              },
              data: [],
            },
            yAxis: { 
              name: "",
              type: "value",
              axisLine: { 
                show: false,
              },
    
              axisTick: { 
                show: false,
              },
              axisLabel: { 
                color: "#A9A9A9",
              },
              splitLine: { 
                show: false,
              },
              axisPointer: { 
                snap: true,
              },
            },
            series: [
              { 
                type: "bar",
                itemStyle: { 
                  normal: { 
                    color: "rgba(246, 248, 250,1)",
                    width: "33px",
                  },
                },
                emphasis: { 
                  itemStyle: { 
                    color: "rgba(246, 248, 250,1)",
                  },
                },
                zlevel: 0,
                data: [],
                barGap: "-100%",
                barCategoryGap: "20%",
                animation: false,
              },
              { 
                name: this.legendData[1],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: { 
                  borderColor: "#E7B962",
                  color: "#E7B962",
                },
                lineStyle: { 
                  color: "#E7B962",
                },
                areaStyle: { },
                data: [],
              },
              { 
                name: this.legendData[2],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: { 
                  borderColor: "#49A4FF",
                  color: "#49A4FF",
                },
                lineStyle: { 
                  color: "#49A4FF",
                },
                areaStyle: { },
                data: [],
              },
              { 
                name: this.legendData[0],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: { 
                  borderColor: "#8ED83E",
                  color: "#8ED83E",
                },
                lineStyle: { 
                  color: "#8ED83E",
                },
                areaStyle: { },
                data: [],
              },
            ],
          },
        };
      },
      watch: { 
        echartsData: { 
          handler(val) { 
            this.getChart();
          },
          deep: true,
        },
      },
      mounted() { 
        this.getChart();
        this.initEchart();
      },
      computed: { },
     
      methods: { 
        // echarts数据
        initEchart() { 
          this.myChart = echarts.init(document.getElementById("echartsItem"));
          this.setOption();
        },
        setOption() { 
          this.option.yAxis.name = this.echartsData.yAxis.name;
          this.option.series[0].data = this.echartsData.series[0].data;
          this.option.series[1].data = this.echartsData.series[1].data;
          this.option.series[2].data = this.echartsData.series[2].data;
          this.option.series[3].data = this.echartsData.series[3].data;
          this.option.xAxis.data = this.echartsData.xAxis.data;
          this.myChart.setOption(this.option, true);
          this.myChart.resize();
        },
        getChart() { 
          this.$nextTick(() => { 
            this.initEchart();
          });
        },
      },
      beforeDestroy () { 
        if (this.myChart) { 
          this.myChart.clear()
        }
      },
    
    };
    </script>

调用组件

<template>
    	<echartsList :legendData="legendData" :echartsData="echartsData"></echartsList>
    </template>
    <script>
    	data() { 
    	    return { 
    	    //你要传的echarts数据，调用接口后赋值
    			legendData: ["活动***", "活动***", "活动***"],
    			echartsData: { 
    			  xAxis: { 
    			    data: [],
    			  },
    			  yAxis: { 
    			    name:"人数"
    			  },
    			  series: [
    			    { data: []},
    			    { data: []},
    			    { data: []},
    			    { data: []},
    			  ]
    			}
    		}
    	},
    	mounted() { this.getData()},
    	methods: { 
    		getData(){ 	//获取数据接口
    			this.echartsData.yAxis.max = this.option.series[0].data[0];
    		}
    	}
    </script>

不封装的话每次用到都要重新配置，太麻烦，不如封装成组件提高复用性。这里的代码是简化后的，效果什么的根据需求加就好了，若有错误请指出。