关于echarts: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>