vue封装echarts组件-蒲公英云

vue封装echarts组件

小鱼儿 2022-10-27 02:56 337阅读 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>