介紹
?今天做專案時需要實作資料可視化功能，了解一番后選擇使用ECharts，今天特此整理一下，作為筆記，同時希望幫助更多人，
?首先簡單介紹一下，ECharts是一個純JavaScript圖表庫，底層依賴于輕量級的Canvas類別庫ZRender，基于BSD開源協議，是一款非常優秀的可視化前端框架，
官網地址：https://echarts.apache.org/zh/index.html
官方檔案：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
注意： 官網在國內可能被q，如果不能正常訪問，請科學上網，
整合Vue.js使用
1.下載ECharts
下載地址：https://github.com/apache/echarts/tree/5.0.0
2.復制dist目錄下的echarts.min.js檔案到工程目錄下
3.引入到頁面中
4. 在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器，
5. 生成圖表
可以通過 echarts.init 方法初始化一個 echarts 實體并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div id="echarts" style="width: 600px; height: 400px;"></div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
//繪制圖表的method
drawChart(){
//基于準備好的dom，初始化echarts實體
let mychart = echarts.init(document.getElementById('echarts'));
// 指定圖表的配置項和資料
let option = {
title: {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表，
mychart.setOption(option);
},
},
mounted(){
//在DOM節點全部渲染完畢后繪制圖表
this.drawChart();
},
created(){
}
})
</script>
</body>
</html>
6.效果圖
總結
更詳細的用法請大家參照官方檔案（非常友好），如有不當之處，歡迎指正，感謝，歡迎一鍵三連，拒絕白嫖從我做起hhh，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/250700.html
標籤：其他
上一篇：10分鐘學會QQ開放登錄