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 相关文章推荐
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
js微信分享实现代码
Oct 11 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 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&mysql(四)
2006/10/09 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
清除输入框内的空格
2016/12/21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
在python中bool函数的取值方法
2018/11/01 Python
python列表推导式操作解析
2019/11/26 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Django通过json格式收集主机信息
2020/05/29 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
木工主管岗位职责
2013/12/08 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
银行自荐信怎么写
2015/03/05 职场文书
初中团支书竞选稿
2015/11/21 职场文书
《山中访友》教学反思
2016/02/24 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
详解Python常用的魔法方法
2021/06/03 Python