首先介绍一下我们的主角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. Codeforces Round #572 (Div. 1) 差E

    Codeforces Round #572 (Div. 1) A2 题意:给一棵树,带边权,互不相同且为偶数.每次操作是选两个叶子然后在路径上同时加一个数.初始边权全是0,求一个操作序列使得最终边权与 ...

  2. Ubuntu navicat试用到期及乱码问题

    对于Ubuntu18．04,navicat试用过期,我这采用的是删掉记录,使其重新试用 网上有的说删掉/home/.navicat64/system.reg,有的又加上删除.update-timest ...

  3. Tomcat爆出严重漏洞，附影响版本及解决方案

    昨天,群里聊嗨了.大家都在远程办公,却都急急忙忙的升级线上的 Tomcat 版本,原因就是 Tomcat 被曝出了严重的漏洞,几乎涉及到所有的版本. 一.漏洞原理具体来说就是 Apache Tomca ...

  4. QuickSort（快速排序）原理及C++代码实现

    快速排序可以说是最重要的排序,其中延伸的思想和技巧非常值得我们学习. 快速排序也使用了分治的思想,原理如下: 分解:数组A[p..r]被划分为两个(可能为空)子数组A[p..q-1]和A[q+1..r ...

  5. 96）PHP，文件上传（2）

    (1)那么既然看到文件即使上传成功,但是只是在脚本周期内有效,脚本只要结束(脚本结束其实很快的),文件就会自动消失,那么怎么才能永久存储文件呢: 函数: Move_uploaded_file(上传临时 ...

  6. 68）PHP，cookie的详细属性和有效期

    (1)cookie的有效期: 默认:会话周期结束(就是浏览器关闭),默认情况下,cookie会在浏览器关闭时失效,这种cookie是 临时cookie或者叫会话. 支持设置有效期,setcookie的 ...

  7. spring boot 测试插件使用及result风格实例1&打包启动

    本节主要内容: 1:spring boot 小插件使用 2:构建第一个简单的result风格的实例并访问 3:将项目打成jar包后启动并访问. 一:添加boot devtools插件: 执行完成后,查 ...

  8. 简单php递归无限mysql记录

    <?php header('content-type:text/html;charget=gb2312'); $d='';     get_title($d,0,'='); function g ...

  9. 精心收集的Hadoop学习资料

    1.<Hadoop技术内幕:深入解析Hadoop Common和HDFS>下载地址:http://download.csdn.net/detail/w397090770/6643259. ...

  10. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...