Echarts折线图

[html] view plain copy

 print?

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>ECharts-基本线性图及其配置要求</title>  
  6.     <script src="js/esl.js" type="text/javascript"></script>  
  7. </head>  
  8. <body>  
  9.     <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">  
  10.     </div>  
  11.     <script type="text/javascript" language="javascript">  
  12.         // 按需加载  
  13.         // Step:3 conifg ECharts's path, link to echarts.js from current page.  
  14.         // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
  15.         require.config({  
  16.             paths: {  
  17.                 echarts: './js/echarts' //echarts.js的路径  
  18.             }  
  19.         });  
  20.         // Step:4 require echarts and use it in the callback.  
  21.         // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  22.         require(  
  23.         [  
  24.             'echarts',  
  25.             'echarts/chart/line'  
  26.         ],  
  27.         //回调函数  
  28.         DrawEChart  
  29.         );  
  30.   
  31.         //渲染ECharts图表  
  32.         function DrawEChart(ec) {  
  33.             //图表渲染的容器对象  
  34.             var chartContainer = document.getElementById("main");  
  35.             //加载图表  
  36.             var myChart = ec.init(chartContainer);  
  37.             myChart.setOption({  
  38.                 //图表标题  
  39.                 title: {  
  40.                     text: "ECharts简单线形图表及其配置展示实例", //正标题  
  41.                     link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开  
  42.                     x: "center", //标题水平方向位置  
  43.                     subtext: "From:http://www.stepday.com", //副标题  
  44.                     sublink: "http://www.stepday.com", //副标题链接  
  45.                     //正标题样式  
  46.                     textStyle: {  
  47.                         fontSize:24  
  48.                     },  
  49.                     //副标题样式  
  50.                     subtextStyle: {  
  51.                         fontSize:12,  
  52.                         color:"red"  
  53.                     }  
  54.             },  
  55.             //数据提示框配置  
  56.             tooltip: {  
  57.                 trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框  
  58.             },  
  59.             //图例配置  
  60.             legend: {  
  61.                 data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致  
  62.                 y:"bottom"  
  63.             },  
  64.             //工具箱配置  
  65.              toolbox: {  
  66.                 show : true,  
  67.                 feature : {  
  68.                     mark : {show: true}, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部  
  69.                     dataView : {show: true, readOnly: false},// 数据视图，上图icon左数8，打开数据视图  
  70.                     magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图  
  71.                     restore : {show: true}, // 还原，复位原始图表，上图icon左数9，还原  
  72.                     saveAsImage : {show: true} // 保存为图片，上图icon左数10，保存  
  73.                 }  
  74.             },  
  75.             calculable: true,  
  76.             //轴配置  
  77.             xAxis: [  
  78.                     {  
  79.                         type: 'category',  
  80.                         data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],  
  81.                         name: "月份"  
  82.                     }  
  83.                 ],  
  84.             //Y轴配置  
  85.             yAxis: [  
  86.                     {  
  87.                         type: 'value',  
  88.                         splitArea: { show: true },  
  89.                         name:"数值"  
  90.                     }  
  91.                 ],  
  92.             //图表Series数据序列配置  
  93.             series: [  
  94.                     {  
  95.                         name: '蒸发量',  
  96.                         type: 'line',  
  97.                         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]  
  98.                     },  
  99.                     {  
  100.                         name: '降水量',  
  101.                         type: 'line',  
  102.                         data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]  
  103.                     }  
  104.                 ]  
  105.         });  
  106.         }  
  107.     </script>  
  108. </body>  
  109. </html>  

时间： 2025-01-01 13:27:38

Echarts折线图的相关文章

控件-Echarts 折线图如何和后台连接

问题描述 Echarts 折线图如何和后台连接 使用Echarts控件在页面绘制了如下折线图 图片里的数据是我手动设置的固定值,现在我需要从数据库中查询数据分别填在该控件的代码中,我们规定返回到页面的是json格式,现在不知道怎么查了 因为首先有四条折线,分别对应了不同的门,而横轴的时间段应该是固定的从0到23点,但如何和我从数据库查的对应时间下的访客次数相对应呢,我现在真是无从下手,描述的也含糊不清,附上我的需求和控件代码,望大神指教!尴尬的是新手没c币 需求是:增加通行记录统计画面,以折线图

图片- 求帮忙 echarts 折线图

问题描述 求帮忙 echarts 折线图 画折线图 数据显示不出来 但是点击数据视图里面是有数据的,是因为数据太多了吗,有500多条 解决方案 http://www.open-open.com/lib/view/open1418004151448.html 解决方案二: 求帮忙echarts折线图Echarts折线图

数据-echarts 折线图关于x轴显示不同的时间

问题描述 echarts 折线图关于x轴显示不同的时间 **我在做一个echarts折线图,目前来说,折线图已经可以显示, 但是 要求显示的是 今天,昨天,最近7天,最近15天,和自定义天数 这几项的数据, 所以x轴 是需要改变的,以及x轴的数据也需要改变,我现在只会固定的今天,昨天.或者7天的 求助各位大神,下面data数组怎么能够根据我的选择来改变? 解决方案 function queryOpts(xData){ xAxis : [ { type : 'category' data : xD

charts echarts-Echarts折线图区域填充问题

问题描述 Echarts折线图区域填充问题 我设置了'itemStyle': {normal: {areaStyle: {type: 'default'}}},后,折线图只是填充到0,请问怎么能在两条折现之间填充颜色?就像要填充在图中所画的位置. 解决方案 试试看 fillerColor,具体看文档 解决方案二: http://echarts.baidu.com/doc/doc.html

D3.js实现折线图的方法详解_javascript技巧

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

图表-Echarts 插件 做折线图，图上的点怎么隐藏

问题描述 Echarts 插件 做折线图,图上的点怎么隐藏 Echarts 插件 做折线图,图上的点怎么隐藏鼠标移入的时候才会显示?点击点的时候,会有相应的数据显示? 解决方案 symboList:[none] 就好了 解决方案二: symboList:[none] 就好了

Echarts柱状图，饼状图，折线图案例

在使用Echarts之前需要做的工作是引入Echarts所需的js: <script type="text/javascript" src="${scriptsPath}/echarts/echarts.min.js" charset="utf-8"></script> 定义要在那个div区域显示图形:  <div class="similarity-sentence" id="simi

前端-百度echarts画折线图显示不出来，画柱状图则正常

问题描述 百度echarts画折线图显示不出来,画柱状图则正常 代码如下: <div id=""main"" style=""height:400px""></div> <script src=""http://echarts.baidu.com/build/dist/echarts.js""></script> <script ty

line-Echart折线图点击事件

问题描述 Echart折线图点击事件 js引入: <script src=""<%=basePath %>common/js/dist/echarts.js""></script> 加载echart折线图: // 路径配置 require.config({ paths: { echarts: '<%=basePath %>common/js/dist' } }); require( [ 'echarts' 'echar