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.效果图如下,