1. 获取 ECharts
可以通过以下几种方式获取 ECharts。
-
从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
-
在 ECharts 的 GitHub 获取。
-
通过 npm 获取 echarts，
npm install echarts --save -
通过 jsDelivr 等 CDN 引入
2. 引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
3. 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
image.png
说明：
image.png
echarts
全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者在 AMD 环境中通过 require('echarts') 获得。
image.png
创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
参数
-
dom
实例容器，一般是一个具有高宽的div元素。注：如果
div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。ECharts 3 中支持直接使用
canvas元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 echartsInstance.getDataURL 生成图片链接相比可以支持图表的实时刷新。 -
theme
应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。 -
opts
附加参数。有下面几个可选项：-
devicePixelRatio
设备像素比，默认取浏览器的值window.devicePixelRatio。 -
renderer
渲染器，支持'canvas'或者'svg'。参见 使用 Canvas 或者 SVG 渲染。 -
width
可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的宽度。 -
height
可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取dom（实例容器）的高度。
-
echartsInstance
通过 echarts.init 创建的实例。
image.png
image.png
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过
setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
image.png
注： ECharts 2.x 中的通过 addData , setSeries 方法设置配置项的方式将不再支持，在 ECharts 3 中统一使用 setOption，可以参考上面示例。
参数：
调用方式：
chart.setOption(option, notMerge, lazyUpdate);
或者
chart.setOption(option, {
notMerge: ...,
lazyUpdate: ...,
silent: ...
});
-
option
图表的配置项和数据，具体见配置项手册。 -
notMerge
可选，是否不跟之前设置的option进行合并，默认为false，即合并。 -
lazyUpdate
可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。 -
silent
可选，阻止调用setOption时抛出事件，默认为false，即抛出事件。
网友评论