1.包括一些基本的设置
app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '单通趋势图' //换行用 \n }, legend : { //图标 show : true, x : 'center', y : 30, itemGap : 10, itemWidth : 30, itemHeight : 10, data : ['直接访问'] }, color: ['#3398DB'],// 柱状图颜色 tooltip : { //鼠标悬停提示内容 trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { //布局 控制图的大小,调整下面这些值就可以 left: '3%', right: '4%', bottom: '3%', containLabel: true //y2 : 40 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, xAxis : [ //X轴 { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ //Y轴 { type : 'value' } ], series : [ //用于指定图标显示类型 { name:'直接访问', //柱子的名称 type:'bar', //类型 barWidth: '60%', //宽度 data:[10, 52, 200, 334, 390, 330, 220] } ] };
app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '单通趋势图' //换行用 \n }, legend : { //图标 show : true, x : 'center', y : 30, itemGap : 10, itemWidth : 30, itemHeight : 10, data : ['直接访问'] }, color: ['#3398DB'],// 柱状图颜色 tooltip : { //鼠标悬停提示内容 trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { //布局 控制图的大小,调整下面这些值就可以 left: '3%', right: '4%', bottom: '3%', containLabel: true //y2 : 40 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, xAxis : [ //X轴 { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ //Y轴 { type : 'value' } ], series : [ //用于指定图标显示类型 { name:'直接访问', //柱子的名称 type:'bar', //类型 barWidth: '60%', //宽度 data:[10, 52, 200, 334, 390, 330, 220] } ] };