chartxy 柱状图_echarts3柱状图（x轴可缩放）

html文件：

js代码：1.引入echarts.js文件

2.代码部分如下

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

var  option = {

title : {  //标题名称

text: '每天各接口兑换次数统计',

x:'center'//表示居中显示

},

tooltip : {

trigger: 'axis',

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

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

}

},

legend: { //图例

orient: 'vertical',

left: 'left',

data:{$arr_name}//图例jsonjson数据格式类似：["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

grid: {  //整个图的上下左右的调整

left: '20%',

right: '4%',

top:  '20%',

bottom: '10%',

containLabel: true,

},

calculable : true,

dataZoom : {//实现缩放功能

show : true,

realtime : true,

start : 0,

end : 70

},

xAxis :  [

{

type : 'category',

data : json数据,//x轴的json数据格式类似：["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

axisTick: {

alignWithLabel: true

},

}

],

yAxis : [

{

type : 'value',

show: true,    //显示纵轴false-不显示，true-显示

name:'单位(次)',   //这里是纵轴标题

}

],

series : json数据

/*画图json数据格式类似：[{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}，{

name: '产能',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]*/

};

myChart.setOption(option);

注：1.图例legend中的data中的数据要与series中name值相对应不可缺少，否则图例会不显示

2.html文件中尽量用div标签，保留宽和高的样式，不要再加其他样式，否则可能会有些功能问题，