柱形图ajax,EChats+Ajax之柱状图的数据交互

pageEncoding="UTF-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Insert title here

var zChart = echarts.init(document.getElementById("main1"));// 柱形图模板一

var option = {

color : [ '#3398DB' ],

title : {

text : 'ECharts 示例', //主标题文本，支持使用 \n 换行。

link : '', //主标题文本超链接

textStyle : { //该属性用来定义主题文字的颜色、形状等

color : '#3398DB',

}

},

tooltip : {

trigger : 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

grid : {

left : '6%',

right : '20%',

bottom : '20%',

containLabel : true

},

xAxis : [ { //x轴列表展示

type : 'category',

data : [ '哈士奇', '斗牛犬', '田园犬', '吉娃娃' ],

} ],

yAxis : [ { //定义y轴刻度

type : 'value',

scale : true,

name : '月销量',

max : 140,

min : 0,

splitNumber : 20,

boundaryGap : [ 0.2, 0.2 ]

} ],

series : [ {

name : '销量',

type : 'bar', //bar 柱状图     line 折线图 等

barWidth : '40%', //柱的宽度

data : [ '120', '30', '80', '65' ]

} ]

};

zChart.setOption(option);

var xChart = echarts.init(document.getElementById('main2'));// 柱形图模板二

var option1 = {

title : {

text : $("#signSet option:selected").val() == '' ? $(

"#signSet option:eq(1)").html() : $(

"#signSet option:selected").html(),

},

color : [ '#2474f6', '#006699', '#d84a38' ],

tooltip : {

trigger : 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

legend : {

data : [ '正常', '迟到', '未到' ]

},

grid : {

left : '3%',

right : '4%',

bottom : '3%',

containLabel : true

},

xAxis : [ {

type : 'category',

data : [ '一班', '二班', '三班', '四班' ]

} ],

yAxis : [ {

type : 'value',

scale : true,

name : '月销量',

max : 60,

min : 0,

splitNumber : 20,

boundaryGap : [ 0.2, 0.2 ]

} ],

series : [ {

name : '正常',

type : 'bar',

data : [ '54', '49', '58', '56' ]

},

{

name : '迟到',

type : 'bar',

data : [ '5', '8', '4', '2' ]

}, {

name : '未到',

type : 'bar',

data : [ '3', '2', '1', '2' ],

markLine : {

lineStyle : {

normal : {

type : 'dashed'

}

},

data : [ [ {

type : 'min'

}, {

type : 'max'

} ] ]

}

}, ]

}

xChart.setOption(option1);