const dataNetworkStrength = [
[44056, 3, 23968973, "Australia"],
[43294, 4, 35939927, "Canada"],
[13334, 20, 1376048943, "China"],
[21291, 8, 11389562, "Cuba"],
[38923, 5, 5503457, "Finland"],
[37599, 7, 64395345, "France"],
[44053, 6, 80688545, "Germany"],
[42182, 2, 329425, "Iceland"],
[5903, 25, 1311050527, "India"],
[36162, 10, 126573481, "Japan"],
[1390, 50, 25155317, "North Korea"],
[34644, 9, 50293439, "South Korea"],
[34186, 4, 4528526, "New Zealand"],
[64304, 5, 5210967, "Norway"],
[24787, 15, 38611794, "Poland"],
[23038, 18, 143456918, "Russia"],
[19360, 12, 78665830, "Turkey"],
[38225, 6, 64715810, "United Kingdom"],
[53354, 4, 321773631, "United States"],
];
const dataOfflineTimes = [
[44056, 2, 23968973, "Australia"],
[43294, 1, 35939927, "Canada"],
[13334, 4, 1376048943, "China"],
[21291, 3, 11389562, "Cuba"],
[38923, 0.5, 5503457, "Finland"],
[37599, 1, 64395345, "France"],
[44053, 2, 80688545, "Germany"],
[42182, 1, 329425, "Iceland"],
[5903, 5, 1311050527, "India"],
[36162, 3, 126573481, "Japan"],
[1390, 6, 25155317, "North Korea"],
[34644, 2, 50293439, "South Korea"],
[34186, 0.8, 4528526, "New Zealand"],
[64304, 1, 5210967, "Norway"],
[24787, 2.5, 38611794, "Poland"],
[23038, 3.2, 143456918, "Russia"],
[19360, 2.1, 78665830, "Turkey"],
[38225, 1.5, 64715810, "United Kingdom"],
[53354, 1, 321773631, "United States"],
];
const colorList = ['#378eff', '#F5DE8D', '#ffb300', '#ff4646'];
const legendList=["当日设备网络强度", "当日设备离线次数"]
// 配置项
const option = {
title: {
text: "",
},
backgroundColor:"#fff",
tooltip: {
formatter: function (params) {
return (
params.data[3] +
"<br/>" +
"GDP per Capita: " +
params.data[0] +
"<br/>" +
"Value: " +
params.data[1] +
"<br/>" +
"Population: " +
params.data[2]
);
},
},
legend: {
data: legendList,
},
xAxis: {
show: false,
},
yAxis: [
{
type: "value",
name: "设备网络强度分布情况",
nameLocation: 'center',
nameTextStyle:{
color:"#000",
},
nameRotate:-90,
nameGap: 40,
position: "left",
interval: 20,
max:40,
boundaryGap: false, // 将boundaryGap设置为false
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
formatter: function (value) {
console.log(value);
if (value <= 6 && value >= 0) return "0 | 6";
else if (value <= 20 && value > 6) return "7 | 20";
else {
return "20以上";
}
},
rotate: 90, // 文字竖向排列
color: '#000' // 设置 y 轴颜色为红色
},
axisLine: {
lineStyle: {
color: '#fff' // 设置 y 轴颜色为红色
}
}
},
{
type: "value",
name: "设备离线分布情况",
nameLocation: "middle",
nameGap: 40,
nameRotate:-90,
nameTextStyle:{
color:"#000",
},
position: "right",
min: 0,
max: 6,
interval: 3,
boundaryGap: false, // 将boundaryGap设置为false
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
color:"#000"
},
axisLabel: {
formatter: function (value) {
if (value <= 1 && value >= 0) return "0 | 1";
else if (value <= 4 && value > 1) return "2 | 4";
else {
return "4以上";
}
},
rotate: 90, // 文字竖向排列
color:"#000",
position: 'inside' // 将 axisLabel 放置在刻度之间
},
axisLine: {
lineStyle: {
color: '#fff' // 设置 y 轴颜色为红色
}
}
},
],
series: [
{
name: "当日设备网络强度",
type: "scatter",
data: dataNetworkStrength,
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 0,
shadowOffsetY: 0,
color: new echarts.graphic.RadialGradient(0.5, 0.2, 0.5, [
{
offset: 0,
color: '#fff',
},
{
offset: 1,
color: colorList[0],
},
]),
},
},
emphasis: {
focus: "series",
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: "top",
},
},
},
{
name: "当日设备离线次数",
type: "scatter",
data: dataOfflineTimes,
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 0,
shadowOffsetY: 0,
color: new echarts.graphic.RadialGradient(0.5, 0.2, 0.5, [
{
offset: 0,
color: '#fff',
},
{
offset: 1,
color: colorList[1],
},
]),
},
},
yAxisIndex: 1,
emphasis: {
focus: "series",
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: "top",
},
},
},
],
};