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