Article directory
- echarts draws a scatter plot. Mark the x week and y week at the specified position.
-
- Example 1
- Example 2
- Example three
echarts draws a scatter plot, mark the x week and y week at the specified position
Example 1
let scatterData = {<!-- -->
data: [
[
[-0.2, -0.6],
[0.4, 0.3],
[0.1, 0.4],
[0.3, 0.5],
[0.09, 0.1],
[0.7, 0.3],
[0.9, 0.4],
[0.05, 0.8],
[0.6, 0.7],
[0.1, 0.3],
],
[
[-0.3, -0.1],
[0.7, 0.1],
[0.4, 0.4],
[0.5, 0.8],
[0.05, 0.6],
[0.1, 0.9],
[0.9, 0.2],
[0.08, 0.1],
[0.5, 0.6],
[0.1, 0.09],
],
[
[1,1]
]
],
title: ["normal", 'default'],
x: 0.6,
y: 0.4,
}
let colorList = [
"#b33ecb",
"#ffbe24",
"#4727f1",
"#fb3978",
"#f3954f",
"#1b3f89",
"#036ceb",
]
let series = [
{<!-- -->
type: "line",
markLine: {<!-- -->
silent: true,
symbol: "none",
lineStyle: {<!-- -->
normal: {<!-- -->
type: "solid",
color: "#785a2d",
},
},
label: {<!-- -->
show: true,
position: "start",
color: "#fff",
backgroundColor: "#ff751a",
padding: [2, 4],
},
data: [
{<!-- -->
yAxis: scatterData.y, //Start position of y-axis
},
{<!-- -->
xAxis: scatterData.x, //Start position of x-axis
},
],
},
},
];
scatterData.data.forEach((v, i) => {<!-- -->
series.push({<!-- -->
name: scatterData.title[i],
type: "scatter",
data: v,
});
});
option = {<!-- -->
backgroundColor: '#000',
color: colorList,
grid: {<!-- -->
top: "12%",
left: "8%",
right: "12%",
bottom: "15%",
},
tooltip: {<!-- -->
trigger: "axis",
axisPointer: {<!-- -->
type: "cross",
},
formatter: (params) => {<!-- -->
return `<div>
<span style="color:#fff;display: inline-block;width: 86px;">Proportion of material costs:</span>
<span style="color:#fff">${<!-- -->params[0].data[0]}</span>
<br/>
<span style="color:#fff;display: inline-block;width: 86px;">Service fee ratio:</span>
<span style="color:#fff">${<!-- -->params[0].data[1]}</span>
</div>`;
},
},
legend: {<!-- -->
top: '8%',
itemWidth: 8,
data: scatterData.title,
orient: "horizontal",
x: "center", //The legend can be set to the left, right, or center
y: "top", //The legend can be set to top, bottom, or center
padding: [0, 0, 25, 0],
textStyle: {<!-- -->
color: "#fff",
},
},
xAxis: {<!-- -->
name: 'Proportion of material costs',
axisLabel: {<!-- -->
show: true,
textStyle: {<!-- -->
color: "#fff",
},
},
axisLine: {<!-- -->
show: true,
lineStyle: {<!-- -->
type: 'solid',
color: '#2D4377',
Opacity: 1
}
},
splitLine: {<!-- -->
show: false,
},
},
yAxis: {<!-- -->
name: 'Service fee ratio',
axisLabel: {<!-- -->
show: true,
textStyle: {<!-- -->
color: "#fff",
},
},
axisLine: {<!-- -->
show: true,
lineStyle: {<!-- -->
type: 'solid',
color: '#2D4377',
Opacity: 1
}
},
splitLine: {<!-- -->
show: false,
},
},
series: series,
};
Example 2
option = {<!-- -->
backgroundColor:'#fff',
grid: {<!-- -->
top:'25%',
left: '7%',
right: '15%',
bottom: '7%',
containLabel: true
},
tooltip: {<!-- -->
trigger: 'axis',
textStyle: {<!-- -->
color: '#FFF',
fontSize:12,
// fontFamily: "PingFangSc-Regular, sans-serif",
background: 'rgba(255,255,255,0.1)',
lineHeight:20
},
axisPointer: {<!-- -->
type: 'shadow',
background: 'rgba(255,255,255,0.1)',
},
position: 'inside',
},
legend: {<!-- -->
top: 0,
left:'center',
itemWidth: 6, //Rectangle width
itemHeight: 6, //Rectangle width
data:[
{<!-- -->name: 'First customer order rate target',icon: 'line'},
{<!-- -->name: 'Customer flow target achieved'},
{<!-- -->name: 'Customer flow target not reached'}
],
},
xAxis: {<!-- -->
axisLine: {<!-- --> // Change the x-axis color
show:true,
lineStyle: {<!-- -->
color: '#F0EFEF',
type:'solid'
}
},
axisTick: {<!-- -->
show: false
},
axisLabel: {<!-- --> // Change the x-axis font color and size
textStyle: {<!-- -->
color: "#A3A9AF",
fontSize: 12
},
},
splitLine: {<!-- -->
show:false
},
},
yAxis: {<!-- -->
// name:'%',
type:'dashed',
nameTextStyle: {<!-- -->
color: '#A3A9AF',
padding: [0, 25, 0, 0]
},
axisLine: {<!-- --> // Change the y-axis color
lineStyle: {<!-- -->
color: '#F0EFEF'
}
},
axisTick: {<!-- -->
show: false
},
axisLabel: {<!-- --> // Change the y-axis font color and size
//formatter: '{value} m3 ', // Add units to the y-axis
textStyle: {<!-- -->
color: "#A3A9AF",
fontSize: 12
},
},
splitLine: {<!-- -->
show:true,
lineStyle: {<!-- -->
color: "#E9E9E9",
type:'dashed'
}
},
},
series: [
{<!-- -->
name: 'Customer flow target achieved',
type: 'scatter',
itemStyle: {<!-- -->
color: "#77C620",
},
symbolSize: 6,
data: [[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
},
{<!-- -->
name: 'Customer flow target not achieved',
type: 'scatter',
itemStyle: {<!-- -->
color: "#F03024",
},
symbolSize: 6,
data: [
[9.0, 5.04],
[11.0, 7.95],
[12.0, 8.58],
[5.0, 11.81],
[7.0, 12.33],
[11.0, 7.96],
[7.0, 9.24],
[6.0, 8.26],
[10.0, 11.84],
[7.0, 3.82],
[6.0, 4.68]
]
},
{<!-- -->
name: '',
type: 'line',
markLine: {<!-- -->
symbol: 'none',
silent: true,
lineStyle: {<!-- -->
type: 'solid',
width: 1,
color: '#F03024',
},
label: {<!-- -->
// show: false
color:'#A3A9AF',
distance: [-25,8,0,0],
padding:[-15,2,2,3],
formatter: function(params) {<!-- -->
return params.name;
}
},
data:[{<!-- -->name:'Daily cumulative customer flow',yAxis:5},{<!-- -->name:'Daily cumulative order volume',xAxis: 5}]
}
}
]
}
Example 3
var data = [
[
[28604, 77, 252847810, 'Agriculture, forestry, animal husbandry, fishery', '1']
],
[
[31163, 77.4, 252847810, 'Mining Industry', '2'],
[1516, 68, 252847810, 'Manufacturing', '2'],
[13670, 74.7, 252847810, 'Electricity, heat, gas and water production and supply industry', '2'],
[28599, 75, 252847810, 'Construction Industry', '2']
],
[
[29476, 77.1, 252847810, 'Wholesale and retail trade', '3'],
[31476, 75.4, 252847810, 'Transportation, warehousing and postal industry', '3'],
[28666, 78.1, 252847810, 'Accommodation and catering industry', '3'],
[1777, 57.7, 252847810, 'Information transmission, software and information technology services industry', '3'],
[29550, 79.1, 252847810, 'Financial Industry', '3'],
[2076, 67.9, 252847810, 'Real Estate Industry', '3'],
[12087, 72, 252847810, 'Leasing and business services', '3'],
[24021, 75.4, 252847810, 'Scientific research and technical services', '3'],
[43296, 76.8, 252847810, 'Water conservancy, environment and public facilities management industry', '3'],
[10088, 70.8, 252847810, 'Resident services, repairs and other services', '3'],
[19349, 69.6, 252847810, 'Education', '3'],
[10670, 67.3, 252847810, 'Health and Social Work', '3'],
[26424, 75.7, 252847810, 'Culture, Sports and Entertainment Industry', '3'],
[37062, 75.4, 252847810, 'Public administration, social security and social organizations', '3'],
[37062, 75.4, 252847810, 'International Organization', '3']
]
];
var dataxAxis = 25000;
var datayAxis = 67.1;
option = {<!-- -->
title: {<!-- -->
text: 'Industry average survival and activity'
},
dataZoom: [{<!-- -->
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
filterMode: 'filter'
}, {<!-- -->
id: 'dataZoomy',
type: 'slider',
xAxisIndex: [0],
filterMode: 'empty'
}],
xAxis: {<!-- -->
name: 'Industry activity',
splitLine: {<!-- -->
show: true,
interval: 'auto',
lineStyle: {<!-- -->
type: 'dashed'
}
}
},
yAxis: {<!-- -->
name: 'average life expectancy',
splitLine: {<!-- -->
show: true,
interval: 'auto',
lineStyle: {<!-- -->
type: 'dashed'
}
},
scale: true
},
series: [{<!-- -->
name: '1',
data: data[0],
type: 'scatter',
symbolSize: function(data) {<!-- -->
return Math.sqrt(data[2]) / 10e2;
},
label: {<!-- -->
emphasis: {<!-- -->
show: true,
formatter: function(param) {<!-- -->
return param.data[3];
},
position: 'top'
}
},
itemStyle: {<!-- -->
normal: {<!-- -->
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{<!-- -->
offset: 0,
color: 'rgb(129, 227, 238)'
}, {<!-- -->
offset: 1,
color: 'rgb(25, 183, 207)'
}]),
borderColor: 'rgba(25, 183, 207, 0.5)',
borderWidth: 7
}
},
markLine: {<!-- -->
lineStyle: {<!-- -->
normal: {<!-- -->
type: 'dotted'
}
},
data: [{<!-- -->
xAxis: dataxAxis
}, {<!-- -->
yAxis: datayAxis
}]
}
}, {<!-- -->
name: '2',
data: data[1],
type: 'scatter',
symbolSize: function(data) {<!-- -->
return Math.sqrt(data[2]) / 10e2;
},
label: {<!-- -->
emphasis: {<!-- -->
show: true,
formatter: function(param) {<!-- -->
return param.data[3];
},
position: 'top'
}
},
itemStyle: {<!-- -->
normal: {<!-- -->
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{<!-- -->
offset: 0,
color: 'rgb(251, 118, 123)'
}, {<!-- -->
offset: 1,
color: 'rgb(204, 46, 72)'
}]),
borderColor: 'rgba(204, 46, 72, 0.5)',
borderWidth: 6
}
},
markLine: {<!-- -->
lineStyle: {<!-- -->
normal: {<!-- -->
type: 'dotted',
color: 'bule'
}
},
data: [{<!-- -->
xAxis: dataxAxis
}, {<!-- -->
yAxis: datayAxis
}]
}
}, {<!-- -->
name: '3',
data: data[2],
type: 'scatter',
symbolSize: function(data) {<!-- -->
return Math.sqrt(data[2]) / 10e2;
},
label: {<!-- -->
emphasis: {<!-- -->
show: true,
formatter: function(param) {<!-- -->
return param.data[3];
},
position: 'top'
}
},
itemStyle: {<!-- -->
normal: {<!-- -->
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{<!-- -->
offset: 0,
color: 'rgba(255, 255, 0, 1)'
}, {<!-- -->
offset: 1,
color: 'rgba(255, 255, 0, 0)'
}]),
borderColor: 'rgba(255, 255, 0, 0.5)',
borderWidth: 7
}
},
markLine: {<!-- -->
lineStyle: {<!-- -->
normal: {<!-- -->
type: 'dotted',
color: 'bule'
}
},
data: [{<!-- -->
xAxis: dataxAxis
}, {<!-- -->
yAxis: datayAxis
}]
}
}]
};
