(echarts)散点气泡图的封装及使用

(echarts)散点气泡图的封装及使用

---

效果：

---

接口返回数据结构：

// 近半年项目
newChartData: {
    title:"2024年..",
    legendData: ["1接", "2库", "3天"],
    series: [
      {
        name: "1接", 
        data: [
        //  月份 值
            [1, 55],
            [2, 25],
            [3, 56],
            [4, 33],
            [5, 42],
            [6, 82],
            [7, 74],
            [8, 78],
            [9, 267],
            [10, 74],
            [11, 78],
            [12, 267],      
        ],
      },
      {
        name: "2库", 
        data: [
            [1, 55],
            ...     
        ],
      },{
        name: "3天", 
        data: [
            [1, 55],
            ...       
        ],
      },
    ],
},

使用页：

<scatter-chart
  :id="'pieChart12'"
  :height="'220px'"
  :showLegend="true"
  :scatterChartData="newChartData"
/>

<script>
import ScatterChart from "@/components/echarts/scatterChart.vue";
export default {
	components: { 
	  ScatterChart, 
	},
	data() {
    	return {
		  // 近半年项目
	      newChartData: {}
		}
	},
  	mounted() {
    	this.getChartData();
  	},
	methods: {
		getChartData() { 
	      staticsDataByType(2).then((res) => {
	        this.newChartData = res.data.newChartData;
	        //构建所需数据格式
	        const itemStyle = {
	          opacity: 0.8,
	          shadowBlur: 10,
	          shadowOffsetX: 0,
	          shadowOffsetY: 0,
	          shadowColor: "rgba(0,0,0,0.3)",
	        };
	        const label = {
	          show: true,
	          position: "inside", // 显示在气泡的中间
	          // formatter: "{@[1]}", // 格式化显示数值
	          color: "#000", // 文字颜色
	        };
	        this.newChartData.series.forEach((item) => {
	          this.$set(item, "type", "scatter");
	          this.$set(item, "symbolSize", 20);
	          this.$set(item, "itemStyle", itemStyle);
	          this.$set(item, "label", label);
	        });
	      }); 
	    },
	}

}
</script>

封装文件：

<!-- 散点图组件 -->
<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HomeView",
  components: {},
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
    xData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    scatterChartData: {
      type: Object,
      default: function () {
        return {
          title: "",
          legendData: [],
          series: [],
        };
      },
    },
    showLegend: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    scatterChartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart1() {
      this.chart = echarts.init(document.getElementById(this.id), "macarons");
      this.setOptions();
    },
    setOptions() {
      this.chart.setOption({
        color: [
          "#dd4444",
          "#fec42c",
          "#80F1BE",
          "#37A2DA",
          "#e06343",
          "#37a354",
          "#b55dba",
          "#b5bd48",
          "#8378EA",
          "#96BFFF",
        ],
        title: {
          text: this.scatterChartData.title,
          left: "center",
          top: "2%",
          textStyle: {
            fontSize: "14px",
            color: "#fff",
          },
        },
        legend: {
          left: "center",
          top: "10%",
          data: this.scatterChartData.legendData,
          type: "scroll",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: 10,
          top: "38%",
          bottom: "20%",
        },
        xAxis: {
          type: "category",
          // name: "日期",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#ffffff",
            formatter: "{value}月",
          },
        },
        yAxis: {
          type: "value",
          name: "单位：个", 
          nameTextStyle: {
            fontSize: 14,
            color: "#ffffff",
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#ffffff",
          },
        }, 
        series: this.scatterChartData.series,
      });
    },
  },
};
</script>

<style lang="scss"></style>