您的位置：首页 > 其它

Echarts横坐标倾斜,顶部显示数字

2018-03-07 11:06 531 查看

最近项目使用到Echarts，所以学习了下

根据API，实现Echarts很简单，在这就不多说了，下面就说说项目中碰到的一些需求

1.由于横坐标很多，导致数据不能展示完整，所以需要设置横坐标样式倾斜展示

2.每个数据列（比如柱形图），顶部需要显示具体数值

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="ECharts">

<title>Echarts横坐标倾斜,顶部文字显示实现</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<script type="text/javascript">

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 : '微软雅黑',

}

}

}

},

}

]

});

}

</script>

<body>

<div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>



<script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>

<script>

</script>

</body>

</html>

效果图如下：

还有一个地方可以看到效果图，很不错的一个网站

效果演示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航