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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP与SQL注入攻击[三]
2007/04/17 PHP
destoon复制新模块的方法
2014/06/21 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python线程、进程和协程详解
2016/07/19 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
应届生如何写自荐信
2014/01/05 职场文书
银行服务感言
2014/03/01 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
企业员工辞职信范文
2015/05/12 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript