echarts实现实线与虚线相连接的折线图

一：UI效果图

**

**

二：后台返回的数据格式

[{measureTime:'2021-5-1',value:36,level:1},{measureTime:'2021-5-2',value:37.9,level:2},{measureTime:'2021-5-3',value:39,level:3},...
]

三：代码实现


const weekDict2 = ["周一", "周二", "周三", "周四", "周五", "周六", "周日",]
const itemStyleList = [{ color: '#50D3A1' },{ color: '#FAAD14' },{ color: '#FF5858' },
]
getLenRatio = () => {const DESIGN_WIDTH = 750; // 设计稿宽度return document.documentElement.clientWidth / DESIGN_WIDTH;}getFristDay = (date) => {const frist = moment(date).startOf('month');switch (frist.day()) {case 6:return frist.add(2, 'days');case 0:return frist.add(1, 'days');default:return frist;}}initChart = (tempList = [], reportType) => {tempList = tempList || [];const { id, chartType } = chartIdList[reportType - 1];const dom = document.getElementById(id);if (!dom) return;this[chartType] = echarts.init(dom);const ratio = this.getLenRatio(); //获取比例const xAxisData = [];   //x轴数据const seriesData1 = []; //实线折线图数据const trueSeriesData1 = []; //实线折线图series数据const trueTempData = [];  //剔除不存在的体温数据const tempNullData = []; //temp为null的数据const fristDay = tempList && tempList.length && this.getFristDay(tempList[0].measureTime);tempList.forEach((items, index) => {const { measureTime, value, level } = items;// level 1：正常 2：低热，3高热xAxisData.push(measureTime);seriesData1.push(value);trueSeriesData1.push({ value, symbol: 'circle', itemStyle: level ? itemStyleList[level - 1] : {} })if (level) trueTempData.push(value);if (typeof level === 'object') tempNullData.push(index);});//有体温≥37.3°显示高热线const maxTemp = Math.max.apply(null, trueTempData);const minTemp = Math.min.apply(null, trueTempData);const flag = maxTemp && maxTemp >= 37.3;const markLineData = [{ yAxis: 37.3, lineStyle: { color: '#FAAD14', type: 'dashed' } },];let yAxisMax = 38;let yAxisMin = 34;if (minTemp && minTemp < 34) {yAxisMin = Math.floor(minTemp);}if (flag) {markLineData.push({yAxis: 38.5,lineStyle: {color: '#FF6B53',type: 'dashed'}});if (maxTemp > 39) {yAxisMax = Math.ceil(maxTemp);} else {yAxisMax = 39;}}console.log(markLineData);//1.如果一个点为空，则其左右两个点得在第二数组，且此点是左右两值的平均点//2.如果连续点为空，则取到其后不为null的那个点，// 用此点减去上一个点的值的绝对值除以连续空白数量+1,// 安插到null值处let seriesData2 = [];  //虚线折线图数据const tempNullLength = tempNullData.length;console.log(tempNullLength, seriesData1.length);// 如果有null数据且不全为null数据则进入此判断if (!!tempNullLength && tempNullLength !== seriesData1.length) {const dataForSeries2 = []; //得出seriesData2的数组seriesData1.forEach((items, index) => {// 如果value为null 则isReal为false,表示为假数据,// 如果为null情况下前后的temp有null,则isContinuous为true 表示连续// 如果isReal为true,同时前后没有isReal为false的数据 isNull为trueconst obj = {};obj.index = index;obj.value = items;const preTempType = typeof seriesData1[index - 1] === 'object';const nextTempType = typeof seriesData1[index + 1] === 'object';if (typeof items === 'object') {obj.isReal = false;obj.isNull = false;if (preTempType || nextTempType) {obj.isContinuous = true;} else {obj.isContinuous = false;}} else {obj.isReal = true;if (preTempType || nextTempType) {obj.isNull = false;} else {obj.isNull = true;}obj.isContinuous = false;}dataForSeries2.push(obj);})//得到dataForSeries2循环获取seriesData2for (let i = 0; i < dataForSeries2.length;) {const { isReal, isNull, isContinuous, value } = dataForSeries2[i];if (isNull) { //如果是null值，就说明该数据前后都是真实数据，继续下一次循环seriesData2[i] = null;i++;continue;}if (isReal) {//如果不是null值，且是真实数据，继续下一次循环seriesData2[i] = value;i++;continue;}if (isContinuous) {//如果不是null值也不是真实数据，就判断是否连续，//计算连续段数let continuousNo = 1;for (let continuousIndex = i + 1; continuousIndex < dataForSeries2.length; continuousIndex++) {if (dataForSeries2[continuousIndex].isContinuous) {continuousNo += 1;} else {break;}}if (continuousNo + i === dataForSeries2.length) { // 如果连续到末尾，则所有数据都与之前数据相同for (let continuousNo2 = i; continuousNo2 < dataForSeries2.length; continuousNo2++) {seriesData2[continuousNo2] = dataForSeries2[i - 1].value}i += continuousNo;} else {// 如果连续就看连续段数，将连续结束后的真实数据-连续开始时的数据/（连续段数+1）设置好所有数据后i+上连续段数let preTemp = dataForSeries2[i - 1] && dataForSeries2[i - 1].value;const nextTemp = dataForSeries2[i + continuousNo] && dataForSeries2[i + continuousNo].value;let diffValue = 0;if (preTemp) {diffValue = (nextTemp - preTemp) / (continuousNo + 1);} else {preTemp = nextTemp;}preTemp = preTemp - 0; //转化为数字for (let continuousNo2 = i; continuousNo2 <= i + continuousNo; continuousNo2++) {seriesData2[continuousNo2] = preTemp + diffValue;preTemp += diffValue;}i += continuousNo;}} else {//如果不连续，看前后是否都有值，有值就取平均值，没有就取有值的 主要是防止开头和结尾const preTemp = dataForSeries2[i - 1] && dataForSeries2[i - 1].value;const nextTemp = dataForSeries2[i + 1] && dataForSeries2[i + 1].value;console.log(preTemp, nextTemp);if (preTemp && nextTemp) {seriesData2[i] = (preTemp - 0 + (nextTemp - 0)) / 2;} else {seriesData2[i] = preTemp || nextTemp;}i++;}}}const options = {grid: {left: 10 * ratio,right: 24 * ratio,top: 60,bottom: 40,containLabel: true,},xAxis: {type: 'category',data: reportType === 1 ? weekDict2 : xAxisData,axisLine: {lineStyle: {color: '#968CAC',opacity: .2}},axisTick: {show: false,},axisLabel: {show: true,margin: 24 * ratio,align: 'center',interval: 0,color: '#666',formatter: (value, index) => {if (reportType === 1) {return value;}//第一个日期显示为本月第一个工作日 后面为每周周一let date = moment(value);let weekDay = date.day();if (date.isSame(fristDay)) return date.format('MM.DD');if (weekDay === 1) return date.format('MM.DD');}},splitLine: {show: false},},yAxis: {type: 'value',name: '(℃)',nameGap: 16,max: yAxisMax,min: yAxisMin,minInterval: 1,nameTextStyle: {color: '#666',align: 'right',padding: [0, 24 * ratio, 0, 0]},axisLine: {show: true,lineStyle: {color: '#968CAC',opacity: .2}},axisTick: {show: false},axisLabel: {color: '#666',verticalAlign: 'middle',formatter: (value, index) => {return `${value}.0`;},margin: 28 * ratio,padding: [3, 0, 0, 0],},splitLine: {lineStyle: {color: '#968CAC',opacity: .2}},},series: [{name: '体温',symbolSize: 12 * ratio,data: trueSeriesData1,type: 'line',lineStyle: {color: 'rgba(0,0,0,.2)',width: 2},markLine: {symbol: 'none',label: { show: false },data: markLineData}},{name: '体温',data: seriesData2,type: 'line',showSymbol: false,lineStyle: {color: 'rgba(0,0,0,.2)',width: 1,type: 'dashed'},}]};this[chartType].setOption(options);}

四：结尾

**
1.欢迎转载，请备明转载及链接
2.欢迎给出意见和建议，有问题可以在评论区指出

echarts实现实线与虚线相连接的折线图相关推荐

echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
echarts 世界地图标点_关于echarts的那些事（地图标点，折线图，饼图）
前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...
python画折线图虚线_python绘制简单折线图代码示例
1.画最简单的直线图代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
ECharts：Y轴数据变化小，折线图看起来不明显，试试这个方法
在很多工业领域中,很多工业设备工况时序数据变化都很微小,如何更直观的呈现关系到数据分析的效率问题. 比如有这么一组数据:6.194, 6.199, 6.197, 6.191, 6.204, 6.194 ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...
【Echarts】Vue项目使用echarts详细教程，暗色系柱状图，折线图，环形图等详细配置代码
文章目录一.引入 echarts 二.效果图及其详细代码 2.1.双柱柱状图 2.2.折柱混合图 2.3.堆叠柱状图 2.4.嵌套环形图 2.5.普通环形图一.引入 echarts echarts ...
Echarts折线图拐点突出显示效果
代码如下: //初始化数据录入情况echarts实例var echarts_dataEntry = echarts.init(document.getElementById('echarts_data ...

echarts实现实线与虚线相连接的折线图

一：UI效果图

二：后台返回的数据格式

三：代码实现

四：结尾

echarts实现实线与虚线相连接的折线图相关推荐

最新文章

热门文章