前段时间给客户做的项目,需要用到百度图表工具ECharts。于是弄下来研究一番,发现效果还不错,将之前用的highchart替换成了Echarts。
记录一下下:
首先第一步引入Js:
<!--Step:1 Import a module loader, such as esl.js or require.js--> <!--Step:1 引入一个模块加载器,如esl.js或者require.js--> <script src="js/esl.js"></script>
第二步创建Div标签容器:
<!--Step:2 为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
第三步为模块加载器配置echarts的路径,并根据API生成图表。
<script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths:{ echarts:'./js/echarts', 'echarts/chart/bar' : './js/echarts-map', 'echarts/chart/line': './js/echarts-map', 'echarts/chart/map' : './js/echarts-map' } }); // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/map' ], function(ec) { //--- 折柱 --- var myChart = ec.init(document.getElementById('main')); myChart.setOption({ tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'蒸发量', type:'bar', 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] }, { name:'降水量', type:'line', 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] } ] }); } ); </script>
第四步效果预览:
相关推荐
在本“ECharts数据可视化作业”中,我们将深入探讨ECharts的使用方法以及它在数据可视化的应用。 1. **ECharts基础概念** - **图表类型**:ECharts提供了多种图表类型,如柱状图(bar)、折线图(line)、饼图...
ECharts是一款基于JavaScript的数据可视化库,广泛应用于Web前端的数据图表制作,它提供了丰富的图表类型,灵活的交互功能,以及良好的性能。而Java Web则是通过Servlet、JSP等技术在服务器端处理业务逻辑,与前端...
在本案例中,我们将重点探讨如何利用ECharts实现地图图表的展示,特别是结合Baidu地图进行操作。 ECharts中的地图图表是一种特殊的图表类型,它可以用于展示地理数据,比如人口、经济指标等。地图图表支持多种地图...
在这个“ECharts数据可视化项目教程”中,我们将深入探讨如何使用ECharts进行数据呈现和交互设计。 1. **ECharts基础知识** - ECharts的安装:ECharts可以通过CDN链接直接引入,或者通过npm或yarn进行本地安装。 ...
本话题将深入探讨如何利用Java和Echarts将前台数据与图表导出为Word文件,以及涉及到的关键库和技术。 首先,我们需要理解Java中导出Word文档的主要库Apache POI。Apache POI是Java社区中广泛采用的API,它允许...
在"echarts各种图表"这个主题中,我们将深入探讨ECharts的使用方法及其各种图表类型的应用。 首先,让我们从折线图开始。折线图是用于展示连续性数据变化趋势的图表,比如时间序列数据。在ECharts中,我们可以通过...
本项目将深入探讨如何利用Echarts进行地图分析和图标分析,以实现高效的数据洞察。 1. **Echarts简介**:Echarts是由百度开发的开源图表库,支持多种浏览器,包括PC和移动设备。它基于SVG+Canvas,提供丰富的图表...
ECharts是一款由百度开源的...在“echarts图表简单使用”这个主题中,我们将探讨如何通过ECharts.js文件来创建和配置图表。首先,你需要在HTML文件中引入ECharts的库,通常是在`<head>`标签内加入如下代码: ```html ...
4. **更新ECharts数据**:将解析后的数据传递给ECharts的`setOption`方法,以更新图表。ECharts会自动根据新数据重新绘制图表。 5. **设置定时器**:为了实现动态加载,可以设置一个定时器,每隔一定时间(如每5秒...
标题"qt 使用 echarts图表"表明我们将探讨如何在Qt应用中利用Echarts来创建和展示图表。以下是一些关键知识点: 1. **Echarts的引入**:首先,要在Qt项目中使用Echarts,需要将Echarts的JavaScript库引入。这通常...
本项目将深入探讨如何利用Echarts对无人售货机的运营数据进行深度分析,以提升运营效率和决策质量。 首先,我们需要理解无人售货机的数据来源。这些数据可能包括但不限于:商品销售记录(销售量、销售额)、时间戳...
本文将深入探讨2018年5月更新的“全国省市区县geojson数据(山东)”这一资源,以及它如何与Echarts等图表库结合使用。 GeoJSON是一种开放的地理空间数据格式,用于存储地理特征,如点、线、多边形,以及这些特征的...
ECharts提供了一套完整的数据接口,如`setOption`、`updateOption`等,用于动态修改图表配置,实现数据的实时更新。通过定时器或者事件监听,我们可以控制数据的更新频率和方式,进一步增强地图动画的效果。 为了...
本文将深入探讨geojson格式的数据特点,以及如何利用这些数据在Echarts中构建交互式地图。 1. geojson数据格式介绍 GeoJSON是一种开放的、轻量级的数据格式,用于存储地理空间信息。它基于JSON(JavaScript Object ...
本篇文章将深入探讨如何利用ECharts创建数据大屏,以及与之相关的HTML、CSS和JavaScript技术。 **ECharts简介** ECharts是一款基于canvas或SVG的交互式图表库,它支持多种图表类型,如折线图、柱状图、饼图、散点图...
四、ECharts数据系列 1. 数据系列是ECharts图表的核心,每个数据系列对应一种图表类型,例如`series: [{type: 'line', data: [120, 132, 101, 134, 90, 230, 210]}]`。 2. 可以设置多个数据系列,实现多条折线或多个...
第5章“ECharts的高级功能”进一步探讨了ECharts的动态效果、自定义事件、数据加载和交互等功能。这些特性使ECharts具备了强大的灵活性,可以根据需求创建出富有交互性的可视化应用。 第6章“应用实战:无人售货机...
在本实例中,我们将探讨如何结合jQuery来使用ECharts创建交互式的图表。 首先,ECharts与jQuery的结合使得在DOM操作和事件处理上更加便捷。jQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、...
在本项目中,我们主要探讨如何使用ASP进行数据库查询,并结合ECharts库生成动态的工资统计图表。ASP(Active Server Pages)是一种微软开发的服务器端脚本环境,用于创建动态网页或Web应用程序。ECharts则是一款由...
"jQuery + ECharts 数据大屏展示DEMO"是解决这一问题的一个实例集合,它结合了jQuery的易用性和ECharts的强大图表库,为用户提供了创建引人入胜的数据大屏的解决方案。下面,我们将深入探讨这两个技术及其在大屏展示...