ECharts實作資料可視化入門教程（超詳細）
- ECharts介紹
- ECharts入門教程
- 第一步：下載并引入scharts.js檔案
- 第二步：撰寫代碼
- 目錄結構
- 撰寫index.html代碼
- 效果展示
- ECharts的基礎配置
- 主要配置（常用的）
- 案例講解
- 補充
- 示例鏈接
- 立即執行函式
- 讓圖表跟隨螢屏自適應
ECharts介紹
官網鏈接：Apache ECharts
ECharts是一個使用 JavaScript 實作的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定制的資料可視化圖表，
通俗的理解：
- 是一個JS插件
- 性能好可流暢運行PC與移動設備
- 兼容主流瀏覽器
- 提供很多常用圖表【折線圖、柱狀圖、散點圖、餅圖、K線圖】，且可定制（支持自定義）
ECharts入門教程
官方教程：5 分鐘上手 ECharts
第一步：下載并引入scharts.js檔案
獲取 ECharts：下載地址
1、點擊Dist跳轉到Github，
2、點擊點進去
3、右鍵單擊Raw，選擇鏈接另存為
4、這樣我們就得到了需要的檔案
簡單粗暴的方式：
當上面的第一步后第二步直接點擊code然后下載壓縮包，簡單直接，再在里面找到我們需要的檔案即可，
打開壓縮包，找到需要的檔案引入到我們專案的js檔案夾即可
第二步：撰寫代碼
目錄結構
撰寫index.html代碼
根據上面的步驟2至步驟5撰寫代碼，
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document01</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: rgb(188, 227, 236);
}
</style>
</head>
<body>
<!-- 2.準備具有大小的DOM容器 -->
<div class="box"></div>
<script src="js/echarts.min.js"></script>
<script>
//3.初始化實體物件 echarts.init(dom容器)
var myChart = echarts.init(document.querySelector(".box"));
//4.指定配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
//5.將配置項設定給echarts實體物件，使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
</script>
</body>
</html>
效果展示
ECharts的基礎配置
在官網給出了我們許多示例：鏈接
我們都可以直接拿來用，但是里面的一些配置我們可以根據自己的需求來修改，所以我們需要了解ECharts的基礎配置，
主要配置（常用的）
官網配置項參考檔案：地址
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
series
– 系列串列，每個系列通過type決定自己的圖表型別
– 通俗的理解：圖示資料，指定什么型別的圖示，可以多個圖表重疊，xAxis：直角坐標系 grid 中的 x 軸
– boundaryGap: 坐標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標簽和資料點都會在兩個刻度之間的帶(band)中間，
yAxis：直角坐標系 grid 中的 y 軸
grid：直角坐標系內繪圖網格，
title：標題組件
tooltip：提示框組件
legend：圖例組件
color：調色盤顏色串列
stack：資料堆疊，同個類目軸上系列配置相同的
stack值后 后一個系列的值會在前一個系列的值上相加，
關于更多的配置項參考官方檔案，十分具體，
案例講解
接下來，通過修改官方示例中的例子折線圖堆疊，來熟悉配置項，
修改前的樣式：
修改后的代碼：
option = {
//設定線條的顏色，后面是個陣列
color:['pink','red','green','blue','gray'],
//設定圖表標題
title: {
text: '折線圖堆疊1233標題'
},
//圖表的提示框組件
tooltip: {
//觸發方式 - 坐標軸
trigger: 'axis'
},
//圖例組件
legend: {
//series有name了，這里的data可以洗掉掉
data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
},
//網格配置 grid可以控制線形圖 柱狀圖 圖示大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
//是否顯示刻度標簽
containLabel: true
},
//工具箱組件，可以另存為圖片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
//設定x軸的相關配置
xAxis: {
type: 'category',
//線條和y軸是否有縫隙
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
//設定y軸的相關配置
yAxis: {
type: 'value'
},
//系列圖表配置，決定顯示那種型別的圖表
series: [
{
name: '郵件營銷',
type: 'line',
//總量，后面的會堆疊前面的累加起來，洗掉掉就會折疊了，一般不需要
//stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'line',
//stack: '總量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視頻廣告',
type: 'line',
//stack: '總量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問',
type: 'line',
//stack: '總量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
//stack: '總量',
data: [520, 932, 901, 934, 1290, 1330, 1320]
}
]
};
修改后的樣式：
補充
示例鏈接
除了上面提到的官網給出好多示例的鏈接：點這里
還有一個可以作為補充：Gallery
立即執行函式
為了防止變數污染，減少命名沖突，我們可以采用立即執行函式的寫法，因為立即執行函式里的變數都是區域變數，
我們需要var很多option ，我們采用立即執行函式包起來就不會參生命名沖突了，
格式如下：
示例代碼：index.js
// 基礎折線圖
(function() {
// 實體化物件
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和資料
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
// 配置項和資料給我們的實體化物件
myChart.setOption(option);
// 當我們瀏覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function() {
// 讓我們的圖表呼叫 resize這個方法
myChart.resize();
});
})();
// 餅圖
(function() {
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.querySelector(".line .chart"));
// 指定配置和資料
var option = {
title: {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接訪問'},
{value: 580, name: '郵件營銷'},
{value: 484, name: '聯盟廣告'},
{value: 300, name: '視頻廣告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 配置項和資料給我們的實體化物件
myChart.setOption(option);
// 當我們瀏覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function() {
// 讓我們的圖表呼叫 resize這個方法
myChart.resize();
});
})();
讓圖表跟隨螢屏自適應
// 當我們瀏覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function() {
// 讓我們的圖表呼叫 resize這個方法
myChart.resize();
});
以上就是ECharts實作資料可視化入門教程（超詳細）的全部內容，
看完如果對你有幫助，感謝點贊支持！
如果你是電腦端的話，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/261751.html
標籤：其他