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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~