Table of contents
Know the line chart
A line chart is a commonly used data visualization chart, which is usually used to show data trends that change over time or other continuous variables. A line chart consists of several lines connecting data points, and each line represents a data series. The horizontal axis of the line chart usually represents time or other continuous variables, and the vertical axis represents the value of the data, showing the trend and change of the data through the change of the line.
Line charts can be used to display various types of data, such as stock prices, temperature changes, sales changes, etc. Line charts are simple, intuitive, easy to understand, and can effectively display data trends. They are widely used in data analysis, business decision-making, scientific research and other fields.
Line chart creation
The old rule, to use the line chart, we need to introduce Echarts first
<template>
<div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {
ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
const myChart = echarts.init(chart.value)
const option = {
//配置项
}
myChart.setOption(option)
})
In the above code, we first introduced the Echarts library through importthe statement , and then mountedcreated an Echarts instance in the hook function, and mounted it to the specified DOM element. At the same time, an option object is defined to store Echarts-related configuration items; later, we can use setOptionthe method to configure the Echarts instance, including setting the chart type, data, style, etc.
Configure the simplest line chart: configure the following code in the option object created above
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
}
In the above code, we have created a line chart with seven data points, where the x-axis represents the day of the week and the y-axis represents the value of the data. In the option object summary, we set the type of the x-axis to categorycategorical type, and the data is a text array of the day of the week; the type of the y-axis to value, that is, the numeric type; the data of the line chart is set through seriesthe attribute .
Then pass the option object as a parameter to the myChart instance through setOptionthe method , so that a simple line chart is completed, refresh the browser to see the effect
Line chart beautification
Modify the style of the polyline
We set the style of the polyline by modifying lineStylethe properties , including color, width, style, etc. code show as below:
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
}
}]
After the modification is complete, refresh the browser to see the effect
Modify the style of the axis
Use axisLabelthe and axisLineattributes to set the axis label and line style.
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
color: '#080b30', // 坐标轴标签颜色
fontSize: 12, // 坐标轴标签字号
},
axisLine: {
lineStyle: {
color: '#333' // 坐标轴线颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#080b30',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#333'
}
}
},
Modified effect
Modify the style of the points on the line chart
By modifying the value of symbolthe attribute symbolSize, the shape and size of the point can be changed. Modify the point color and border style through itemStyleattributes .
symbolThe attribute is used to specify the graphic type of the point, such as circle, square, triangle, etc., and symbolSizethe attribute is used to specify the size of the point
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
}
}]
Set polyline to smooth curve
Control the smoothness of the curve by modifying the value of smooththe attribute .
Set the gradient color area
Set the area under the line chart by configuring areaStyle. Set areaStyle in series, and specify its opacity, color, shadowBlur and other attributes to control the display effect of the area.
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}]
Add a marker line to a line chart
seriesSet in markLine, and specify its data, symbol, symbolSize, labeland other attributes to control the display effect of the marker line.
symbolThe provided tag types are: circle, rect, roundRect, triangle, diamond, pin, arrow,none
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
}]
}
Add marker points to the line chart
seriesSet in markPoint, and specify its data, symbol, symbolSize, labeland other attributes to control the display effect of marker points.
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}],
symbol: 'circle',
symbolSize: 20,
label: {
show: true,
position: 'top',
formatter: '{b}: {c}'
}
}
}]
}
In the above code, the attributemarkPoint in sets the data of the marker, the attribute sets the shape of the marker, the attribute sets the size of the marker, and the attribute sets the text label of the marker. The displayed content of the marker text can be customized through the attribute , where represents the name of the data item and represents the value of the data item.datasymbolsymbolSizelabelformatter{b}{c}
Line Chart Interaction
Add mouseover tooltip
Add mouse hover tips to the line chart through tooltipproperties, so that users can view the data more conveniently.
tooltip: {
trigger: 'axis' // 触发方式为鼠标悬停
}
We can also modify the lineStyle of the axisPointer object under the tooltip configuration item to set the style of the prompt line
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 0, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
Added data range selection and zooming
Data area selection:
Add a scroll bar to the line chart dataZoomby adding a configuration item and setting the type toslider
dataZoom: {
type: 'slider', // 选择器类型为滑动条
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
The above code uses dataZoomthe attribute to set the type of data area selection as a slider, and the start and end positions of the default selection range.
Data scaling:
Data scaling and data area selection are both added dataZoomconfiguration items, but the type inside is different. If it is set to data scaling, set the type content to inside, so that there will be no scroll bars under the chart. When the mouse hovers over the chart When on, scroll the scroll wheel to zoom in and out of the chart
dataZoom: {
type: 'inside', // 缩放类型为内置
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
Well, the relevant introduction about the line chart is here first. Interested partners can study it more deeply. There are still many interesting functions waiting for you to develop.