Echart折线图
官方配置项手册 Documentation - Apache ECharts
下面代码包含：设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加Y轴目标值
updateChart(data) {
const sortedData = data.slice().sort((a, b) => new Date(a.deviceTime) - new Date(b.deviceTime))
const option = {
tooltip: {
formatter: function (params) {
var res = params[0].name + '<br/>' // 拼接X轴名称
params.forEach(function (item) {
if ('字段1' === item.seriesName) {
res += item.seriesName + ': ' + item.value + ' 单位<br/>'
} else if ('字段2' === item.seriesName) {
res += item.seriesName + ': ' + item.value + ' 单位<br/>'
} else if ('字段3' === item.seriesName) {
res += item.seriesName + ': ' + item.value + ' 单位<br/>'
} else if ('字段4' === item.seriesName) {
res += item.seriesName + ': ' + item.value + ' 单位<br/>'
} else if ('字段5' === item.seriesName) {
res += item.seriesName + ': ' + item.value + ' 单位<br/>'
} else res += item.seriesName + ': ' + item.value + '<br/>'
})
return res
// return params[0].value;
},
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(255, 255, 255, 0.37)',
},
},
},
// title: {
// text: '数据图表',
// left: 'center' // 可选，使标题在容器下方居中
// },
grid: {
// 设置grid组件距离容器边缘的距离
// top: '10%', // 距离容器顶部10%
// left: '10%', // 距离容器左侧10%
// right: '10%' // 距离容器右侧10%
// bottom: '10%', // 距离容器底部10%
bottom: '60px',
},
// 使用 graphic 组件在图表下方居中绘制标题
graphic: {
elements: [
{
type: 'text',
left: 'center', // 居中
top: 'bottom', // 放置在 grid 的底部
// 由于 top 设置为 'bottom'，我们需要通过 margin 调整其确切位置
// 这里假设底部有 50px 的空间用于标题，则 margin 向上偏移 25px（根据字体大小调整）
margin: [0, 'auto', 0, 30],
style: {
text: '数据折线图', // 标题文本
fill: '#333', // 文本颜色
fontSize: 16, // 字体大小
// fontWeight: 'bold', // 字体加粗
textAlign: 'center', // 文本对齐方式（这里其实已经是居中了，但加上以确保兼容性）
// 其他文本样式...
},
// left: '10%',
// right: '10%',
// top: 'middle',
// z: 100,
// silent: true,
// 可选：如果需要在标题下方添加一条线作为分隔
// 可以通过添加一个矩形元素来实现
// 注意：这里的 rect 元素需要单独作为一个 elements 数组项添加
},
],
// 注意：如果添加多个 graphic 元素，需要将它们作为数组项分别列出
},
legend: {
data: ['字段1', '字段2', '字段3', '字段4', '字段5'],
},
xAxis: {
type: 'category',
// data: this.chartData.data.map((_, index) => `Point ${index + 1}`) // 假设使用索引作为X轴数据
// data: data.map(item => item.deviceTime), // 使用时间作为X轴数据
data: sortedData.map((item) => item.deviceTime), // 使用排序后的时间作为X轴数据
axisLabel: {
fontSize: 13, // 设置横坐标轴标签的字体大小为10px
// color: '#333' // 可以同时设置字体颜色
},
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12, // 设置横坐标轴标签的字体大小为10px
// color: '#333' // 可以同时设置字体颜色
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
//时间轴区间
// dataZoom: [
// {
// type: 'inside',
// start: 0,
// end: 100
// },
// ],
series: [
{
name: '字段1',
type: 'line',
data: sortedData.map((item) => item.aa),
label: {
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签内容格式
},
},
{
name: '字段2',
type: 'line',
data: sortedData.map((item) => item.bb),
label: {
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签内容格式
},
},
{
name: '字段3',
type: 'line',
data: sortedData.map((item) => item.cc),
label: {
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签内容格式
},
},
{
name: '字段4',
type: 'line',
data: sortedData.map((item) => item.dd),
label: {
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签内容格式
},
},
{
name: '字段5',
type: 'line',
data: sortedData.map((item) => item.ee),
lineStyle: {
// 设置线条的style等
normal: {
color: 'rgb(9, 61, 186)', // 折线线条颜色
},
},
itemStyle: {
color: 'rgb(9, 61, 186)', // 图例圆形的颜色
},
markLine: {
data: [
// 在y轴上加一个目标值线
{
yAxis: 100, // 目标值
name: '目标值', // 显示的名称
lineStyle: {
type: 'solid',
color: '#ff0000', // 线的颜色
},
label: {
color: 'red',
fontSize: 14,
fontWeight: 'bold',
show: true, // 是否显示标签
// offset: [-80, -12], // 标签偏移量
// formatter: '目标值: ' + targetValue+ '单位' // 标签的格式
},
},
],
},
},
],
}
this.chart.setOption(option)
},