Summary of problems encountered by echarts:
1: How to combine the scatter chart and the line chart to set the coordinates of the x-axis to the coordinates of the line chart, and the data of the scatter chart also changes with the X-axis of the line chart (the data is dynamic data)
// 数据格式
const data = [
{
updatetime: '2:00',
maxPower: 12,
minPower: 2,
maxLoad: 34,
minLoad: 17,
sameMaxLoad: 4,
sameMinLoad: 1
},
{
updatetime: '4:00',
maxPower: 14,
minPower: 4,
maxLoad: 3,
minLoad: 7,
sameMaxLoad: 4,
sameMinLoad: 1
}
]
Convert the data format into data corresponding to scatter plots and line charts
What the scatter chart requires is an array combination of [2,18]. Note that the first parameter of each array in the scatter chart cannot be time. The event needs to be intercepted from the data before ":", and This data can be a string or a number
The line chart requires time and corresponding data. The structure is as follows [2:00,3]
The difference between a scatter chart and a line chart is that the first parameter of each array is different: one is time and the other is number.
Set the type of x-axis:type has the following types
1: 'value' value axis, suitable for continuous data.
2: 'category' category axis, suitable for discrete category data. When this type is used, the category data can be automatically taken from series.data or dataset.source, or the category data can be set through xAxis.data.
3: 'time' time axis, suitable for continuous time series data. Compared with the numerical axis, the time axis has time formatting and is also different in scale calculation. For example, the month, week, etc. will be determined based on the span range. Day or hour scale.
4: 'log' logarithmic axis. Works for logarithmic data.
//echarts里面具体的代码
xAxis: [
{
type: 'category',
name: '时间',
splitLine: {
show: false
},
axisLine: {
show: true, // 坐标轴轴线。
lineStyle: {
color: '#237dc1'
}
},
data: this.xAxis
},
// 写两个x轴，让第二个x轴隐藏，这个x轴是散点图的X轴，type设置成category，如果设置成value的，那散点图的位置和X轴时间对应的位置是不对应的
{
type: 'category',
max: this.xAxis[1000],
show: false
}
]
Next is the specific series of polylines and scatter points. The focus is to set the X-axis of the scatter chart to the second x-axis: xAxisIndex: 1
I bind each data in the scatter and line charts to the data in props, because this is a component and will eventually be embedded into the parent component. You can change it according to your own needs.
series: [
{
type: 'scatter',
name: '散点图',
symbolSize: 8, // 标记的大小
symbol: 'rect',
itemStyle: {
// 图形样式
color: '#f9e551'
},
data: this.maximumLoad,
xAxisIndex: 1
},
{
name: '折线图',
type: 'line',
showSymbol: false,
smooth: true,
stack: '次数',
data: this.lowerLimitLoad,
// data: [1320, 1132, 601, 234, 120, 90, 20],
itemStyle: {
color: '#75fb4c', // 折线的颜色
borderColor: '#FFE618', //拐点的边框颜色
borderWidth: 0
},
lineStyle: {
color: '#75fb4c', // 折线的颜色
type: 'dotted' // 折线的类型
}
}
]
2: How to modify the icon shape in the legend in the echarts chart. If there are multiple polylines or scatter plots, modify the corresponding icon. I changed it to a square, using the path of svg.
Legend can set width, position, text color and other parameters
When data is initialized, a parameter is added, which is an svg image.
Code
data() {
return {
rectSvg: 'path://M-0.000,-0.000 L10.000,-0.000 L10.000,10.000 L-0.000,10.000 L-0.000,-0.000 Z' //柱状图横轴
}
}
// 这个是option中的
legend: {
data: [
{ name: '最大负荷', icon: this.rectSvg },
{ name: '最小负荷', icon: this.rectSvg },
{ name: '最大关口功率' },
{ name: '最小关口功率' },
{ name: '去年同期同一天负荷的上限' },
{ name: '去年同期同一天负荷的下限' }
],
right: '22%',
width: '60%',
textStyle: {
color: '#fff'
}
},
3: How to modify the icon shape in the tooltip in the echarts chart. If there are multiple polylines or scatter plots, modify the corresponding icon. I set the maximum load and minimum load to a square. For other settings, formatter is used to set the circle. : Prompt box floating layer content formatter, supports two forms: string template and callback function.
I made a judgment here. If all tooltips use the same icon, there is no need to make a judgment. Just set the style for the div.
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
show: true
},
formatter: params => {
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
if (item.seriesName === '最小负荷' || item.seriesName === '最大负荷') {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data[1]}</span>
</div>
</div>`
} else {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:10px;background-color:${
item.color
};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${
item.seriesName === '去年同期同一天负荷的上限' ||
item.seriesName === '去年同期同一天负荷的下限'
? item.data
: item.data[1]
}</span>
</div>
</div>`
}
})
return dataStr
}
},
4: How to modify the inflection point of the line chart in the echarts chart so that the icon of the inflection point is not displayed
As shown in the picture, I removed the circle at the inflection point.
showSymbol: Whether to display the symbol, if false, it will only be displayed when the tooltip hovers.
The specific code is as follows:
{
name: '折线图',
type: 'line',
showSymbol: false,
smooth: true,
stack: '次数',
data: this.upperLimitLoad,
itemStyle: {
color: '#fbe651', // 每一个点
borderColor: '#FFE618', //拐点的边框颜色
},
lineStyle: {
color: '#fbe651', // 折线的颜色
type: 'dotted' // 折线的类型
}
},
5: echarts line chart legend removes circles
Simply set a polyline shape individually and set the opacity value of itemStyle to 0.
legend: {
data: [
{ name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
{ name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
],
right: '22%',
width: '60%',
textStyle: {
color: '#fff'
}
},
6: echarts icon setting legend line wrap
Implementation idea: Set legend as an array to perform line breaks. Note that you need to set a style for each item in the array.
The specific code is as follows:
legend: [
{
x: 'center',
data: [
{ name: '最大负荷', icon: this.rectSvg },
{ name: '最小负荷', icon: this.rectSvg },
{ name: '最大关口功率' },
{ name: '最小关口功率' }
],
left: 'center', //设置legend居中
width: '442',
itemGap: 31, //每一个item之间的间距
textStyle: {
color: '#fff',
padding: [5, 0, 2, 0],//设置图标和文字居中
rich: {
a: {
verticalAlign: 'middle' //设置图标和文字居中
}
}
}
},
{
x: 'center',
top: '7%',
data: [
{ name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
{ name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
],
left: 'center',
width: '442',
itemGap: 88, //每一个item之间的间距
textStyle: {
color: '#fff',
padding: [5, 0, 2, 0],
rich: {
a: {
verticalAlign: 'middle'
}
}
}
}
],
7: How to set breakpoints in echarts line chart
The two parts circled in the picture are unconnected breakpoints.
The specific implementation idea is to replace the circled points where the data returned by the background is 0 or undiffed or null with '-', so that these points with no data will form breakpoints. The specific code is as follows:
If you need to traverse and process the data returned by the backend yourself, make a judgment. If it is 0 or undefined or null, just replace it with '-', which can form a breakpoint.
8: How to fix the X-axis data in echarts chart: as shown in the figure
Just add max: and splitNumber to the X-axis configuration file
#####1: splitNumber: The number of divided segments of the coordinate axis. It should be noted that this number of divided segments is only an estimate. The final number of segments actually displayed will be based on the legibility of the divided axis scale display. Adjustment.
#####2: max: maximum value of coordinate axis scale. It can be set to the special value 'dataMax', in which case the maximum value of the data on the axis is taken as the maximum scale.
If not set, the maximum value will be automatically calculated to ensure uniform distribution of coordinate axis scales.
Not valid in category axis.
My specific settings code
xAxis: {
type: 'value',
name: '负载率%',
splitLine: {
show: false
},
axisLine: {
show: true, // 坐标轴轴线。
lineStyle: {
color: '#237dc1'
}
},
max: 100,
splitNumber: 11
},
Summarize:
This is the first time I made echarts charts, including line charts, bar charts, scatter charts, pie charts, and charts that combine line and scatter points, and charts that combine columns and line lines. During this period, I encountered many problems. I won’t know. Sometimes I just browse the documentation or Baidu. In fact, the main reason is that I have too little experience and am not familiar with the documentation, so I summarized the problems I encountered during the development process. If there are any mistakes, please point them out. Let’s work hard together and study hard.