echarts的引入和使用

最新推荐文章于 2025-07-11 10:20:42 发布

原创最新推荐文章于 2025-07-11 10:20:42 发布 · 4.7w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#web echarts

Web前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了ECharts图表库的两种引入方式：标签式单文件引入和模块化单文件引入，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入方式一，标签式单文件引入

直接引入echarts-all.js，使用起来比较简单

在jsp或html页面放一个div，注意这个放echarts的div一定要给宽度和高度

在javascript块引入，src按需修改

一个简单的例子，附上代码

<script type="text/javascript">
$(function(){
	postChart();
});
//学员职务统计图
function postChart(){
	//这个echarts对象应该是在echarts-all.js文件里面初始化好的，所以直接拿来用，
	var myChart = echarts.init(document.getElementById('echarts_post')); 
	var option = {
	    title : {
	        text: '学员职务统计',
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:["科员","副科级","正科级","副处级","处级"]
	    },
	  
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ["科员","副科级","正科级","副处级","处级"],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'人数',
	            type:'bar',
	            data:[13,9,5,4,2],
	        },
	        
	    ]
	};
	myChart.setOption(option); 
}
</script>

2.引入方式二，模块化单文件引入

引入echarts包下的echarts.js

在项目中加入echarts开发包，目录结构如下：

引入echarts包下的echarts.js,src按需修改

附上代码

<script type="text/javascript">
var my_ec;//自定义变量，用来保存echarts对象
$(function(){
	//路径配置
	require.config({  
        paths:{   
            "echarts" : "/proj/res/js/echarts",  //proj是我项目的名称
        }  
    });  
	//使用
	require(  
       [  
           "echarts",  
           "echarts/chart/pie", // 使用饼图就加载pie模块，按需加载  
           "echarts/chart/bar", // 使用柱状图就加载bar模块，按需加载
       ],
       function(ec){
    	   my_ec = ec;//将echarts对象赋值给自定义的变量
    	   postChart();
    	}
    );
});
//学员职务统计图
function postChart(){
	var myChart = my_ec.init(document.getElementById('echarts_post')); 
	var option = {
	    title : {
	        text: '学员职务统计',
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:["学员人数"],
	        y : "bottom",
	    },
	  
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ["科员","副科级","正科级","副处级","处级"],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:"学员人数",
	            type:'bar',
	            data:[13,9,5,4,2],
	        },
	        
	    ]
	};
	
	myChart.setOption(option); 
}
</script>

效果如下：