码迷,mamicode.com
首页 > 其他好文 > 详细

echarts标题属性设置

时间:2017-09-12 00:04:13      阅读:1035      评论:0      收藏:0      [点我收藏+]

标签:www.   otto   之间   top   可视化工具   tooltip   超链接   col   char   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>echarts学习</title>
<script src="F:\毕业设计课题和资料\echarts可视化工具\echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 500px;"></div>
<script type="text/javascript">
//初始化echarts
var myecharts = echarts.init(document.getElementById(‘main‘));
//画柱状图

var option ={
title:{
text:‘echarts入门‘,
link:‘http://www.baidu.com‘,//主标题超链接
target:‘blank‘,//主标题超链接打开方式
textStyle:{ //设置主标题风格
Color:‘green‘,//设置主标题字体颜色
fontStyle:‘‘,//主标题文字风格

},
subtext:‘副标题‘,
sublink:‘http://www.baidu.com‘,//副标题超链接
subtarget:‘blank‘,//副标题超链接打开方式
padding:[5,10,5,5],//设置标题内边距,上,右,下,左
itemGap:10,//主副标题之间的间距

/*left:‘left‘,//组件的位置,center,left,right
top:‘top‘,//组件离上边的距离middle,top,bottom*/ //此二者的优先级高于x吗?答案:是
x:‘center‘,
backgroundColor:‘white‘,//标题背景色
borderColor:‘gray‘,//标题边框颜色
borderWidth:5,//标签线框
borderRadius:5,//边框切圆角
shadowBlur:10,//图形阴影模糊大小,该属性配合 shadowColor,shadowOffsetX(阴影水平方向上的偏移距离), shadowOffsetY(阴影垂直方向上的偏移距离。) 一起设置图形的阴影效果。
shadowColor:‘rgba(0,0,0,0.5)‘//阴影颜色
},
tooltip:{},
legend:{
data:‘销量‘
},
xAxis:{
data:["裤子","羊毛衫","拖鞋"]
},
yAxis:{},
series:[{
name:‘销量‘,
type:‘bar‘,
data:[10,29,30]
}]
};

myecharts.setOption(option);
</script>
</body>
</html>

echarts标题属性设置

标签:www.   otto   之间   top   可视化工具   tooltip   超链接   col   char   

原文地址:http://www.cnblogs.com/ciscolee/p/7507955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!