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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
React-router4路由监听的实现
Aug 07 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 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实现paypal整合方法
2010/11/28 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
javascript运动详解
2015/07/06 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
python动态性强类型用法实例
2015/05/09 Python
Python中的with...as用法介绍
2015/05/28 Python
简单讲解Python中的闭包
2015/08/11 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
深入理解Python中的内置常量
2017/05/20 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
土木工程师岗位职责
2013/11/24 职场文书
银行出纳岗位职责
2013/11/25 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
交通事故私了协议书
2014/04/16 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
员工辞职信范文大全
2015/05/12 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python进程池与进程锁之语法学习
2022/04/11 Python