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 相关文章推荐
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
浅谈javascript的分号的使用
May 12 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
js调用刷新界面的几种方式
May 03 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
js cavans实现静态滚动弹幕
May 21 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连接MYSQL成功与否的代码
2013/08/16 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python如何进入交互模式
2020/07/06 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
银行求职自荐信范文
2015/03/04 职场文书
政审证明材料
2015/06/19 职场文书
教研活动主持词
2015/07/03 职场文书
创业计划书之美甲店
2019/09/20 职场文书