标签：百度 csdn echarts zrender 数据可视化
总体规划
（5）解读EChartsAPI
5.1 名词解释
基本名词
| 名词 | 描述 |
|---|---|
| chart | 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 |
| axis | 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 |
| xAxis | 直角坐标系中的横轴，通常并默认为类目轴 |
| yAxis | 直角坐标系中的纵轴，通常并默认为数值轴 |
| grid | 直角坐标系中除坐标轴外的绘图网格 |
| legend | 图例，表述数据和图形的关联 |
| dataRange | 值域选择，常用于展现地域数据时选择值域范围 |
| dataZoom | 数据区域缩放，常用于展现大数据时选择可视范围 |
| toolbox | 辅助工具箱，辅助功能，如添加标线，框选缩放等 |
| tooltip | 气泡提示框，常用于展现更详细的数据 |
| timeline | 时间轴，常用于展现同一组数据在时间维度上的多份数据 |
| series | 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 |
| 名词 | 描述 |
|---|---|
| line | 折线图，堆积折线图，区域图，堆积区域图。 |
| bar | 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 |
| scatter | 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 |
| k | K线图，蜡烛图。常用于展现股票交易数据。 |
| pie | 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 |
| radar | 雷达图，填充雷达图。高维度数据展现的常用图表。 |
| chord | 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 |
| force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
| map | 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 |
（6）引入Echarts的方式
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
6.1 模块化包引入
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});6.2 模块化单文件引入 配置如下：
//from echarts example
require.config({
paths:{
'echarts':'./js/echarts',
'echarts/chart/bar' : './js/echarts', // 把所需图表指向单文件
'echarts/chart/line': './js/echarts'
}
});require.config配置后后就可以通过动态加载使用echarts。
//from echarts example
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(domMain);
var option = {
...
}
myChart.setOption(option);
}
);//from echarts example
<script src="example/www2/js/echarts-plain.js"></script>
<script>
var myChart = echarts.init(domMain);
var option = {
...
}
myChart.setOption(option);
</script>
柱状图和折线图的混搭 （02系列）
具体步骤：
7.1
下载ECharts地址： http://echarts.baidu.com/
下载ZRender地址：http://ecomfe.github.io/zrender/index.html
7.2
下载ECharts完成后，解压文件，如下图：
选择进入doc文件夹内，如图选择example：
然后再选择www文件夹：
在www文件中选择js文件夹：
其中有三个js文件，需要引入到包：
(1 echarts.js
(2 esl.js :
(3 echarts-map.js
7.3
将js文件夹拷贝出来，在相同的路径下建一个html文件。
beijing.html 代码如下，包含详细注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>高考2006-2014</title>
<!--引入一个模块加载器，如esl.js或者require.js-->
<script src="js/esl.js"></script>
</head>
<body>
<!--准备一个高为500px 宽为浏览器页面的大小的图标容器的, 也可以设为指定值 如:height:500px;width:800px; -->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
//同时加载了地图map,方便后期使用
require.config({
paths:{
echarts:'./js/echarts', //echarts.js的路径
'echarts/chart/bar' : './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map' : './js/echarts-map'
}
});
// 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//图表渲染的容器对象
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
//图表标题
title:{
text:"北京市历年高考报名人数",
subtext:"数据来于新浪高考频道",
//正标题属性设置
textStyle:{
fontSize:18
},
//副标题属性设置
subtextStyle:{
fontSize:12
}
},
//数据提示框配置
tooltip : {
trigger: 'axis' //触发类型，默认触发类型,可选项('item'|'axis')也就是是否共享提示框
},
//图例配置
legend: {
//data:['报名人数','录取人数','报录比例'] //设置图例，每个图表最多仅有一个图例
orient: 'horizontal', // 'vertical'
x: 'center', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
backgroundColor: '#eee',
//borderColor: 'rgba(178,34,34,0.8)', //rgb(0,0,0,0)为默认值
borderWidth: 4,
padding: 10, // [5, 10, 15, 20]
itemGap: 20,
//textStyle: {color: 'red'},
selected: {
'报名人数' : true,
'录取人数' : true,
'录取比例' : true
},
data: [
{
name:'录取比例',
textStyle:{fontWeight:'bold', color:'green'} //修改每一个
},
'报名人数','录取人数'
]
},
//工具箱配置
toolbox: {
show : true, //是否显示工具箱
feature : { //特征
mark : {show: true}, //辅助线标志
dataView : {show: true, readOnly: false}, //数据视图
magicType : {show: true, type: ['line', 'bar']}, //图表类型切换 line:折线图 bar:柱状图
restore : {show: true}, //还原，复位原始图表
saveAsImage : {show: true} //保持文件，图片格式
}
},
calculable : true,
//X轴设置
xAxis : [
{
type : 'category',
name:'年份',
data : ['2006','2007','2008','2009','2010','2011','2012','2013','2014']
}
],
//Y轴设置
yAxis : [
{
type : 'value',
axisLabel:{
formatter:'{value} 万'
},
//name:'人数',
splitArea : {show : true} //分隔区域，默认不显示，属性show控制显示与否
},
//录取比例
{
type:'value',
name : '录取比例',
axisLabel : {
formatter: '{value} %'
}
}
],
//图表Series数据序列配置
series : [
{
name:'报名人数',
type:'bar',
//与横坐标对应 2006、2007、...、2014
data:[10.03, 10.99, 10.37, 10.10, 8.10, 7.60, 7.30, 7.27, 7.05],
//系列中的数据标注内容 series.markPoint
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
//系列中的数据标线内容 series.markLine
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
},
{
name:'录取人数',
type:'bar',
//2014年录取人数还未出来
data:[8.00, 8.09, 8.98, 8.03, 6.79, 6.54, 5.88, 5.88, ],
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
},
{
name:'录取比例',
type:'line',
yAxisIndex: 1,
data:[72.53,73.61,86.59,79.51,83.83,86.05,80.55,80.88],
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
}
]
});
}
);
</script>
</body>
</html>CSDN开源夏令营 百度数据可视化实践 ECharts（1）,布布扣,bubuko.com
CSDN开源夏令营 百度数据可视化实践 ECharts（1）
标签：百度 csdn echarts zrender 数据可视化
原文地址：http://blog.csdn.net/u013476464/article/details/37652619
