首先介绍一下我们的主角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/…
