echarts多条折线图动态分层的实现方法


Posted in Javascript onMay 24, 2019

1、关于Echarts

大家可以到这个网址看一下,还是比较详细的。

http://echarts.baidu.com/doc/example.html

这个功能还是很强大的,对于喜欢做数据统计来说是美味的。

2、echarts多条折线图动态分层

var xData = param.xData;

  var data = param.yData
  let option = [];
  let num =param.num ? param.num : 0;
  let max = num ? num *100 : 100;  //处理精度丢失问题 但不是最佳方案
option = {

    title: {
      left: 'center',
      text: param.title
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      right:0,
      data:param.tName,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      boundaryGap: false,
      data:param.xData
    },
    yAxis: {
      name: param.yName,
      splitLine: { show: false },
      
    },
    series: []
  }
  option[6].series.push(
    {
      name: '平行于y轴的趋势线',
      type: 'line',
      //data:[0],
      markLine: {
        silent: true,
        data: [{
          yAxis: num
        }]
      }
    }
  )
  if( param.option_type == 6){
    for( var item in param.yData){
      var obj ={
        name: param.yData[item].name,
        type: 'line',
        color:param.yData[item].color,
        data: param.yData[item].data
      }
      option[6].series.push(obj)
    }
  }

效果图

echarts多条折线图动态分层的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
Echarts动态加载多条折线图的实现代码
May 24 #Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 #Javascript
微信小程序wepy框架学习和使用心得详解
May 24 #Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 #Javascript
微信小程序动态添加view组件的实例代码
May 23 #Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 #Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
You might like
PHP 常用的header头部定义汇总
2015/06/19 PHP
php开发工具有哪五款
2015/11/09 PHP
php数组分页实现方法
2016/04/30 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python 伯努利分布详解
2020/02/25 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
python中的列表和元组区别分析
2020/12/30 Python
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
实习单位接收函模板
2014/01/10 职场文书
优秀学生评语大全
2014/04/25 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
党员先进事迹材料
2014/12/19 职场文书
鸟的天堂导游词
2015/01/31 职场文书
食品质检员岗位职责
2015/04/08 职场文书
警示教育观后感
2015/06/17 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书