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

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

2024-07-12 18:06:26   225人阅读

将ECharts引入项目中的几种详细方法讲解

（1）打好基本功
   首先感谢林峰老师！给我们的悉心指导。我们之所以学习ECharts和Zrender图表组件，为了就是能够将图表应用到我们的实际情况中 来，进而让图表的战士能给我们一种更加人性化的方式呈现给用户。所有我们必须熟悉ECharts中相关组件。下面的例子都以line为例。
（2）将ECharts引入项目共有三种方式
   2.1)第一种方式-模块化包引入

  模块化包引入模式也可以称为开发模式，是开发时最好的方法，不管是开发echarts还是用echarts都是，因为文件未被合并压缩，所以有错误的话能立马定位到出错的地方从而让你快速的知道可能问题会出在哪里。但是这个并不适合上线，文件太大，加载太慢。这样上网会被骂死的。
  首先下载Zrender到本地，和ECharts放在同一目录下。

 

   在echarts/doc/example/www文件中建立一个HTML文件，所使用的js文件都包含在js文件中。
   包含echarts.js、echarts-map.js、esl.js三个，其实只用到两个，echarts-map.js并不用。
Html代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <title>ECharts · Example</title>
</head>

<body>
	<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script src="js/esl.js"></script>
    <script type="text/javascript">
        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: '../../../src',
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    //location: 'http://ecomfe.github.io/zrender/src',
                    location: '../../../../zrender/src',
                    main: 'zrender'
                }
            ]
        });
        
        var option = {
				//图表标题
				title:{
					text:"未来一周气温变化",
					subtext:"纯属虚构"
				},
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
						boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
							formatter: '{value} °C'
                    }
					}
                ],
				series : [
				{
					name:'最高气温',
					type:'line',
					data:[11, 11, 15, 13, 12, 13, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				},
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					markPoint : {
						data : [
							{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine : {
						data : [
							{type : 'average', name : '平均值'}
						]
					}
				}
			]
        };
        
        require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                myChart.setOption(option);
            }
        )
    </script>
</body>
</html>
2.2)第二种方式-模块化单文件引入（推荐）

在这里我们只是用line图表，其他的不用，如果你不用的话打包在一起就非常浪费，这时候就可以通过build目录下的build.js文件来构建一个更加贴身的echarts单文件。
总结来说模块化如何引入ECharts，你都需要如下4步：
1、引入一个模块加载器，如esl.js或者require.js
2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明
4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require(‘echarts‘).init(dom)就行）

首先下载node下载完成后，安装好node。
打开build文件夹，看到如下文件：

这里我已经建立了一个新的build01.bat 就是单一生成echarts.js

node build.js optimize=true plain=false exclude=map output=echarts.js

当然也可以在终端里通过命令行参数方式运行 node.js构建脚本。

具体语法：

node build.js optimize=true exclude=map,force,line output=echarts.js plain=true

名称描述
optimize是否压缩, 默认false
exclude不打包的图表，多个图表使用逗号分割, 默认使用所有图表
output输出打包地址，默认为echarts.js
plain是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false

config-tpl.js文件修改为：
{
    // appDir: './',
    baseUrl: '../src',
    name: 'echarts',
    packages: [
        {
            name: 'zrender',
            location: '../../zrender/src',
            main: 'zrender'
        },
        {
            name: 'echarts',
            location: '.',
            main: 'echarts'
        }
    ],
    include:[
        'echarts/chart/line'
    ],
    out: 'echarts.js'
}

完成后，将echarts.js拷贝到doc/example/www/js文件中，并将原有的覆盖。
新建html文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="js/esl.js"></script>
</head>

<body>
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script type="text/javascript">
    require.config({
        paths:{ 
            echarts:'./js/echarts',
            'echarts/chart/line': './js/echarts'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
				title:{
					text:"未来一周气温变化",
					subtext:"纯属虚构"
				},
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
						boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
							formatter: '{value} °C'
                    }
					}
                ],
				series : [
				{
					name:'最高气温',
					type:'line',
					data:[11, 11, 15, 13, 12, 13, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				},
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					markPoint : {
						data : [
							{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine : {
						data : [
							{type : 'average', name : '平均值'}
						]
					}
				}
			]
            });
        }
    );
    </script>
</body>
</html>
2.2)第三种方式-标签式单文件引入（推荐）
自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入。
可以直接引入的单文件如下：
1、echarts-plain.js : 经过压缩，包含除地图外的全部图表
2、echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
3、echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
4、echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
 方法：还是在www文件夹下建立一个html文件，当然位置可以随意放，用到的js文件是在百度ECharts的服务器上的。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <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>
</body>
	<!--Step:1 Import echarts-plain.js or echarts-plain-map.js-->
	<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
	<script src="http://echarts.baidu.com/doc/example/www2/js/echarts-plain-map.js"></script>
	<script type="text/javascript">
    // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
    // Step:3 echarts和zrender被echarts-plain.js写入为全局接口
    var myChart = echarts.init(document.getElementById('main'));
          myChart.setOption({
				//图表标题
				title:{
					text:"未来一周气温变化",
					subtext:"纯属虚构"
				},
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
						boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
							formatter: '{value} °C'
                    }
					}
                ],
				series : [
				{
					name:'最高气温',
					type:'line',
					data:[11, 11, 15, 13, 12, 13, 10],
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						data : [
							{type : 'average', name: '平均值'}
						]
					}
				},
				{
					name:'最低气温',
					type:'line',
					data:[1, -2, 2, 5, 3, 2, 0],
					markPoint : {
						data : [
							{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
						]
					},
					markLine : {
						data : [
							{type : 'average', name : '平均值'}
						]
					}
				}
			]
            });
    </script>
</html>

总结：
三种方法的最终的运行结果都一样，如下图所示：


 


联系
我们