重点: 后台返回的是数组,获取返回字符串,封装成js数组对象,否则echat数据无效
自定义Y轴坐标,Y轴的比例数组跟,柱状图的MAX值与MIX值,必须设置,否则图标无效
<td class="tab-border">
<div id="passenger_yoy_main1" style="width: 24vw;height:25vh;"></div>
</td>
//Y轴比例数组
var scaleArr=new Array([10, 20, 30, 40, 50, 60, 70, 80]);
//柱状图最大值
var scaleMaxY=80;
//柱状图刻度值
var scaleSplitNumber=9;
//环比查询
function momDateList(id,searchDate) {
//环比的Id
var searchId=id.replace(/[^0-9]/ig,"");
//构建柱状图
var passengerMomBarChartMainChart = echarts.init(document.getElementById('passenger_mom_barchart_main'+searchId));
//构建图表
var passengerMainChart = echarts.init(document.getElementById("passenger_mom_main"+searchId));
//加载数据时的圈圈
passengerMainChart.showLoading();
passengerMomBarChartMainChart.showLoading();
var option ={};
$.ajax({
url: "#(path)/manager/censusManager/dtStatisticBusiness/AA",
data: {
searchColumn: searchColumn,
searchDate: searchDate
},
type: "POST",
success: function (data1) {
//隐藏圈圈
passengerMainChart.hideLoading();
passengerMomBarChartMainChart.hideLoading();
if (data1.msg == "success") {
var option =
{
tooltip: {
trigger: 'item',//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
// formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
// name: '访问来源',
type: 'pie',
radius: '40%',
center: ['50%', '50%'],
data: data1.dataList,
}
]
};
passengerMainChart.setOption(option);
//将总量存到数组中
var initBarChatArr=new Array(data1.synthesizeNum);
var barChartOption = {
grid:{
//left:'8%',
//right:'0',
bottom:'1%',
//containLabel:true//常用于『防止标签溢出』的场景
},
xAxis: {
type: 'category',
data: ['Mon'],
show:false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick:{
show:false//不显示坐标轴刻度线
},
axisLine: {
show: false,//不显示坐标轴线
},
axisLabel: {
show: false,//不显示坐标轴上的文字
}
},
yAxis: {
data: scaleArr, //动态刻度表
type: 'value',
max: scaleMaxY, //动态设置最大值 一定要设置,否则图表失效
min: 0, //最小值
splitNumber:scaleSplitNumber, //9个刻度线,也就是8等分(刻度线data-1)
show: false,
splitLine: {
show: false
}
},
series: [{
data: initBarChatArr,
type: 'bar',
barWidth:20,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
},
}]
};
passengerMomBarChartMainChart.setOption(barChartOption);
}
}
})
}