首先介绍一下我们的主角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. spring自定义controller全局异常拦截

    --异常类可以按需要自定义package com.dhht.wechat.exception; import com.alibaba.fastjson.JSONObject;import org.sp ...

  2. .net core ioc

    -------------------------------------- 2. ---------------------------- -----------aop

  3. linux上部署jenkins

    http://www.pianshen.com/article/1133171043/相关jenkins链接 下载jenkins的war包:https://blog.csdn.net/Aaron_Zh ...

  4. 如何查看Linux系统下程序运行时使用的库？

    Linux系统下程序运行会实时的用到相关动态库,某些场景下,比如需要裁剪不必要的动态库时,就需要查看哪些动态库被用到了. 以运行VLC为例. VLC开始运行后,首先查看vlc的PID,比如这次查到的V ...

  5. Hibernate之Query.uniqueResult()结果为数值的注意事项

    在日常练习中使用Query.uniqueResult()获取查询总数量,想当然的把返回结果值直接强转成Integer类型,实现运行报错,具体代码如下: 控制台错误信息如下: 返回值为Long型,使用时 ...

  6. numpy.ravel() 与 numpy.flatten()

    两者都可实现将多维数组降位一维的功能 numpy.flatten()返回拷贝,对拷贝所做的修改不会影响原始矩阵 numpy.ravel()返回视图,会影响原始矩阵 1)ravel() In [16]: ...

  7. 学习python-20191230（1）-Python Flask高级编程开发鱼书_第04章_应用、蓝图与视图函数

    视频06: 1.自动导包快捷键——默认为alt + enter 键组合          选中的字符由小写变为大写——Ctrl + Shift + U键组合 2.DataRequired()——防止用 ...

  8. jQuery包装

    1. jQuery包装多个选择器的click事件 // "告警等级"选择 $("#filter_level_1, #filter_level_2, #filter_lev ...

  9. leetcode第24题：两两交换链表中的节点

    通过分析,这属于数据结构类型题目,但涉及到多次交换,也需要算法知识. 首先,我想的是,将链表中节点相互交换. class Solution: def swapPairs(self, head: Lis ...

  10. Mysql的分页查询语句的性能分析

    MySql分页sql语句,如果和MSSQL的TOP语法相比,那么MySQL的LIMIT语法要显得优雅了许多.使用它来分页是再自然不过的事情了. 1.1最基本的分页方式: 在中小数据量的情况下,这样的S ...