离线使用echarts及一些细节

离线部署ECharts详解与实践

最新推荐文章于 2025-10-06 06:27:37 发布

原创最新推荐文章于 2025-10-06 06:27:37 发布 · 9.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js

php 同时被 2 个专栏收录

7 篇文章

订阅专栏

web

5 篇文章

订阅专栏

本文介绍了如何离线使用ECharts库，通过将ECharts的zip包引入项目文件夹，并直接引用dist目录下的js文件实现离线部署。详细步骤包括在配置中添加对`echarts-all.js`和`echarts.js`的引用，从而轻松创建和定制图表。

最近要做图表，用js起来太麻烦，所以就找些开源的库来用，发现echarts挺不错，

echarts的文档把所有东西都说的很明白了，直接下载zip包，要是想离线使用的话只需要引用下载包里面的dist文件夹即可

首先把下载的包放到项目文件夹，这里使用 ./ 来引用

直接在配置中引用：

 require.config({
            paths: {
                //echarts: 'http://echarts.baidu.com/build/dist'
                echarts:'./echarts-2.2.0/dist/' 
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],

其中注释掉的是在线引用百度的echarts，下面则是引用离线的，我把 D:\Download\echarts-2.1.10\build\source路径里的文件都放到我项目的echarts文件夹下就可以正常使用了

可以按照图表的要求设置各项属性

var option = {
						backgroundColor:'#888888',   //设置图表的背景颜色
						title : {
					        text: '版本最高覆盖率',
					        textStyle:
					        {
					        	color: '#888888',
					        },
					    },
			            tooltip: {
			                show: true
			            },
			            /*
			            legend: {
			                data:['覆盖率']
			            },
			            */
			            xAxis : [
			                {
			                    type : 'category',
			                    name : '版本名称',
			                    data : versionnames,
			                    axisLine : 
								{    // 轴线
									show: true,
									lineStyle: {
										color: 'white',
										//type: 'solid',
										width: 2}
								}
			                }
			            ],
			            yAxis : [
			                {
			                    type : 'value',
			                    name : '覆盖率(%)',
			                    min : 0,
			                    max : 100,
			                    axisLine : 
								{    // 轴线
									show: true,
									lineStyle: {
										color: 'white',
										//type: 'solid',
										width: 2}
								}	                                   
			                }
			            ],
			            series : [
			                {
			                    name : '覆盖率',
			                    type: 'bar',
			                    data : coverages,
			                    itemStyle: {
			                        normal: {
			                        	color: function(params) {
			                                // build a color map as your need.
			                                /*
			                                var colorList = [
			                                  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
			                                   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
			                                   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
			                                ];
			                                return colorList[params.dataIndex]
			                                */
			                                return colo[params.dataIndex];
			                            },
			                            label : {show: true,position:'top',formatter:'{c} %'}
			                        }},
			                }
			            ]
			        };

设置背景颜色，设置数据，设置数据颜色等等，还是很方便的