手机html5 网站导航代码,建个网站多少钱app,深圳建设企业网站,yii wordpressEchart折线图 官方配置项手册 Documentation - Apache ECharts 下面代码包含#xff1a;设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加Y轴目标值 updateChart(data) {const sortedData data.slice().sort((a, b) new Date(a.deviceTime) - ne… 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)},
