一、使用场景

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

二、实现方案

  主要使用了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. 【持续更新】leetcode算法-数组篇

    会在近期陆续地完成数组篇的整理,希望对找工作的小伙伴有所帮助.   1.Two Sum:两数相加为一固定值,求其下标.一次遍历数组,用一个hash表存储已经访问过的数及其下标,对于新访问的数value ...

  2. python之pyquery 学习

    pyquery是jQuery的Python实现,可以用以解析HTML网页的内容.官网文档:http://pythonhosted.org/pyquery/ 下载:https://pypi.python ...

  3. 【ZJOI2007】捉迷藏

    题面 Description Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子. 某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏. 他们的家很大且构造很奇特,由N个屋子和N-1条 ...

  4. leetcode-第11场双周赛-5089-安排会议日程

    题目描述: 自己的提交: class Solution: def minAvailableDuration(self, slots1: List[List[int]], slots2: List[Li ...

  5. Go 动态类型声明

    Go 动态类型声明 package main import "fmt" func main() { var x float64 = 20.0 y := 42 fmt.Println ...

  6. 阿里巴巴持续投入,etcd 正式加入 CNCF

    摘要: 2018 年 12 月 11 日,在 KubeCon + CloudNativeCon 北美峰会上,etcd 项目正式加入 CNCF. 2018 年 12 月 11 日,在 KubeCon + ...

  7. bzoj1045题解

    [解题思路] (数据范围劝退?正确范围应该是n≤1000000) 设xi表示第i个小朋友给第i+1个小朋友的糖果数(特殊的,xn表示第n个小朋友给第1个小朋友的糖果数),Â表示平均糖果数,有如下方程组 ...

  8. 字符串hash+找模数——cf985F

    19260817比自然溢出都要好使 /* 把原串变成用26个01串表示,第i个串对应的字符是i 然后进行字符串hash,s和t双射的条件是26个串的hash值排序后一一相等 */ #include&l ...

  9. kafka的简单命令

    启动kafka自带的zookeeper ./bin/zookeeper-server-start.sh config/zookeeper.properties & 启动kafka ./bin/ ...

  10. 暑假集训test-8-28

    大概是从我一年以来做过的最傻逼的一套题了.. 一个半小时打完三个程序三个暴力拍完以为自己AK了,开心地耍了两个小时. 结果T3要写高精,LL炸了后4个点,中间还有个点是啥都不选的,我没用0去更新又炸了 ...