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 相关文章推荐
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue+webpack项目基础配置教程
Feb 12 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
axios 封装上传文件的请求方法
Sep 26 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JScript的条件编译
2007/05/29 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
政风行风评议心得体会
2014/10/21 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
甲午大海战观后感
2015/06/02 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS