<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line</title>
<script src="../js/echarts.js"></script>
</head>
<body>
<!-- step 2:准備一個div的dom元素,用於渲染Echarts圖表 -->
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
// 圖表實例化
// step 3:初始化Echarts圖表
var mychart = echarts.init(document.getElementById("main"));
// 圖表使用
// step 4:指定圖表的配置項和數據
var option = {
title : {
text: '未來一周氣溫變化',
subtext: '純屬虛構',
},
tooltip : {
show: true,
trigger: 'axis'
},
legend: {
data:['蒸發量','降水量'],
left: "left"
},
toolbox: {
show : true,
orient: 'horizontal',
left: 'right',
top: 'top',
color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
borderColor: '#ccc', // 工具箱邊框顏色
borderWidth: 0, // 工具箱邊框線寬
padding: 5, // 工具箱內邊距
showTitle: true,
feature : {
mark: {show: true,title: {mark:'輔助線-開關',markUndo:'輔助線-刪除',markClear:'輔助線-清空'},lineStyle:{width:1,color:'#1e90ff',type:'dashed'}},
dataZoom:{
show:true,title:'數據視圖',readOnly:true,
lang:['數據視圖','美團','刷新'],
optionToContent: function(opt){
console.log(opt);
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'+'<td>時間</td>'+'<td>'+series[0].name+'</td>'+'<td>'+series[1].name+'</td>'+'</tr>';
for(var i=0,l=axisData.length;i<l;i++){
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
dataView : {show: true, readOnly: false},
magicType : {show: true, title:{line:'動態類型切換-折線圖',bar:'動態類型切換-柱形圖', stack:'動態類型切換-堆積',tiled:'動態類型切換-平鋪'}, type: ['line', 'bar','stack','tiled']},
restore : {show: true,title:'還原',color:'black'},
saveAsImage : {show: true,title:'保存為圖片',type:'jpeg',lang:['點擊本地保存']}
}
},
calculable : true,
dataZoom:{
show: true,
realtime: true,
start: 20,
end: 80
},
xAxis : [
{
type : 'category',
boundaryGap: false, // 類目起始和結束兩端空白策略,默認true留空,false則頂頭
data : function(){
var list = [];
for(var i=1;i<=30;i++){
list.push('2013-03-'+i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最高',
type:'line',
data:function(){
var list = [];
for(var i=1;i<=30;i++){
list.push(Math.round(Math.random()*30));
}
return list;
}()
},
{
name:'最低',
type:'line',
data:function(){
var list = [];
for(var i=1;i<=30;i++){
list.push(Math.round(Math.random()*10));
}
return list;
}()
}
]
};
// step 5:設置圖表配置項。使用剛指定的配置項和數據顯示圖表
mychart.setOption(option);
</script>
</body>
</html>
echarts之折線圖介紹及使用
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。