记录一下，不便后续复用（复制粘贴） ^_^
效果图
代码如下
演示的话，间接复制粘贴即可
<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>