First, tell us about our protagonist ECharts
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 **Canvas** 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 is joined to a richer and more interactive features visual effects, and the mobile terminal did depth optimization.
Getting start
Echarts way of introduction
1.npm installation or cnpm
cnpm install echarts --saveThen introduced into the desired module
let echarts = require('echarts/lib/echarts');//引入echarts
require('echarts/lib/chart/bar'); //柱状图
require('echarts/lib/component/tooltip');// 提示框
require('echarts/lib/component/title');//标题组件2. The introduction of a single file ( echarts official website )
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>Use 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>The graph generation follows
note! ! !
Echarts to set the height of the target element
<div id="main" style="height:400px"></div>Otherwise it will error
resize
When faced with a responsive layout aspect is not fixed, certainly squeeze occurs chart or display problems
So we will use the resize Echarts provided (resizing) method
First we look at the future generation Echarts page elements
Each Echarts chart provides a unique ID, we can get this ID Echarts chart corresponding to manipulate
let charId = document.getElementById('main').getAttribute('_echarts_instance_');
echarts.getInstanceById(charId).resize();Of course, if you can get Echarts instance of the object directly, then you can directly manipulate graph corresponding to it! (Examples refers Interface init () returns an object, i.e., the aforementioned code "myChart", return to their non-self get interfaces are supported chained calls)
setTimeout(function (){
window.onresize = function () {
myChart.resize();
}
},200)echarts instance method is very important, because in the practical application of our data charts can not be dead, but dynamic, as an instance method provides a method to dynamically change data.
Note: echarts excerpt from the official website, the original address: HTTP: //echarts.baidu.com/doc / ...