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 常见开发使用技巧总结
Dec 26 Javascript
实测jquery data()如何存值
Aug 18 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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中copy on write写时复制机制介绍
2014/05/13 PHP
PHP中phar包的使用教程
2017/06/14 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python 除法小技巧
2008/09/06 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
过滤器的用法
2013/10/08 面试题
英语生日邀请函
2014/01/23 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
校园标语大全
2014/06/19 职场文书
保研推荐信格式
2015/03/25 职场文书
百万英镑观后感
2015/06/09 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
聘用合同范本
2015/09/21 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server