echarts标题属性设置

Posted CiscoLee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts标题属性设置相关的知识,希望对你有一定的参考价值。

<!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标题属性设置的主要内容,如果未能解决你的问题,请参考以下文章

Echarts常见设置属性

echarts怎么设置图形在整个echarts里面的位置,一直居中不太灵活

你们要的Echart系列,今天它来了,教你一招快速上手echarts的属性设置,手把手教程系列

echarts设置正负两边圆角

怎么设置echarts饼状图大小

echarts怎么设置图形在整个echarts里面的位置,一直居中不太灵活