实现Echarts折线图的虚实转换

  

需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线;对于进行物理降温后统计的体温数据,需要显示虚线。

现有的体温单是运用 Echarts 折线图,统一用实线显示。因此在这基础上进行的优化。主要的解决思路是:实线和虚线重叠,需要用虚线显示的部分,实线的data设置为 ‘-‘。

 1 {
 2                         name: ‘温度(°C)‘,
 3                         type: ‘line‘,
 4                         stack: ‘温度1‘,
 5                         itemStyle: {
 6                             normal: {
 7                                 lineStyle: {   //系列级个性化折线样式
 8                                     width: 5,
 9                                     type:‘solid‘
10                                 }
11                             }
12                         },
13                         data: [35, 37, 38, ‘-‘, 37, 36, 36, 35]14                     },
15                     {
16                         name: ‘温度(°C)‘,
17                         type: ‘line‘,
18                         stack: ‘温度2‘,
19                         itemStyle: {
20                             normal: {
21                                 lineStyle: {   //系列级个性化折线样式
22                                     width: 2,
23                                     type: ‘dashed‘
24                                 }
25                             }
26                         },
27                         data: [35, 37, 38, 39, 37, 36, 36, 35]
28                     }

注意:当name值一样时,stack 的值不同,两条线就会重叠。

关于data动态数据处理:后台返回同一个数据。在前台加一个判断,当需要用虚线显示的部分,实线的数据中改为‘-‘。

时间: 2024-10-09 22:49:10

实现Echarts折线图的虚实转换的相关文章

echarts折线图动态改变数据时的一个bug

echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http://gallery.echartsjs.com/editor.html?c=xS1T_X893l&v=2

echarts 折线图点击高亮

echarts中注册事件很多 ,记录下今天做的折线图点击高亮: 查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大... 贴出代码: function chartModule () { var self = this; var myChart = null; var prevIndex = null; this.init = function () { myChart = echart.init(document

echarts折线图相关

optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans-serif', fontSize:12 } }, tooltip: {trigger: 'axis'}, legend: { //图例,默认显示 }, grid: { //图表距离 left: '-3%', right: '5%', bottom: '3%', top:'20%', containL

图表echarts折线图,柱状图,饼状图

总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时候就改变icon的形状 legend: { data:[ { name:'访问次数', icon:'line' }, { name:'访', icon:'line' }, { name:'访问', icon:'line' }, ], textStyle:{ color:'#fff' }, right

Echarts折线图的样式修改

option 内属性: //------------------------------------------------------------------------------------------------------------- legend: { data: ['提现人数'], align: 'left', left: 10 },//------------------------------------------------------------------------

echarts折线图

app.title = '多 X 轴示例'; var colors = ['#5793f3', '#d14a61', '#675bba']; option = { color: colors, tooltip: { trigger: 'title', axisPointer: { type: 'cross' } }, title:{ text:'雨量图',//标题 left:50//离左边50 }, legend: { data:['2016 降水量'], bottom:false, //数据标

echarts 折线图动态x轴及数据

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> &l

echarts折线图个性化填充、线条、拐点样式

由于每组数据的拐点样式.线条颜色都不一样,所以series里的每组数据都需要单独设置样式. 首先先来看一下完成后的效果吧 具体设置如下 series: [ { name:systemName[0], type:'line', symbol:'star',//拐点样式 symbolSize: 8,//拐点大小 itemStyle : { normal : { lineStyle:{ width:3,//折线宽度 color:"#FF0000"//折线颜色 } } }, data:data

echarts 折线图百分比 tooltip 实例 两种方法

方法一 在知道有几个类型时:下面有五个类型 tooltip : { show : true, trigger: 'axis', formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%' }, 如图: 方法二 在不知道几个类型时: 自定义类型 client.get("/charList"