<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>echarts学习</title>
<script src="F:毕业设计课题和资料echarts可视化工具echarts.js"></script>
</head>
<body>
<div id="main" style=" 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>