1.div代碼如下,
<div class="col-xs-12 col-sm-12 col-md-12">
<div id="main3" style="width:700px;height:450px;display: none"></div>
<img src="" id="img3" style="width: 100%;height: 450px" >
</div>
2.ajax請求根據數據作柱狀圖,js代碼如下,
var data_x_3 = [];
var data_y_3 = [];
Common.ajaxRestRequest({
url: "",
data: {
"beginDate": $("#beginDate", getElementContext()).val(),
"endDate": $("#endDate", getElementContext()).val()
},
type: 'GET',
async: false,
sucessCallBack: function (data) {
debugger;
for (var i = 0; i < data.length; i++) {
var obj = new Object();
obj.name = data[i].date;
obj.value = data[i].order_count;
data_x_3[i] = obj.name;
data_y_3[i] = obj.value;
}
}
});
var myChart3 = echarts.init(document.getElementById('main3'));
$('#main3', container).width($('#main3', container).width());
$('#main3', container).height($('#main3', container).height());
var option3 = {
color: ['#3398DB'],
title: {
text: '測試',
x: 'center',
textStyle: {
//文字顏色
color: 'blue',
//字體風格,'normal','italic','oblique'
fontStyle: 'normal',
//字體粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'bold',
//字體系列
fontFamily: 'sans-serif',
//字體大小
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器,座標軸觸發有效
type: 'shadow' // 默認爲直線,可選爲:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: data_x_3,
axisTick: {
alignWithLabel: true
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
minInterval: 1
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: data_y_3
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart3.setOption(option3);
setTimeout(function () {
var baseCanvas3 = $("#main3").find("canvas")[0];
document.getElementById('img3').src = baseCanvas3.toDataURL();
}, 1000);
3.效果圖如下,