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 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
webpack多页面开发实践
Dec 18 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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脚本数据库功能详解(中)
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
详解DeBug Python神级工具PySnooper
2019/07/03 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
给医务人员表扬信
2014/01/12 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
客户经理岗位职责
2015/01/31 职场文书
关于迟到的检讨书
2015/05/06 职场文书
演讲开场白和结束语
2015/05/29 职场文书