您的位置：首页 > Web前端

Web前端echarts插件的基础使用，创建报表组件。

2016-09-11 13:36 495 查看
ECharts介绍

本文介绍的是2.0的版本，3.0版本已经出来了。

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

名称解释

yAxis
名词描述
chart是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
xAxis直角坐标系中的横轴，通常并默认为类目型
直角坐标系中的纵轴，通常并默认为数值型
grid直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend图例，表述数据和图形的关联
dataRange值域选择，常用于展现地域数据时选择值域范围
dataZoom数据区域缩放，常用于展现大量数据时选择可视范围
roamController缩放漫游组件，搭配地图使用
toolbox辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip气泡提示框，常用于展现更详细的数据
timeline时间轴，常用于展现同一系列数据在时间维度上的多份数据
series数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
图表名称

　　

line折线图，堆积折线图，区域图，堆积区域图。
bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
kK线图，蜡烛图。常用于展现股票交易数据。
pie饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar雷达图，填充雷达图。高维度数据展现的常用图表。
chord和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force力导布局图。常用于展现复杂关系网络聚类布局。
map地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。
gauge仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn韦恩图。用于展示集合以及它们的交集。
tree树图。用于展示树形数据结构各节点的层级关系
wordCloud词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容
引入方式

　　引入ECharts有几种方式，推荐大家使用模块化单文件引入。

<body>
<div id="myChart" style="height:600px;"></div>//这里必须设置div的宽度，否则不会显示
...
<script src="./js/echarts.js"></script>//这里放入你js文件的地址
<script type="text/javascript">
require.config({                 //配置require.config文件
paths: {
echarts: './js/dist'
}
});
</script>
</body>
require.config配置好可以动态加载ECharts

<body>
<div id="myChart" style="height:500px;"></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'     //这里还可以添加其他的图表
　　　　　　　　　　......code
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
总结
　　创建一个显示图标的容器（必须设置宽度高度）
　　引入EChartsJS文件可以通过script标签引入
　　配置require.config文件（加载EChartsjs文件地址）
　　动态加载ECharts所需要的图标在回调函数里面使用（如果是在同一个页面已经加载了ECharts图标在使用require('echarts').init(“id”)）

以上是ECharts使用方法，是根据ECharts官网介绍来写的，还有很多方法没有列出来，可以参考ECharts官网---------》http://echarts.baidu.com/echarts2/index.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航