ECharts纵坐标显示时间1
2017-04-05 14:47
183 查看
<script> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ tooltip : { trigger: 'item', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['播种期', '出苗期','移栽期','返青期','抽穗期','成熟期'], }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, default: '1', height:100, }, yAxis : [ { type : 'category', position: 'bottom', boundaryGap: true, axisLine : { show: true, lineStyle: { color: 'green', type: 'solid', width: 2, } }, axisTick : { show:true, length: 10, lineStyle: { color: '#000', type: 'solid', width: 2 } }, data : ['水稻的生长周期'] }, ], xAxis: { type: 'value', axisLabel : { formatter: function (value,index) { // value格式化成月/日,只在第一个刻度显示年份 var date = new Date(2017,03); var texts = []; if (index === 1) { texts = [(date.getMonth()+1), date.getDate()]; texts.unshift(date.getFullYear()); } else { texts = [(date.getFullYear()),(date.getMonth() + parseInt(index)), date.getDate()]; } return texts.join('-'); } } }, series: [ { name: '播种期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [5,] }, { name: '出苗期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [17,] }, { name: '移栽期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [20, ] }, { name: '返青期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [35,] }, { name: '抽穗期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [10,] }, { name: '成熟期', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [50,] } ] }); </script>
相关文章推荐
- C#中的chart横坐标显示日期和时间格式问题
- echarts中横坐标值显示不全(自动隐藏)解决方案
- echarts x轴坐标文字显示不全
- echarts x轴坐标文字显示不全
- echarts x轴坐标文字显示不全
- MFC StatusBar显示时间 显示鼠标坐标 工具栏显示分隔符
- Echarts中横坐标轴显示不全
- echarts+thinkphp+sql实现的筛选时间,分组,对应在日历中显示该月份的对应天数巡查次数。
- echarts x轴坐标文字显示不全
- echarts x轴坐标文字显示不全
- echarts引用本地文件,动态传数据时只要显示坐标轴
- C++控制台显示日期时间和坐标排列
- Echarts--Y坐标标题显示不全
- echarts图表坐标轴的分割段数显示
- 解决echarts 坐标轴太长无法显示的问题
- echarts中横坐标值如果全部显示
- echarts中横坐标值显示不全(自动隐藏)解决方案
- echarts x轴坐标文字显示不全
- ECharts3 实现动态数据累积图2+时间坐标
- echarts x轴坐标文字显示不全