Echarts--柱形使用中记录

//城市统计--柱形图

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

},