Echar通常用作统计图表的制作:
可以用很简单的代码对报表的实现。
不多说 开始实践:
首先:html 代码:
js代码:
var myChart = echarts.init(document.getElementById('showEchartBarChart'));
$.ajax({
url:url_prefix+'/administrator/manuscriptManagement/overview/manuscriptInfos',
async:false,
type: "GET",
dataType:'json',
data : {
"year":year,
"month":monthValue,
"week":weekValue
},
success:function(data, textStatus, jqXHR){
let option_up = {
tooltip : {
trigger: 'item',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['投稿数','通过率(%)','暴力','色情','侵权','政治敏感','违反平台协议','其他']
},
calculable : true,
xAxis : [
{
type : 'category',
data : data.data.time_shaft
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'投稿数',
barMaxWidth:40,
type:'bar',
data:data.data.manuscript_count
},
{
name:'通过率(%)',
barMaxWidth:40,
type:'bar',
data:data.data.passRate
},
{
name:'暴力',
barMaxWidth:40,
type:'bar',
stack: '退稿原因',
data:data.data.violence_count
},
{
name:'色情',
barMaxWidth:40,
type:'bar',
stack: '退稿原因',
data:data.data.eroticism_count
},
{
name:'侵权',
barMaxWidth:40,
type:'bar',
stack: '退稿原因',
data:data.data.tort_count
},
{
name:'政治敏感',
barMaxWidth:40,
type:'bar',
stack: '退稿原因',
data:data.data.sensitivity_count
},
{
name:'违反平台协议',
barMaxWidth:40,
type:'bar',
stack: '退稿原因',
data:data.data.violate_count
},
{
name:'其他',
type:'bar',
stack: '退稿原因',
barMaxWidth:40,
data:data.data.other_count
}
]
};
myChart_up.setOption(option_up);
let option = {
title : {
text: '投稿排行top5'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['投稿数']
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : data.data.topFive_name
}
],
series : [
{
name:'投稿数',
type:'bar',
barMaxWidth:40,
data:data.data.topFive_count
}
]
};
myChart.setOption(option);
$('.loading').hide();
},
error :function (XMLHttpRequest, textStatus, errorThrown) {
}
});
通过ajax获取后台的数据 拼凑到echar 需要的格式option中,然后设置到div中 即可 option的格式可以参见echar的例子以及帮助文档
http://echarts.baidu.com/echarts2/doc/example.html(示例)
http://echarts.baidu.com/echarts2/doc/doc.html(文档)
效果:
设置窗口自适应页面:
window.onresize = function(){
myChart.resize();
myChart_up.resize();
}