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 写类方式之八
Jul 05 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
JavaScript File分段上传
Mar 10 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
[原创]图片分页查看
2006/08/28 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python导入pandas具体步骤方法
2019/06/23 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python pip如何手动安装二进制包
2020/09/30 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
母亲节感恩寄语
2014/02/21 职场文书
职业女性的职业规划
2014/03/04 职场文书
分公司经理任命书
2014/06/05 职场文书
离职证明标准格式
2014/09/15 职场文书
画展观后感
2015/06/17 职场文书
Mysql Show Profile
2021/04/05 MySQL
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
golang 实用库gotable的具体使用
2021/07/01 Golang
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL