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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
微信小程序 form组件详解
Oct 25 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue实现拖拽效果
Dec 23 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 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
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python实现视频分帧效果
2019/05/31 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Oracle性能调优原则
2012/05/03 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
应届生求职信写作技巧
2013/10/24 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
行政专员工作职责
2013/12/22 职场文书
委托书模板
2014/04/04 职场文书
庆祝儿童节标语
2014/10/09 职场文书
荆州古城导游词
2015/02/06 职场文书
医院合作意向书范本
2015/05/08 职场文书
单方投资意向书
2015/05/11 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python urllib库的使用详解
2021/04/13 Python