1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="main" style="height:400px;"></div>
  9.  
  10. <script src="js/echarts.js"></script>
  11. <script src="js/jquery-1.11.3.min.js"></script>
  12. <script type="text/javascript">
  13.     // 路径配置
  14.     require.config({
  15.         paths: {
  16.             echarts: 'js/'
  17.         }
  18.     });
  19.  
  20.     // 使用
  21.     require(
  22.             [
  23.                 'echarts',
  24.                 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
  25.             ],
  26.             function (ec) {
  27.                 // 基于准备好的dom，初始化echarts图表
  28.                 var myChart = ec.init(document.getElementById('main'));
  29.                 setInterval(function(){
  30.                     $.get("js.json",function(data){
  31.                         var lineNum={lengend:[],data:[]};
  32.                         for(var i=0;i<data.length;i++){
  33.                             lineNum["lengend"].push(data[i]["name"]);
  34.                             var obj={};
  35.                             obj.name=data[i]["name"];
  36.                             obj.type="line";
  37.                             obj.data=data[i]["num"];
  38.                             lineNum["data"].push(obj);
  39.                         }
  40.                         option = {
  41.                     title: {
  42.                         text: '折线图堆叠'
  43.                     },
  44.                     tooltip: {
  45.                         trigger: 'axis'
  46.                     },
  47.                     legend: {
  48.                         data:lineNum["lengend"]
  49.                     },
  50.                     grid: {
  51.                         left: '3%',
  52.                         right: '4%',
  53.                         bottom: '3%',
  54.                         containLabel: true
  55.                     },
  56.                     toolbox: {
  57.                         feature: {
  58.                             saveAsImage: {}
  59.                         }
  60.                     },
  61.                     xAxis: {
  62.                         type: 'category',
  63.                         boundaryGap: false,
  64.                         data: ['周一','周二','周三','周四','周五','周六','周日']
  65.                     },
  66.                     yAxis: {
  67.                         type: 'value'
  68.                     },
  69.                     series:lineNum["data"] /*[
  70.                         {
  71.                             name:'邮件营销',
  72.                             type:'line',
  73.                             stack: '总量',
  74.                             data:[120, 132, 101, 134, 90, 230, 210]
  75.                         },
  76.                         {
  77.                             name:'联盟广告',
  78.                             type:'line',
  79.                             stack: '总量',
  80.                             data:[220, 182, 191, 234, 290, 330, 310]
  81.                         },
  82.                         {
  83.                             name:'视频广告',
  84.                             type:'line',
  85.                             stack: '总量',
  86.                             data:[150, 232, 201, 154, 190, 330, 410]
  87.                         },
  88.                         {
  89.                             name:'直接访问',
  90.                             type:'line',
  91.                             stack: '总量',
  92.                             data:[320, 332, 301, 334, 390, 330, 320]
  93.                         },
  94.                         {
  95.                             name:'搜索引擎',
  96.                             type:'line',
  97.                             stack: '总量',
  98.                             data:[820, 932, 901, 934, 1290, 1330, 1320]
  99.                         }
  100.                     ]*/
  101.                 };
  102.  
  103.                 // 为echarts对象加载数据
  104.                 myChart.setOption(option);
  105.                     },"json")
  106.                 },1000);
  107.             }
  108.     );
  109. </script>
  110. </body>
  111. </html>

echarts折线图--数据交互的更多相关文章

  1. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  2. echarts折线图，数据切换时（最近七天）绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  3. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  4. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  5. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  6. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  7. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  8. eCharts 折线图，动态绑定数据不更新图表的问题，

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

  9. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

随机推荐

  1. Linux系统下修改环境变量PATH路径的三种方法

    这里介绍Linux的知识,比如把/etc/apache/bin目录添加到PATH中有三种方法,看完之后你将学会Linux系统下如何修改环境变量PATH路径,需要的朋友可以参考下 电脑中必不可少的就是操 ...

  2. 走进Linux之systemd启动过程

    Linux系统的启动方式有点复杂,而且总是有需要优化的地方.传统的Linux系统启动过程主要由著名的init进程(也被称为SysV init启动系统)处理,而基于init的启动系统被认为有效率不足的问 ...

  3. BZOJ 2132 圈地计划（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2132 题意:n*m的格子染色黑白,对于格子(i,j)染黑色则价值为A[i][j],白色为 ...

  4. oracle数据库中提供的5种约束

    约束作用:用来保持数据的完整性,防止无效数据进入到数据库中.oracle数据库中提供的5种约束,都是限定某个列或者列的组合的.1.主键约束(PRIMARY KEY):在一个表中能唯一的标识一行.主键可 ...

  5. VBA中方法的函数式调用和过程式调用的差别

    因见到有人求助批量设置工作簿中的超链接,尝试写了一段代码: Sub AddHyperlinks() Dim strName As String, source As String, target As ...

  6. Smart Forms&ScriptFrom

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. git sshkeygen Fingerprint cannot be generated解决方法

    ssh-keygen -t rsa -C "xxx@xxx.com"   生成后使用cat或者vim 查看该rsa,然后复制到github的ssh keys中:     提示:   ...

  8. C# 线程（三）：如何操纵一个线程

    From : http://kb.cnblogs.com/page/42529/ 下面我们就动手来创建一个线程,使用Thread类创建线程时,只需提供线程入口即可.(线程入口使程序知道该让这个线程干什 ...

  9. jquery的隐式类型转换

    jquery的选择器想用变量来传,然后就纠结怎么写引号的问题??? 当时脑子就犯轴了,这个我要是传变量怎么写引号啊,我要是在最外层在加一层引号就不对了,就没法识别变量了,不加反而对了 那就用conso ...

  10. C#正则表达式编程（二）：Regex类用法

    上一篇讲述了在C#中有关正则表达式的类之间的关系,以及它们的方法,这一篇主要是将Regex这个类的用法的,关于Match及MatchCollection类会在下一篇讲到.对于正则表达式的应用,基本上可 ...