echarts入門基礎,畫折線圖

注意:必定要本身引入echarts庫javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
transform: translate(50%,50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform-origin: translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<!-- 爲 ECharts 準備一個具有大小(寬高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">

var arr = [1,2,3,4,5,6];
var option = {

tooltip : {/*鼠標跟隨效果*/
trigger: 'axis'
},
legend: { /*中間的小圖標*/
data:['最高氣溫','最低氣溫']
},

//右上角工具條
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},


xAxis : [
{
type : 'category',

data : ['週一','週二','週三','週四','週五','週六','週日'],
show:true,
splitLine:{
show:true,
}
}
],
yAxis : [
{
type : 'value',
name: '總戶數(戶)',
axisLabel : { /*座標軸的刻度文字設置*/
formatter: '{value} °C',
textStyle:{
color:"yellowgreen"
}
},
splitLine:{ /*網格線的設置*/
show:true,
},
axisLine:{/*座標軸,軸線的設置*/
lineStyle:{
color:"red",
}
},
axisTick:{ /*座標軸刻度的設置*/
lineStyle:{
color:"blue",
}
},



},
{
type : 'value',
name:"戶均持股數(股/戶)",
position :"right", /*軸的位置,默認是左邊*/
axisLabel : {
formatter: '{value} °C' /*{value}指的series中對應的值, 能夠用回調函數設置*/
},
splitLine:{ /*網格線,不畫,*/
show:false,
},

}

],
series : [
{
name:'最高氣溫',/*數據的名稱*/
type:'line', /*這個數據的類型,畫折線*/
data:[11, 11, 20, 13, 12, 13, 10],
yAxisIndex:0, /*與上面y軸的數組中,第一組數據對應*/

},
{
name:'最低氣溫',
type:'line',
data:[1, 4, 2, 5, 3, 2, 0],
yAxisIndex:1,

}
]
};



var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

 


</script>
<html>
相關文章
相關標籤/搜索