共计 3168 个字符,预计需要花费 8 分钟才能阅读完成。
记录一下,不便后续复用(复制粘贴)^_^
效果图
代码如下
演示的话,间接复制粘贴即可
<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>
正文完