<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts案例-天氣溫度統計圖</title>
<script type="text/javascript" src="js/echarts_56.js" ></script>
<style type="text/css">
#main{
width: 600px;
height: 400px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="main">
</div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById("main"));
var option={
backgroundColor:'rgba(252,173,54,0.1)',
//圖表標題
title:{
left:20,
top:10, //進行標題位置的微調，top:10 距離頂端10px
x:'left', //標題的水平位置；left-左（默認）；right-右
y:'top', //垂直位置：bottom-將標題置於表底；center-中間；top-上
// borderColor:'#999999', //標題邊框的顏色
// borderWidth:2, //標題邊框的寬度，默認是0-無邊框
//修改標題字體
// textStyle:{
// fontSize:20,
// color:'cornflowerblue',
// },
//注意：title一定要在text之前
text:'未來一周氣溫'
// subtext: '虛構天氣' //小標題
},
//圖例組件
//默認位置是中間
//大部分屬性都和title類似
legend:{
// x:'center',
// y:'bottom',
// orient:'vertical' //布局方式，默認是水平布局；vertical-垂直布局
},
//提示框
tooltip:{
backgroundColor:"cornflowerblue" //設置背景色
},
//工具箱
toolbox:{
// padding:35, //內邊距
right:25,
top:10,
show:true,
//結構-樣式圖
feature:{
//mark是輔助線開關
mark:{
// show:true
},
//數據可視化標簽
dataView:{
// show:true,
readOnly:false //可修改數據
},
saveAsImage:{}, //下載標簽
magicType:{type:['line','bar']} //可更換圖表樣式標簽
}
},
//視覺映射組件
visualMap:{
right:2,
bottom:10,
//有幾個花括號就代表分成幾個區域顯示
pieces:[{
gt:-10,lte:0,color:"#096"
},
{
gt:0,lte:10,color:"#ffde33"
},
{
gt:10,lte:20,color:"#ff9933"
}]
},
//圖表位置
grid:{x:50,y:50,x2:100,y2:50},
xAxis:[{
data:['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis:{},
//圖標核心內容
series:[{
name:'最高氣溫',
type:'line',
color:'green',
markLine:{data:[{type:'average',name:'平均值'}]},
markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},
data:[11,14,13,11,12,12,16]
},
{
name:'最低氣溫',
type:'line',
color:'blue',
markLine:{data:[{type:'average',name:'平均值'}]},
markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},
data:[1,2,3,-2,4,3,4]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
