一些簡單配置模板方便使用echarts 3.2.0
阿新 • • 發佈：2019-01-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../scripts/jquery.min.js" type="text/javascript"></script>
<script src="echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div style='border: 1px solid red; width:500px; height:500px;margin-left:20%;' id="idEcharts">
</div>
<script type="text/javascript">
$(document).ready(function(){
var app = {};
var option = null;
option = {
title: {//標題元件，包含主標題和副標題。
text: '主題名',
subtext: '副主題名'
},
tooltip: {//提示框元件。
show:true,//是否顯示提示框元件
trigger: 'axis',
formatter: "Temperature : <br/>{b}km : {c}°C",//提示框浮層內容格式器，支援字串模板和回撥函式兩種形式。模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，
axisPointer:{//座標軸指示器配置項
type:"cross"//指示器型別。'line' 直線指示器
}
},
toolbox: {//工具欄。內建有匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。
show: true,
feature: {
saveAsImage: {show: false}//不顯示下載圖片工具
}
},
calculable : true,//圖形是否可以拖拽
xAxis: {
type: 'category',//軸線型別
boundaryGap: false,//座標軸兩邊留白策略，類目軸和非類目軸的設定和表現不一樣。
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
grid: [//繪製圖形區域大小及位置
{x: '10%', y: '10%', width: '80%', height: '80%'}
],
legend: {//圖例元件。
bottom:'1%',
data:['圖例']//圖例顯示，名稱和series名稱一致
},
/* visualMap: {
show: false,
dimension: 0,
pieces: [{//自定義『分段式視覺對映元件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式。例如：
gte: 0,
color: 'green'
}/* , {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
} ]
}, */
series: [
{
name:'圖例',
type:'line',
smooth: false,//是否曲線顯示
symbol:'circle',//實心圓
symbolSize:6,//大小
showAllSymbol:true,//標誌圖形預設只有主軸顯示（隨主軸標籤間隔隱藏策略），如需全部顯示可把 showAllSymbol 設為 true。
markLine : {
data : [
{type : 'average', name : '平均值',symbol:'emptyCircle'}
]
},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 420],
/* markArea: {//圖表標域，常用於標記圖表中某個範圍的資料
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
} */
}
]
};
var dom = document.getElementById("idEcharts");
var myChart = echarts.init(dom);
if (option && typeof option === "object") {
myChart.setOption(option);
};
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../scripts/jquery.min.js" type="text/javascript"></script>
<script src="echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div style='border: 1px solid red; width:500px; height:500px;margin-left:20%;' id="idEcharts">
</div>
<script type="text/javascript">
$(document).ready(function(){
var app = {};
var option = null;
option = {
title: {//標題元件，包含主標題和副標題。
text: '主題名',
subtext: '副主題名'
},
tooltip: {//提示框元件。
show:true,//是否顯示提示框元件
trigger: 'axis',
formatter: "Temperature : <br/>{b}km : {c}°C",//提示框浮層內容格式器，支援字串模板和回撥函式兩種形式。模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，
axisPointer:{//座標軸指示器配置項
type:"cross"//指示器型別。'line' 直線指示器
}
},
toolbox: {//工具欄。內建有匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。
show: true,
feature: {
saveAsImage: {show: false}//不顯示下載圖片工具
}
},
calculable : true,//圖形是否可以拖拽
xAxis: {
type: 'category',//軸線型別
boundaryGap: false,//座標軸兩邊留白策略，類目軸和非類目軸的設定和表現不一樣。
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
grid: [//繪製圖形區域大小及位置
{x: '10%', y: '10%', width: '80%', height: '80%'}
],
legend: {//圖例元件。
bottom:'1%',
data:['圖例']//圖例顯示，名稱和series名稱一致
},
/* visualMap: {
show: false,
dimension: 0,
pieces: [{//自定義『分段式視覺對映元件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式。例如：
gte: 0,
color: 'green'
}/* , {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
} ]
}, */
series: [
{
name:'圖例',
type:'line',
smooth: false,//是否曲線顯示
symbol:'circle',//實心圓
symbolSize:6,//大小
showAllSymbol:true,//標誌圖形預設只有主軸顯示（隨主軸標籤間隔隱藏策略），如需全部顯示可把 showAllSymbol 設為 true。
markLine : {
data : [
{type : 'average', name : '平均值',symbol:'emptyCircle'}
]
},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 420],
/* markArea: {//圖表標域，常用於標記圖表中某個範圍的資料
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
} */
}
]
};
var dom = document.getElementById("idEcharts");
var myChart = echarts.init(dom);
if (option && typeof option === "object") {
myChart.setOption(option);
};
})
</script>
</body>
</html>