首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts（1）

CSDN开源夏令营 百度数据可视化实践 ECharts（1）

2024-07-11 18:56:44   216人阅读

总体规划
（1）选题：
通过了解林峰老师的专题中国主要城市空气质量实况、中国经济十年时空漫游和中国人口流动大潮，涉及了人口、经济和民生等方面的内容，在这里我选择中国高考，作为我的切入点。
高考，一个永恒的话题，是一场你我都值得经历的一场无硝烟的战争。有人曾说：每个高考的孩子都背负着几代人的希望，每个高考的背后都有众多关注的眼睛。人生能有几回搏？虽然失去了许多，但终究会收获很多。
（2）题目
   2006-2014高考各省市报名人数及录取人数汇总专题
（3）搜集数据资料
工欲善其事，必先利其器。数据的正确性和规范性将会严重影响数据的走势。本来打算搜集2004-2014年的数据的各省市报名人数和录取人数的，但是2004、2005年数据很难收集到，为了保证数据的准确性，所以将数据选择为2006-2014年报名人数和录取人数的作为专题的数据。
例如北京市的资料：

（4）初步总体规划
通过了解ECharts的基本类型，选择适合ECharts图将全国各省市高考报名和录取人数呈现出来。我画出了一个初稿，具体内容还会不断修改，初稿如下。


（5）解读EChartsAPI
     5.1 名词解释
     基本名词

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

     图表名词
 
名词描述
line折线图，堆积折线图，区域图，堆积区域图。
bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
kK线图，蜡烛图。常用于展现股票交易数据。
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 模块化单文件引入
   如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发，这种方式只是我们预先帮你把常用图表组合连接合并在一起，你只需一个符合AMD规范的加载器，同时引入一个echarts相关js即可。如你所发现的，build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：

echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

   配置如下：

//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);
    }
);

6.3标签式单文件引入
如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，但是需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require(‘echarts/config‘)， zrender.tool.color = require(‘zrender/tool/color‘)
//from echarts example
<script src=http://www.mamicode.com/"example/www2/js/echarts-plain.js"></script>>
（7）代码解析
  首先实现单个城市的报名人数、录取人数和录取比例折线图和柱状图混搭显示，以北京历年高考报名人数和录取人数为例（2014年录取人数尚未知道）。
  
                                                                 柱状图和折线图的混搭 （01系列）
  
柱状图和折线图的混搭 （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>

好了，本周就总结到这里，搜集整理数据工作量还是挺大的，更加具体的东西请大家参加官方文档，谢谢！


联系
我们