ECharts调用笔记
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、三种方式引入文件
1、模块化包引入
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
注：由于echarts依赖底层zrender，你需要同时下载zrender到本地
2、模块化单文件引入(推荐)
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
dist（文件夹）: 经过合并、压缩的单文件
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹）: echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）echarts-scatter.js : 散点图
echarts-k.js : K线图
echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）echarts-radar.js : 雷达图
echarts-map.js : 地图
echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
echarts-gauge.js : 仪表盘
echarts-eventRiver.js : 事件河流图
source（文件夹）: 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
注：动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
3、标签式单文件引入
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
注：标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：echarts.config = require('echarts/config')，zrender.tool.color = require('zrender/tool/color')
dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试
二、参数说明
1.timeline：时间轴，每个图表最多仅有一个时间轴控件
2.title:标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
3.toolbox:工具箱，每个图表最多仅有一个工具箱
4.tooltip:提示框，鼠标悬浮交互时的信息提示
触发类型：
5.legend:图例，每个图表最多仅有一个图例
6.dataRange:值域选择，每个图表最多仅有一个值域控件
7.dataZoom:数据区域缩放。
与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效
8.roamController:缩放漫游组件，仅对地图有效
9.grid:直角坐标系内绘图网格
10.axis:坐标轴有三种类型，类目型、数值型和时间型，他们的区别在于：
类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标
数值型：需要指定数值区间，不指定时则自定计算数值范围，坐标轴内包含数值区间内容全部坐标
时间型：时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同自动切换需要显示的时间粒度
11.series:数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
三、图表类型说明
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
单图表类型：line
折线图堆积折线图
单图表类型：bar
柱形图堆
积
柱
形
图
条
形
图
堆
积
条
形
图
单图表类型：scatter
散点图单图表类型：k
单图表类型：pie
饼图单图表类型：radar
单图表类型：chord
和弦图单图表类型：force
单图表类型：map
中国地图
单图表类型：gauge
仪表盘单图表类型：funnel
单图表类型：eventRiver
事件河流图单图表类型：treemap
单图表类型：venn
韦恩图类型。