一、使用场景

   当舒张压和收缩压超过或低于他们对应的范围时,折线应该给与不同颜色。两个指标对应的范围也要填充不同的颜色。

二、实现方案

  主要使用了echarts中的visualMap,series.markArea;visualMap作用是定义数据范围,利用不同范围定义不同的颜色,其中visualMap.seriesIndex的值对应series.data。seriesIndex=0 ->series[0]. markArea则是定义区域范围并填充颜色. 

visualMap
 markArea: {
silent:false,
itemStyle:{
color:'#BCE7B1'
},
data: [
[{
name: '',
yAxis: 60
},
{
yAxis: 90
}]
],
},

markArea

完整option代码

this.option={
tooltip : {
trigger: 'axis'
},
legend: {
data:['舒张压','收缩压']
},
calculable : true, xAxis : [
{
type : 'category',
boundaryGap : false,
axisLabel:{
rotate:45,
interval:0
},
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
name:'血压',
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
visualMap: [
{
show: false,
seriesIndex:0,
pieces: [
{
gt:0,
lte:60,
color:'#e91642'
},
{
gt: 60,
lte: 90,
color: '#D5D5D5'
},
{
gt: 90,
let:200,
color: '#e91642'
}
]
},
{
show: false,
seriesIndex:1,
pieces:[
{
gt:0,
lte:90,
color:'#e91642'
},
{
gt: 90,
lte: 140,
color: '#EBEBBE'
}, {
gt: 140,
let:200,
color: '#e91642'
}]
}
],
series : [
{
name:'舒张压',
type:'line',
data:[55, 85, 90, 95, 70,105, 90],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markArea: {
silent:false,
itemStyle:{
color:'#BCE7B1'
},
data: [
[{
name: '',
yAxis: 60
},
{
yAxis: 90
}]
],
},
},
{
name:'收缩压',
type:'line',
data:[90, 95, 105, 160, 135, 150, 140],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markArea: {
silent:false,
itemStyle:{
color:'#B8C4F1'
},
data: [
[{
name: '',
yAxis: 90
},
{
yAxis: 140
}]
],
},
}
]
};

  

												

echarts折线区域图的更多相关文章

  1. echart折线区域图

    在引入echart区域折线图时,没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryG ...

  2. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  3. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

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

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  5. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  6. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  7. echarts折线图,数据切换时(最近七天)绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  8. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  9. Echarts折线图表断点如何补全

    Echarts折线图如何补全断点以及如何隐藏断点的title 做报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example ...

随机推荐

  1. Pregel Master

  2. ARM 寄存器 和 工作模式了解

    一. ARM 工作模式 1.   ARM7,ARM9,ARM11,处理器有 7 种工作模式:Cortex-A 多了一个监视模式(Monitor) 2.  用户模式:非特权模式,大部分任务执行在这种模式 ...

  3. Homestead 安装其它的PHP版本

    运行环境: 系统: win10 软件: virtualbox 6.2 vagrant 2.2.4 homestead 7.1.0 sudo apt-get update sudo apt-get -y ...

  4. Redis探索之路(二):Redis在linux下的安装

    目前最新稳定版本为:2.4.17.tar.gz .redis-2.6.10.tar.gz wget http://redis.googlecode.com/files/redis-2.4.17.tar ...

  5. Java 导出excel进行换行

    在导出excel 的时候,如果原始文字中含有 \n 字符,生成的excel中 会生成 _0040_ 字样的乱码, 如果把 \n 替换为<br/>,excel不会识别成换行符 excel 认 ...

  6. Development 编程规范

    { 命名规范类命名 1)所有的类名,接口名(Protocol)均以大写字母开头,多单词组合时,后面的单词首字母大写.   类,接口名必须是有意义的,切忌使用中文拼音命名.另外所有类都要加标致前缀:“O ...

  7. IDEA工具下Mybaties框架快速入门程序

    本篇文章介绍在IDEA工具下mybatis快速入门程序分为以下五步 ​ 1 添加依赖包 ​ 2 编写pojo对象 ​ 3 编写映射文件 ​ 4 编写核心配置文件 ​ 5 测试框架 详细如下 建立Mod ...

  8. jQuery.speech实现文本转语音播报功能

    先放一个实例的地址https://github.com/wenco/speech jQuery.speech是用jQuery写的扩展插件,主要是用来语音播报. 接口调用百度翻译的接口,所以存在url参 ...

  9. Intervals POJ - 3680

    传送门 给定数轴上n个带权区间$[l_i,r_i]$,权值为$w_i$ 选出一些区间使权值和最大,且每个点被覆盖次数不超过k次. 离散+拆点,最大费用可行流(跑到费用为负为止) 第一部分点按下标串起来 ...

  10. flutter 图片为空报错

    imgpath != null ? Image.network(imgpath) : Container() 如果不判断imgpath 为空 network 内的url 为空就会报错