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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
JS重要知识点小结
Nov 06 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 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作的文本留言本的例子(一)
2006/10/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery中$原理实例分析
2018/08/13 jQuery
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
js的对象与函数详解
2019/01/21 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python实现简单多人聊天室
2018/12/11 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python numpy中cumsum的用法详解
2019/10/17 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
Python中无限循环需要什么条件
2020/05/27 Python
经典C++面试题一
2016/11/06 面试题
大一新生检讨书
2014/10/29 职场文书
应聘教师自荐信
2015/03/26 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python