optionJKDLine = {
  title: {
  text: '告警数量趋势图',
  textStyle:{  //标题样式
    fontStyle:'normal',
    fontFamily:'sans-serif',
    fontSize:12
    }
  },
  tooltip: {trigger: 'axis'},
  legend: {  //图例,默认显示
  },
  grid: {  //图表距离
    left: '-3%',
    right: '5%',
    bottom: '3%',
    top:'20%',
    containLabel: true
  },
  toolbox: {  //右侧工具栏
    feature: {
      saveAsImage: {}
    }
  },
  visualMap: {//区间内控制显示颜色 折线点的颜色变化
    show: false,
    dimension: 1,
    pieces: [

      {
        gte: 0, lte: 140, color: '#7EF57C' //表示0-140之间的数值,是这个#7EF57C颜色,大于这个140,则#ff0000颜色。
      }],
     outOfRange: {
      color: '#ff0000'
    }
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['01', '02', '03', '04', '05', '06', '07']
  },
  yAxis: {
    type: 'value',
    show:false  //不显示Y轴
  },
  yAxis : [{  //显示Y轴,但不显示数值
    axisLabel : {
    formatter: function(){
      return "";
      }
    }
  }],
  series: [{
    name:'告警数量',
    type:'line',
    symbol: 'circle', // 拐点类型
    smooth: true, // 当为true时,就是光滑的曲线(默认为true)
    symbolSize: 3, // 拐点圆的大小
    data: [120, 132, 191, 194, 120, 130, 110],
    smooth: true,
    itemStyle : {
      normal : {
      label : {show: true},
      color:'#ED7967',// 折线条的颜色
      borderColor: '#0bb6db', // 拐点边框颜色

      lineStyle:{
        color:'#EDC167'
      }
  }],
  areaStyle: {  //折线图区域颜色线性渐变显示
    normal: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
      [
      {offset: 0, color: '#7CF5A2'},
      {offset: 0.6, color: '#7EF57C'},
      {offset: 1, color: '#fff'}]
        )
      }
    },

  ]
};

 

实现如下:

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. 知识点4: 配置echarts折线图和饼图

    折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...

  8. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

随机推荐

  1. 利用Admin-LTE项目搭建自己前端的开发框架模板

    1 完整版本 1.1 下载admin-lte项目源代码 github下载地址:点击前往 三少云盘地址:点击前往 1.2 查看admin-lte精简主页源代码 页面地址:点击前往 注意:由源代码可以知道 ...

  2. php小块代码

    //页面本身网址 "http://".$_SERVER["HTTP_HOST"].preg_replace("/[^\/]+$/",&quo ...

  3. 开发一个android项目后的总结

    首先是自己在OneNote上面记录了一些流水: 个人感觉这一路开发下来,学到了一些知识,也碰到了许许多多的问题,也解决了一些问题.总体来看,有几点(个人观点,不支持任何讨论): 1.Java是很优秀的 ...

  4. Leetcode 第136场周赛解题报告

    周日的比赛的时候正在外面办事,没有参加.赛后看了下题目,几道题除了表面要考的内容,还是有些能发散扩展的地方. 做题目不是最终目的,通过做题发现知识盲区,去研究学习,才能不断提高. 理论和实际是有关系的 ...

  5. [CentOS7] 常用工具 之 差异备份工具 rdiff-backup

    差异备份: rdiff-backup ==> 用于累积差异备份,加上自己写的shell script,每日备份,效果更佳 先用yum search rdiff-backup看看是否yum源含有r ...

  6. laravel 导出插件

    转发:https://blog.csdn.net/gu_wen_jie/article/details/79296470 版本:laravel5 php 5.6 安装步骤: 一.安装插件 ①.首先在L ...

  7. 发布一个npm包

    前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...

  8. bzoj2597: [Wc2007]剪刀石头布(费用流)

    传送门 不得不说这思路真是太妙了 考虑能构成三元组很难,那我们考虑不能构成三元组的情况是怎么样 就是说一个三元组$(a,b,c)$,其中$a$赢两场,$b$赢一场,$c$没有赢 所以如果第$i$个人赢 ...

  9. Kotlin VS Java:基本语法差异

    Kotlin比Java更年轻,但它是一个非常有前途的编程语言,它的社区不断增长. 每个人都在谈论它,并说它很酷. 但为什么这么特别? 我们准备了一系列文章,分享我们在Kotlin开发Android应用 ...

  10. 线段树 洛谷P3932 浮游大陆的68号岛

    P3932 浮游大陆的68号岛 题目描述 妖精仓库里生活着黄金妖精们,她们过着快乐,却随时准备着迎接死亡的生活. 换用更高尚的说法,是随时准备着为这个无药可救的世界献身. 然而孩子们的生活却总是无忧无 ...