Echarts散点图小案例（方便以后复用）

记录一下，方便后续复用（复制粘贴） ^_^

效果图

代码如下

演示的话，直接复制粘贴即可

<template>
  <div class="sandianWrap">
    <div id="echart"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 定义变量用来存放echarts实例
      sandianData: {
        // 散点图数据
        one: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [19, 12.3],
          [9.6, 7.7],
          [11.8, 19.65],
        ],
        two: [
          [12, 12],
          [9, 16],
          [20, 18],
          [11, 13],
          [25, 21],
          [3.9, 17],
        ],
        three: [
          [10, 12],
          [9, 12],
          [2, 11],
          [13, 22],
          [23, 33],
          [2, 11],
        ],
        four: [
          [8, 9],
          [7, 13],
          [5, 12],
          [55, 32],
          [5.9, 14],
          [13, 45],
        ],
        five: [
          [18, 19],
          [17, 23],
          [15, 21],
          [38, 99],
          [15, 63],
          [17, 24],
        ],
      },
    };
  },
  mounted() {
    this.drawEcharts();
  },
  methods: {
    // 画图方法
    drawEcharts() {
      this.myChart = Echarts.init(document.getElementById("echart"));
      this.myChart.setOption({
        xAxis: {
          type: "value",
          name: "参数/单位", // x轴的名字，可以理解成单位
          nameTextStyle: {
            // x轴的名字的样式相关
            color: "#BFBFBF",
            nameLocation: "start",
          },
          splitLine: {
            //去除网格线
            show: false,
          },
          splitArea: { show: false }, //去除网格区域，否则会有一片区域
          axisLabel: {
            // 设置x轴的文字的样式
            textStyle: {
              show: true,
              color: "#BDBDBD",
              fontSize: "12",
            },
          },
          axisLine: {
            show: true, // 把x轴从实线变成虚线
            lineStyle: {
              // 设置x轴线条样式的颜色
              color: "#BDBDBD",
              width: 1,
              type: "solid",
            },
          },
          scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了
        },
        yAxis: {
          type: "value",
          // name: "y轴的单位（人数）",
          nameTextStyle: {
            color: "#BFBFBF",
            nameLocation: "end",
          },
          axisTick: {
            show: false, // 去掉y轴的凸出刻度
          },
          axisLine: {
            show: false, // 把y轴从实线变成虚线
          },
          splitLine: {
            //去除网格线
            show: true,
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
          },
          splitArea: { show: false }, //去除网格区域
          axisLabel: {
            // 设置y轴的文字的样式
            textStyle: {
              show: true,
              color: "#BDBDBD",
              fontSize: "12",
            },
          },
          scale: true, // 设置数据自动缩放，要不然数据就堆一块了
          // show: false,
        },
        grid: {
          // 位置
          show: true,
          x: 36,
          y: 40,
          x2: 72,
          y2: 36,
          borderWidth: 0, // 去除图表的边框
        },
        tooltip: {
          formatter: function (obj) {
            let value = obj.value;
            return (
              '<div style="border-bottom: 1px solid #baf; font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              obj.seriesName +
              "</div>" +
              "<span style='display:inline-block;width:8px;height:8px;line-height:8px;border-radius:50%;background:#000;margin-right:6px;'></span>" +
              "男生数量" +
              "：" +
              Number(value[0]).toFixed(2) +
              "个" +
              "<br>" +
              "<span style='display:inline-block;width:8px;height:8px;line-height:8px;border-radius:50%;background:pink;margin-right:6px;'></span>" +
              "女生数量" +
              "：" +
              Number(value[1]).toFixed(2) +
              "位" +
              "<br>"
            );
          },
        },
        series: [
          {
            name: "一班",
            symbolSize: 10, // 散点图的大小
            data: this.sandianData.one,
            type: "scatter", // 类型为散点图
            itemStyle: {
              // 设置散点图的透明度
              opacity: 0.85,
            },
          },
          {
            name: "二班",
            symbolSize: 10,
            data: this.sandianData.two,
            type: "scatter",
            itemStyle: {
              opacity: 0.85,
            },
          },
          {
            name: "三班",
            symbolSize: 10,
            data: this.sandianData.three,
            type: "scatter",
            itemStyle: {
              opacity: 0.85,
            },
          },
          {
            name: "四班",
            symbolSize: 10,
            data: this.sandianData.four,
            type: "scatter",
            itemStyle: {
              opacity: 0.85,
            },
          },
          {
            name: "五班",
            symbolSize: 10,
            data: this.sandianData.five,
            type: "scatter",
            itemStyle: {
              opacity: 0.85,
            },
          },
        ],
        title: {
          // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
          subtext: "y轴的单位（人数）",
          left: 0, // 距离左边位置
          top: -8, // 距离上面位置
          subtextStyle: {
            // 设置二级标题的样式
            color: "#BFBFBF",
          },
        },
        color: ["#4CD3D4", "#60BD65", "#46A7EA", "#E99E44", "#DC403F"], // 控制圆环图的颜色
        legend: {
          right: 10,
          itemGap: 20,
          itemWidth: 8,
          itemHeight: 8,
          data: ["一班", "二班", "三班", "四班", "五班"],
          textStyle: {
            fontSize: 12,
          },
        },
      });
      // 自适应
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.sandianWrap {
  width: 100%;
  height: 100%;
  #echart {
    width: 100%;
    height: 400px;
  }
}
</style>