我在调一个项目的数据图形 用的是echarts折线还有柱状图,但是在调试颜色还有加入datazoom组件的时候,在页面根本不起作用
代码如下
<script type="text/javascript">
require.config({
paths: {
echarts: '${ctx}/common/echarts-2.2.7/build/dist'
}
});
//Page Init
function initDataView() {
var msgStartTime=document.getElementById("startTime").value;
var msgEndTime=document.getElementById("endTime").value;
var type=document.getElementById("type").value;
// 使用
require([
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['当天投单量','历史同期均值']
},
xAxis : [
{
type : 'category',
data : (function(){
var arr=new Array();
$.ajax({
type : "post",
async : false, //同步执行
url : "${ctx}/cartquantityArray/querycarTqArray.do",
data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
dataType : "json", //返回数据形式为json
contentType : "application/json; charset=gbk",
success : function(result) {
if (result) {
var obj = eval('(' + result + ')');
for ( var i = 0; i < obj.length; i++) {
var o = new Object();
arr.push(obj[i].comCode);
}
}
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : 'value'
}
],
dataZoom: [
{ // 这个dataZoom组件,默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
{ // 这个dataZoom组件,也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
series : [
{
"name":'当天投单量',
"type":"bar",
"data": itemStyle:{
normal:{color:'gray'}
}
(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "${ctx}/cartquantityArray/querycarTqArray.do",
data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
var obj = eval('(' + result + ')');
for ( var i = 0; i < obj.length; i++) {
if(type=="car"){
arr.push(obj[i].cartquantity);
}else if(type=="prp"){
arr.push(obj[i].prpTQuantity);
}
}
}
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
},
{
"name":"历史同期均值",
"type":"bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "${ctx}/cartquantityArray/querycarTqArray.do",
data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
var obj = eval('(' + result + ')');
for ( var i = 0; i < obj.length; i++) {
if(type=="car"){
arr.push(obj[i].hisAverage);
}else if(type=="prp"){
arr.push(obj[i].aveprptq);
}
}
}
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
initAllSelectUi();
}
//Query Data
function executeQuery(pageNo, pageSize) {
initDataView();
}
//init on load
YAHOO.util.Event.addListener(window, 'load', init);
</script>
用highcharts
质量更高