首先介绍一下我们的主角ECharts

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 **Canvas** 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

入门开始

Echarts引入方式

1.npm或者cnpm安装

cnpm install echarts --save

然后在需要的模块导入

let echarts = require('echarts/lib/echarts');//引入echarts

require('echarts/lib/chart/bar'); //柱状图

require('echarts/lib/component/tooltip');// 提示框

require('echarts/lib/component/title');//标题组件

2.单文件引入（echarts官网）

 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

使用Echarts

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts图表

        var myChart = echarts.init(document.getElementById('main')); 

        var option = {

            title : {    //标题 可用 show 显示策略，可选为：true（显示） | false（隐藏）

                text: '某地区蒸发量和降水量',

                subtext: '纯属虚构'

            },

            tooltip : { //提示框，鼠标悬浮交互时的信息提示（可接收function，自定义显示方式）

                trigger: 'axis'

            },

            legend: { //图例，每个图表最多仅有一个图例(可修改布局，背景色，边框)

                data:['蒸发量','降水量']

            },

            calculable : true,//是否启用拖拽重计算特性，默认关闭

            xAxis : [//直角坐标系中横轴数组(坐标轴有三种类型，类目型、数值型和时间型）

                {

                    type : 'category',

                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

                }

            ],

            yAxis : [//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数组

                {

                    type : 'value'

                }

            ],

            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],

                    markPoint : {

                        data : [

                            {type : 'max', name: '最大值'},

                            {type : 'min', name: '最小值'}

                        ]

                    },

                    markLine : {

                        data : [

                            {type : 'average', name: '平均值'}

                        ]

                    }

                },

                {

                    name:'降水量',

                    type:'bar',

                    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],

                    markPoint : {

                        data : [

                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},

                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}

                        ]

                    },

                    markLine : {

                        data : [

                            {type : 'average', name : '平均值'}

                        ]

                    }

                }

            ]

        };

        // 为echarts对象加载数据

        myChart.setOption(option);

    </script>

</body>

图表生成如下

注意！！！

Echarts的目标元素要设置高度

<div id="main" style="height:400px"></div>

否则会报错

resize

当遇到响应式布局高宽不固定时，肯定会发生图表挤压或者显示不全的问题

那么我们将使用Echarts提供的resize(调整大小)方法

首先我们看一下页面生成以后的Echarts元素

每个Echarts图表都提供了唯一ID,我们可以获取这个ID从而操纵对应的Echarts图表

let charId = document.getElementById('main').getAttribute('_echarts_instance_');

echarts.getInstanceById(charId).resize();

当然如果你能直接获取Echarts实例对象，那么就可以直接操作对应的图表啦！（实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用）

setTimeout(function (){

    window.onresize = function () {

        myChart.resize();

       }

},200)

echarts的实例方法非常重要,因为在实际运用中我们的图表的数据不可能是死的，而是动态变化的,实例方法为动态改变数据提供了方法。

注:内容摘自echarts官网，原文地址:http://echarts.baidu.com/doc/...

Echarts轻松入门，内附踩坑秘籍的更多相关文章

  1. 小程序框架WePY 从入门到放弃踩坑合集

    小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...

  2. VUE使用微信JDK（附踩坑记录）

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  3. 微信小程序性能测试之jmeter踩坑秘籍（前言）

    最近要做个微信小程序的性能压测,虽然之前只做过web端的,但想一想都是压后端的接口,所以果断答应了下来,之前对jmeter都是小打小闹,所以趁着这次机会好好摆弄摆弄. ---------------- ...

  4. 我用EasyExcel优化了公司的导出（附踩坑记录）

    背景介绍 最近要改一个导出的功能,在原有的基础上,在导出一份明细数据,要求导出内容加在原有 excel 的第二个 sheet 上.考虑到数据量还比较大,干脆引入阿里的 EasyExcel 来做. 下面 ...

  5. ant.design React使用Echarts，实力踩坑

    最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...

  6. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  7. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  8. [置顶] xamarin android toolbar(踩坑完全入门详解)

    网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...

  9. ABP框架入门踩坑-配置数据库表前缀

    配置数据库表前缀 ABP踩坑记录-目录 本篇其实和ABP关系并不大,主要是EF Core的一些应用-.-. 起因 支持数据库表前缀应该是很多应用中比较常见的功能,而在ABP中并没直接提供这一功能,所以 ...

随机推荐

  1. 七种常见经典排序算法总结（C++实现）

    排序算法是非常常见也非常基础的算法,以至于大部分情况下它们都被集成到了语言的辅助库中.排序算法虽然已经可以很方便的使用,但是理解排序算法可以帮助我们找到解题的方向. 1. 冒泡排序 (Bubble S ...

  2. 38）PHP，获取数据库数据并在html中显示（晋级5）

    还有一个加了单例模式的,在第52个. 首先是我的文件关系: 我的主php文件是index.php,我的配置文件php是BBB.php  我的数据库操作文件是  b.php    我的html文件是lo ...

  3. rest framework-restful介绍-长期维护

    ###############   django框架-rest framework    ############### # django rest framework 框架 # 为什么学习这个res ...

  4. vue2.0学习之组件间通信

    /* child.vue*/ 子组件 <template> <div> /*必须要用div包裹起来,然后在里面写需要的组件内容,这里面和平常写的html是一样的*/ <d ...

  5. python学习笔记（15）pymysql数据库操作

    pymysql数据库操作 1.什么是PyMySQL 为了使python连接上数据库,你需要一个驱动,这个驱动是用于与数据库交互的库. PyMySQL : 这是一个使Python连接到MySQL的库,它 ...

  6. maven-assembly-plugin 打包包含多余依赖问题一则

    有同事反馈自己maven-assembly-plugin打的包里面多了很多mvn dependency:tree中没有的jar. 我当时只是试着把他的maven-assembly-plugin更新到了 ...

  7. 对TD tree的使用体验及建议

    TDtree与QQ空间有着相似的功能,你可以在里面发表自己的感受与心情,也可以存储照片或者给喜欢的说说点赞.发表评论等,可以说这是一个将QQ空间从QQ里独立出来的软件.作为一个娱乐性的软件,它的功能还 ...

  8. OpenCV 亚像素级的角点检测

    #include "opencv2/highgui/highgui.hpp" #include "opencv2/imgproc/imgproc.hpp" #i ...

  9. Django常见错误总结

    1 ImportError: No module named 'MySQLdb' 解决方法: . 安装pymysql模块 . 在app的__init__.py文件中写入以下内容 import pymy ...

  10. java枚举与常量类的区别

    1)枚举型可以直接与数据库打交道,我通常使用varchar类型存储,对应的是枚举的常量名.(数据库中好像也有枚举类型,不过也没用过) 2) switch语句支持枚举型,当switch使用int.Str ...