惠州网站建设哪里有推广网
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)},