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>
效果如下:
