Echarts实现横轴数据节点不一致的绘制

效果

后端数据格式

[{"lineList": [{"ydata": "2","xdata": "2022-05-24"},{"ydata": "51","xdata": "2022-05-27"},{"ydata": "199","xdata": "2022-05-29"},],"unit": "°",},{"lineList": [{"ydata": "99","xdata": "2022-05-23"},{"ydata": "399","xdata": "2022-05-25"},{"ydata": "680","xdata": "2022-05-30"},],"unit": "°",}
]

echarts图标需要的数据格式

[{data: [["2022-05-24", 2],["2022-05-27", 51],["2022-05-29", 199],],type: "line",},{data:[["2022-05-23", 99],["2022-05-25", 399],["2022-05-30", 680],],type: "line",},
]

清洗数据的方法

let source = res.list;
var target = [];for (var i in source) {var data = [];var lineList = source[i].lineList;for (var j in lineList) {data.push([lineList[j].xdata,lineList[j].ydata,]);}var obj = {data: data,type: "line",name: source[i].recognition,};target.push(obj);
}

图表绘制实现

          // 纵坐标单位let unitY = "";unitY = res.list[0].unit;//图例let newArr = [];let legend = [];newArr = res.list;legend = newArr.map((item) => item.recognition);let source = res.list;var target = [];for (var i in source) {var data = [];var lineList = source[i].lineList;for (var j in lineList) {data.push([moment(lineList[j].xdata).format("YYYY-MM-DD HH:mm:ss"),lineList[j].ydata,]);}var obj = {data: data,type: "line",name: source[i].recognition,};target.push(obj);}// 获取Domvar chartDom = document.getElementById(id);// 初始化实例;var lineChart = echarts.init(chartDom);if (!chartDom) {return;}// 绘制配置var options;options = {title: {textStyle: {fontWeight: "normal",},left: "50%",top: "10",},//线的颜色tooltip: {trigger: "axis",},color: ["#FE8800", "#73F6AF"],legend: {data: legend,textStyle: {fontSize: 15,color: "#fff",},bottom: "15",},// 折线图内边距grid: {left: "3%",right: "3%",bottom: "18%",containLabel: true,},//用于区域缩放。以下配置只可缩放横轴// dataZoom: [//   {//     type: "slider",//     show: true,//     start: 0,//     end: 30,//     xAxisIndex: [0],//   },// ],xAxis: {type: "time", // x轴为 时间轴splitLine: { show: false },axisLine: {lineStyle: { width: 0 },},axisLabel: {color: "rgba(191, 202, 212, 1)",fontSize: 11,},axisTick: { show: false },boundaryGap: false,},yAxis: {axisLabel: {color: "rgba(191, 202, 212, 1)",fontSize: 11,},type: "value",name: unitY, //纵坐标单位nameTextStyle: {color: " #BFCAD4",nameLocation: "start",fontSize: "14",},min: 0, //取0为最小刻度scale: true, //自适应nameGap: 15,axisTick: {show: false, //刻度线},axisLine: {show: false, //隐藏y轴},splitLine: {// ⽹格线show: true,lineStyle: {color: "#2e3f48",type: "dotted",width: "2",},},},series: target,};options && lineChart.setOption(options);

此片文章到这里就结束啦，各位同僚可以在自己的demo项目里演示一番，如有更好的方案可私聊一起讨论，如有其它疑问可评论区留言哦

Echarts实现横轴数据节点不一致的绘制相关推荐

Echarts的使用之制作红黑榜柱形图（前后三名柱体颜色、数据颜色不一致）
要求实现效果: 在一次项目中,有个管理仪表盘页需要制作,所以就选择了使用echarts来显示数据, 第一次用的时候很好用诶!!还觉得有点神奇!哈哈哈哈土白就是我叭(又土有小白,我就是代言人!) 在制 ...
echarts 高度跟随数据长度自适应
echarts 高度跟随数据长度自适应 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
echarts tab切换_Python 数据可视化实战：使用 PyQt5 和 Echarts 打造股票数据看板
月小水长一个编码者.思考者在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表在一份项目路演ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂作为数据分析最后也是最直接的一环,数据可视 ...
数据可视化——R语言绘制散点相关图并自动添加相关系数和拟合方程
数据可视化--R语言绘制散点相关图并自动添加相关系数和拟合方程加载所需的包并设置主题样式示例数据基本的散点相关图添加相关系数和显著性水平(P值) 存在多个组别的散点相关图自动添加回归曲线的拟 ...
[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
百度ECharts地图GeoJson数据在线下载 2021
百度ECharts地图GeoJson数据在线下载项目中使用到了百度的图表插件ECharts,不得不说是真的好用,但是用到地图部分时,竟然没有地图的json数据包,网上.GitHub搜索,找到的离线包 ...
【数据可视化应用】绘制和弦图（附Python和R语言代码）
和弦图(Chord diagram)简介和弦图(chord Diagram),是一种显示矩阵中数据间相互关系的可视化方法,节点数据沿圆周径向排列,节点之间使用带权重(有宽度)的弧线链接.其适合节点数 ...
echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...

Echarts实现横轴数据节点不一致的绘制

效果

后端数据格式

echarts图标需要的数据格式

清洗数据的方法

图表绘制实现

Echarts实现横轴数据节点不一致的绘制相关推荐

最新文章

热门文章