首先介绍一下我们的主角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语言开发：存储类

    { int mount; auto int month; } { register int miles; } #include <stdio.h> /* 函数声明 */ void func ...

  2. mysql按表字段内容长度排序

    今天遇到个需求如下: 查询一下新的业务是否正常入库,遇到的问题是新旧业务用的是同一个字段标识,唯一不同的是字段里内容的长度不同 查询方式如下,mysql按表字段内容长度排序 SELECT * FROM ...

  3. 吴裕雄--天生自然python学习笔记：pandas模块读取 Data Frame 数据

    读取行数据 读取一个列数据的语法为: 例如,读取所有学生自然科目的成绩 : import pandas as pd datas = [[65,92,78,83,70], [90,72,76,93,56 ...

  4. 安装与使用django-restframework

    django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用 在settings.py中注册: INSTA ...

  5. cs231n spring 2017 lecture6 Training Neural Networks I

    1. 激活函数: 1)Sigmoid,σ(x)=1/(1+e-x).把输出压缩在(0,1)之间.几个问题:(a)x比较大或者比较小(比如10,-10),sigmoid的曲线很平缓,导数为0,在用链式法 ...

  6. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码

    Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

  7. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  8. emacs 入门第一课：Emacs里的基本概念

    Table of Contents 无聊的开场白 buffer(缓冲区) window(窗口)与frame Emacs的mode Emacs Lisp 函数function.命令command.键绑定 ...

  9. [LC] 221. Maximal Square

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...

  10. 史无前例的KDD 2014大会记

    2014大会记" title="史无前例的KDD 2014大会记"> 作者:蒋朦 微软亚洲研究院实习生 创造多项纪录的KDD 2014 ACM SIGKDD 国际会 ...