//城市统计--柱形图
var mycity = echarts.init(document.getElementById(
"city_chart"));
// 指定图表的配置项和数据
var city_option = {
tooltip: {},
textStyle: {
color:
"#fff"
},
//沾满div 要采用grid
grid: {
left:
10,
right:
10,
top:
20,
bottom:
25,
containLabel:
true
},
xAxis: [
{
type:
"category",
// name:'额度',
//这是设置的false,就不不显示下方的x轴,默认是true的
show:
true,
//柱体的名字
data: [],
// 改变轴颜色
axisLine: {
lineStyle: {
color:
"#fff"
}
},
axisLabel: {
//字体倾斜
interval:
0,
rotate: -
40,
//改变字体颜色
textStyle: {
color:
"#fff"
}
}
}
],
yAxis: [
{
type:
"value",
axisLabel: {
formatter:
"{value} "
},
//去除网格线
splitLine: {
show:
false
}
}
],
series: [
{
name:
"数量",
type:
"bar",
itemStyle: {
//颜色渐变
normal: {
color:
new echarts.graphic.LinearGradient(
0,
0,
0,
1, [
{
offset:
0,
color:
"rgba(255,255,255,0)"
},
{
offset:
0.5,
color:
"#8CC63F"
},
{
offset:
1,
color:
"#8CC63F"
}
])
}
},
//柱形顶部数值
label: {
show:
true,
position:
"top",
formatter:
"{c}"
},
//设置柱的宽度
barWidth:
20,
data: []
}
]
};
xAxis --- data:[] 是X轴下面的名字
series ---data:[] 是柱形顶部的数据
data:[] 中的数据从后台给的数据中获取
//定义两个数组存放data
var xA = [];
var yB = [];
$.ajax({
url:
"",
type:
"post",
data: {传回去的参数},
crossDomain:
true,
xhrFields: {
withCredentials:
true
},
async:
true,
dataType:
"json",
success:
function (data) {
//循环拿出data中需要的参数
for (
var i =
0; i < data.result.length; i++) {
for (
var j =
0; j < data.result[i].data.length; j++) {
xA.push(data.result[i].data[j].X);
}
}
for (
var i =
0; i < data.result.length; i++) {
for (
var j =
0; j < data.result[i].data.length; j++) {
yB.push(data.result[i].data[j].Y);
}
}
// 使用刚指定的配置项和数据显示图表。
mycity.setOption(city_option);
mycity.setOption({
xAxis: {
data: xA
},
series: [
{
name:
"数量",
data: yB
}
]
});
}
});
}
如果
axisLabel 下面的数值为正值,X轴字体则为下面这样
axisLabel: {
interval:0,
rotate:40
},