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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
js字符编码函数区别分析
Dec 28 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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
Protoss兵种介绍
2020/03/14 星际争霸
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
JS 继承实例分析
2008/11/04 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python ETL工具 pyetl
2020/06/07 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
企业党员公开承诺书
2014/03/26 职场文书
《画风》教学反思
2014/04/16 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
大学班长竞选稿
2015/11/20 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python