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 相关文章推荐
alert中断settimeout计时功能
Jul 26 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
javascript实现密码强度显示
Mar 18 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
javascript获取元素的计算样式
May 24 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
手机端转换rem适应
2017/04/01 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
Python中Django 后台自定义表单控件
2017/03/28 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python 批量将中文名转换为拼音
2021/02/07 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
车间副主任岗位职责
2013/12/24 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
法院信息化建设方案
2014/05/21 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python