百度的Echatrs折線圖學習筆記

時間 2019-12-10

標籤百度 echatrs 折線學習筆記简体版

原文原文鏈接

百度ECharts入門javascript

文章的素材有大量註釋哦~基本上每一行都註釋了配合官方文檔看應該是無壓力的html

Echarts文檔java

一、新建一個echarts.html文件，爲ECharts準備一個具有大小（寬高）的Dom。瀏覽器

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
</body>

二、新建script標籤引入模塊化單文件echarts.jsecharts

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

三、新建script標籤中爲模塊加載器配置echarts和所需圖表的路徑（相對路徑爲從當前頁面連接到echarts.js），引入圖表文件見引入ECharts2dom

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>
</body>

四、script標籤內動態加載echarts和所需圖表，回調函數中能夠初始化圖表並驅動圖表的生成，option見API & Docjsp

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['銷量']
},
xAxis : [
{
type : 'category',
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>

五、瀏覽器中打開查看模塊化

折線圖的學習筆記函數

一個標準折線圖圖表有這幾大元素工具

第一:標題

//標題
title:{
//文本
text:"將來一週氣溫變化",
//子標題
subtext:"純屬虛構"
},//!-文本

第二:鼠標移入上去的提示框

//提示框
tooltip:{
//座標軸觸發顯示
trigger:"axis"
},

第三:圖例

//圖例每一個圖表只能有一個
legend:{
data:['最高氣溫','最低氣溫']
},//!-圖例

第四:工具箱

//工具箱每一個圖表只能有一個
toolbox:{
//是否顯示工具箱圖表右上角的一系列開關
show:true,
//特效duang
feature:{
//輔助線標誌
mark:{show:true},
//數據視圖能夠顯示文本數據
//是否僅讀？NO
dataView:{show:true,readOnly:false},
//能夠切換更多的圖形特效嗎？
//YSE! 能夠切換line和bar類型
magicType:{show:true,type:["line",'bar']},
//臥槽！按錯了，能夠復原嗎？
//YES!
restore:{show:"true"},
//是否能夠保存爲圖片？
//YES!圖片能夠嵌入PPT裏哦~
saveAsImage:{show:true}
},//！-特效
},//!-工具箱

第五:橫座標

xAxis:[
{
//X軸爲類目型
type:"category",
//是否兩端留白？
boundaryGap:false,
//橫座標數據
//只有類目型的才配擁有data屬性！
data:["週一","週二","週三","週四","週五","週六","週日"]
}
],//!-橫座標

第六:縱座標

yAxis:[
{
//Y軸類型爲數值型
type:"value",
//Y軸的文本標籤
//改爲萬°C會不會被噴？
axisLabel:{
//間隔名稱..實際上就是單位
//{value}傳遞過來的就是值
formatter:"{value}°C"
}
}
],
//!-縱座標

第七:圖表數據

series:[
//數據一
{
name:"最高氣溫",
//必要的參數
//不聲明爲line,電腦妹紙會知道你是個line？
type:"line",
//最高氣溫
//對應週一-週日
data:[11,11,15,13,12,13,10],
//標註也就是圖表上的那個相似於提示氣泡的東西
markPoint:{
data:[
//會出現兩個提示氣泡
//一週類當中最高氣溫最大爲多少
{type:"max",name:"最大值"},
//一週類最高氣溫最低爲多少
{type:"min",name:"最小值"}
]
},
//!-標註

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。