<!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>