`
单一色调
  • 浏览: 86086 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

ECharts数据图表探讨

阅读更多

前段时间给客户做的项目,需要用到百度图表工具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>

 

第四步效果预览:


 

 

  • 大小: 22.6 KB
分享到:
评论
2 楼 u014212273 2017-06-06  
动态画图的思路是什么?静态的知道,动态的不太懂。
1 楼 hr10108 2015-08-27  
直线有点难看,如何改成平滑的曲线,官网上看了下是曲线,放到本地却变成了直线,求指教

相关推荐

    echarts数据可视化作业

    在本“ECharts数据可视化作业”中,我们将深入探讨ECharts的使用方法以及它在数据可视化的应用。 1. **ECharts基础概念** - **图表类型**:ECharts提供了多种图表类型,如柱状图(bar)、折线图(line)、饼图...

    JAVA WEB实现echarts动态图表实例.zip

    ECharts是一款基于JavaScript的数据可视化库,广泛应用于Web前端的数据图表制作,它提供了丰富的图表类型,灵活的交互功能,以及良好的性能。而Java Web则是通过Servlet、JSP等技术在服务器端处理业务逻辑,与前端...

    Echarts 地图图表示例

    在本案例中,我们将重点探讨如何利用ECharts实现地图图表的展示,特别是结合Baidu地图进行操作。 ECharts中的地图图表是一种特殊的图表类型,它可以用于展示地理数据,比如人口、经济指标等。地图图表支持多种地图...

    echarts数据可视化项目教程项目笔记源码

    在这个“ECharts数据可视化项目教程”中,我们将深入探讨如何使用ECharts进行数据呈现和交互设计。 1. **ECharts基础知识** - ECharts的安装:ECharts可以通过CDN链接直接引入,或者通过npm或yarn进行本地安装。 ...

    java 前台数据和echarts图表导出为word文件的jar

    本话题将深入探讨如何利用Java和Echarts将前台数据与图表导出为Word文件,以及涉及到的关键库和技术。 首先,我们需要理解Java中导出Word文档的主要库Apache POI。Apache POI是Java社区中广泛采用的API,它允许...

    echarts各种图表

    在"echarts各种图表"这个主题中,我们将深入探讨ECharts的使用方法及其各种图表类型的应用。 首先,让我们从折线图开始。折线图是用于展示连续性数据变化趋势的图表,比如时间序列数据。在ECharts中,我们可以通过...

    大屏图表(echarts)数据统计分析页面

    本项目将深入探讨如何利用Echarts进行地图分析和图标分析,以实现高效的数据洞察。 1. **Echarts简介**:Echarts是由百度开发的开源图表库,支持多种浏览器,包括PC和移动设备。它基于SVG+Canvas,提供丰富的图表...

    echarts图表简单使用

    ECharts是一款由百度开源的...在“echarts图表简单使用”这个主题中,我们将探讨如何通过ECharts.js文件来创建和配置图表。首先,你需要在HTML文件中引入ECharts的库,通常是在`&lt;head&gt;`标签内加入如下代码: ```html ...

    Ajax动态获取数据 ECHARTS图表

    4. **更新ECharts数据**:将解析后的数据传递给ECharts的`setOption`方法,以更新图表。ECharts会自动根据新数据重新绘制图表。 5. **设置定时器**:为了实现动态加载,可以设置一个定时器,每隔一定时间(如每5秒...

    qt 使用 echarts图表

    标题"qt 使用 echarts图表"表明我们将探讨如何在Qt应用中利用Echarts来创建和展示图表。以下是一些关键知识点: 1. **Echarts的引入**:首先,要在Qt项目中使用Echarts,需要将Echarts的JavaScript库引入。这通常...

    无人售货机Echarts数据分析

    本项目将深入探讨如何利用Echarts对无人售货机的运营数据进行深度分析,以提升运营效率和决策质量。 首先,我们需要理解无人售货机的数据来源。这些数据可能包括但不限于:商品销售记录(销售量、销售额)、时间戳...

    2018年5月更新最新全国省市区县geojson数据(山东)(echarts等图表可用)

    本文将深入探讨2018年5月更新的“全国省市区县geojson数据(山东)”这一资源,以及它如何与Echarts等图表库结合使用。 GeoJSON是一种开放的地理空间数据格式,用于存储地理特征,如点、线、多边形,以及这些特征的...

    html5 echarts图表插件炫光的分布地图动画特效

    ECharts提供了一套完整的数据接口,如`setOption`、`updateOption`等,用于动态修改图表配置,实现数据的实时更新。通过定时器或者事件监听,我们可以控制数据的更新频率和方式,进一步增强地图动画的效果。 为了...

    2018年5月更新最新全国省市区县geojson数据(上海)(echarts等图表可用)

    本文将深入探讨geojson格式的数据特点,以及如何利用这些数据在Echarts中构建交互式地图。 1. geojson数据格式介绍 GeoJSON是一种开放的、轻量级的数据格式,用于存储地理空间信息。它基于JSON(JavaScript Object ...

    基于echarts数据大屏

    本篇文章将深入探讨如何利用ECharts创建数据大屏,以及与之相关的HTML、CSS和JavaScript技术。 **ECharts简介** ECharts是一款基于canvas或SVG的交互式图表库,它支持多种图表类型,如折线图、柱状图、饼图、散点图...

    echarts图表示例教程

    四、ECharts数据系列 1. 数据系列是ECharts图表的核心,每个数据系列对应一种图表类型,例如`series: [{type: 'line', data: [120, 132, 101, 134, 90, 230, 210]}]`。 2. 可以设置多个数据系列,实现多条折线或多个...

    《Web数据可视化(ECharts版)》_PPT课件.rar

    第5章“ECharts的高级功能”进一步探讨了ECharts的动态效果、自定义事件、数据加载和交互等功能。这些特性使ECharts具备了强大的灵活性,可以根据需求创建出富有交互性的可视化应用。 第6章“应用实战:无人售货机...

    Jquery Echarts图表插件,自己研究总结实例+注释说明(源码)

    在本实例中,我们将探讨如何结合jQuery来使用ECharts创建交互式的图表。 首先,ECharts与jQuery的结合使得在DOM操作和事件处理上更加便捷。jQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、...

    asp查询工资echarts图表显示.zip

    在本项目中,我们主要探讨如何使用ASP进行数据库查询,并结合ECharts库生成动态的工资统计图表。ASP(Active Server Pages)是一种微软开发的服务器端脚本环境,用于创建动态网页或Web应用程序。ECharts则是一款由...

    jquery+echarts数据大屏展示DEMO(十几个).zip

    "jQuery + ECharts 数据大屏展示DEMO"是解决这一问题的一个实例集合,它结合了jQuery的易用性和ECharts的强大图表库,为用户提供了创建引人入胜的数据大屏的解决方案。下面,我们将深入探讨这两个技术及其在大屏展示...

Global site tag (gtag.js) - Google Analytics