echarts的引入和使用

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

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

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

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

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

<div id="echarts_post" style="width:300px;height:400px;"></div>

在javascript块引入,src按需修改

<script type="text/javascript" src="${ctx}/res/js/echarts-all.js"></script>

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

<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" src="${ctx}/res/js/echarts/echarts.js"></script>
附上代码
<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>


效果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值