1,首先声明,一下的操作基本上都是基于3.0以上的版本
2,去Echarts官网上下载所需要的原材料:Echarts的js文件,以及可能会用的Map的js或json文件,然后放入项目中,在对应的jsp或html中引入
然后需要创建一个div,用于承载将来的报表图片
例如:<div id="echart" style="width: 700px;height: 600px;margin-left: 80px;margin-top: 50px;"></div>
3,对于非地图一类的报表文件操作基本如下
var mychar = echarts.init(document.getElementById("echart"));
mychar.setOption(option);
其中的option为报表所依赖的数据的json载体,在这个json中包含有具体的报表类型的设置:series的type属性
例如:一个柱图的报表的option
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
triggerOn:'click'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
4,下面是关于Map格式的操作,首先这部分操作不同于上面的报表,他的地图操作需要引入所对应地图的js或json文件
如果下载的是地图的json文件
var mychar = echarts.init(document.getElementById("echart"));
$.get(url+"/js/map/beijing.json",function(json){ //前边的部分为地图json文件位置
echarts.registerMap('beijing',json); //第一个参数为map的具体类型即什么的地图,第二个参数为上一行function的参数
mychar.setOption(JSON.parse(sj)); //括号里面为地图的数据的json
});
如果下载的是地图的js文件
则需要以引入js的方式先将地图的js引入
<script type="text/javascript" src="${pageContext.request.contextPath}/js/map/china.js"></script>
var mychar = echarts.init(document.getElementById("echart"));
mychar.setOption(); //option中参数即为地图的数据的json,其中地图的类型也在里面进行设置,比如此处引入china.js 所以需要设置series的mapType为china