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