1.引入js文件----echart.js
2.根據year軟動態生成圖標
function chartExport(year)
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main2'));//頁面上的div <div id="main2" class="box-body table-responsive chart-view">
var dataJson = {"KMDriver":[0,0,0,0,0,0,0,0,0,0,0,0],"MVAF":[0,0,0,0,0,0,0,0,0,0,0,0],"MVAFtarger":[0,0,0,0,0,0,0,0,0,0,0,0]};
var MVAFtarget;
//根據入參year動態請求數據
syncData("/weekly/getstatmonthly/" + year,"GET","",function(success,data){
if(success){
console.info(data);
console.info(JSON.stringify(data));
if(data != undefined){
$.each(data, function(i, ele){
dataJson["KMDriver"][ele.month1 - 1] = ele.KMDriver;
dataJson["MVAF"][ele.month1 - 1] = ele.MVAF;
MVAFtarget = ele.MVAFtarget;
});
}
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['KM Driver','MVAF','MVAF targer']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['1','2','3','4','5','6','7','8','9','10','11','12']
}
],
yAxis : [//此處爲數組即會有兩個y軸
{
type : 'value'
}
,
{
type : 'value'
}
],
series : [
{
name:'KM Driver',
type:'line',
data:dataJson["KMDriver"]
},
{
name:'MVAF targer',
type:'line',
yAxisIndex: 1,//默認的是在第一個y抽,此處指定對應數據爲第二個y軸
data:dataJson["MVAFtarger"]
}
,
{
name:'MVAF',
type:'line',
yAxisIndex: 1,
data:dataJson["MVAF"]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
} else {
failureAlert(data.message);
}
});
}
);
}
3.效果
