echart 横坐标倾斜 |
您所在的位置：网站首页 › echarts横坐标竖着显示 › echart 横坐标倾斜 |
echart 横坐标倾斜
|
根据API[url=http://echarts.baidu.com/option.html#title]http://echarts.baidu.com/option.html#title[/url]，实现Echarts很简单，在这就不多说了，下面就说说项目中碰到的一些需求 1.由于横坐标很多，导致数据不能展示完整，所以需要设置横坐标样式倾斜展示 2.每个数据列（比如柱形图），顶部需要显示具体数值 [html] view plain copy Echarts横坐标倾斜,顶部文字显示实现 var width; var height; var myChart; $(function() { //自适应设置 width = $(window).width(); height = $(window).height(); $("#mainBar").css("width", width - 40); $("#mainBar").css("height", height - 40); console.log(height); setEcharts(); }); $(window).resize(function() { width = $(window).width(); height = $(window).height(); $("#mainBar").css("width", width - 40); $("#mainBar").css("height", height - 40); }); function setEcharts() { myChart = echarts.init(document.getElementById('mainBar')); //自适应 window.onresize = myChart.resize; myChart.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['蒸发量', '降水量'] }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //设置字体倾斜 axisLabel: { interval: 0, rotate: 45, //倾斜度 -90 至 90 默认为0 margin: 2, textStyle: { fontWeight: "bolder", color: "#000000" } }, }], yAxis: [{ type: 'value', splitArea: { show: true } }], series: [{ name: '蒸发量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name: '降水量', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], //顶部数字展示pzr itemStyle: { normal: { label: { show: true, //是否展示 textStyle: { fontWeight: 'bolder', fontSize: '12', fontFamily: '微软雅黑', } } } }, }] }); } 效果图如下：
还有一个地方可以看到效果图，很不错的一个网站 |
【本文地址】
今日新闻 |
推荐新闻 |