寫在前面
最近由于一些不可抗力因素，我跳槽去了一家做高校教育服務的公司，剛入職就正好趕上了
PC端項目的重構，而我主要負責
資料可視化
這一子產品，其實做起來不算複雜，但是在使用Echarts的過程中也踩到了一些坑。
是以有了這一文章，這一文章分為上下兩篇，在本篇中我将主要介紹
- 如何在vue項目中使用Echarts
- 如何確定Echarts在頁面中正常顯示并可随視窗變化
不是酸檸檬：前端深入之Vue篇 丨如何在項目中優雅的使用Echarts（下）zhuanlan.zhihu.com
希望小夥伴閱讀完之後可以在項目中
掌握Echarts正确的使用方式，并且在我的基礎上能夠少踩一些坑。
話不多說，讓我們開始吧。
在vue項目中使用Echarts
安裝
安裝其實是比較簡單的，直接在項目中打開指令行工具，執行
npm install echarts --save
也可簡寫為
npm i echarts -S
，即将Echarts安裝到項目生産環境中。
安裝完成之後我們需要打開
main.js
檔案，在上邊找一個位置進行引入
Echarts
，并将其挂載到vue的原型中，具體代碼如下
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
使用
在簡單安裝并挂載原型之後，我們即可在所需要的頁面直接使用的。
首先我們要建立一個容器，一個可以放置Echarts的空div
<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
在這裡我使用了 ref
建立完容器之後即可使用資料對Echarts進行渲染了，為了友善各位小夥伴，我在此貼一個公共代碼，需要在項目中使用Echarts的小夥伴可以直接複制啦~
mounted(){
this.setMyEchart() //頁面挂載完成後執行
},
methods: {
setMyEchart() {
const myChart = this.$refs.myChart; //通過ref擷取到DOM節點
if (myChart) {
const thisChart = this.$echarts.init(myChart); //利用原型調取Echarts的初始化方法
const option = {}; //{}内寫需要圖表的各種配置，可以在官方案例中修改完畢後複制過來
thisChart.setOption(option); //将編寫好的配置項挂載到Echarts上
window.addEventListener("resize", function() {
thisChart.resize(); //頁面大小變化後Echarts也更改大小
});
}
}
}
使Echarts在頁面中正常顯示
在基本結構寫完之後，就可以去Echarts官方示例找到你所需要的圖，複制
option
中的内容粘貼到頁面中
option對象
中即可。
這裡我以雷達圖為例進行展示，當我粘貼完代碼之後頁面是這樣子的。
寬度隻有
100px
，其實這是因為Echarts不識别百分比制，是以就會把100%識别為100px。當我們修改了浏覽器寬高之後，觸發
thisChart.resize();
，圖表也就能正常顯示了，但是我們不能在使用者進來之後就改變浏覽器寬高，官方建議我們給Echarts容器設定具體寬高以保證顯示，這顯然不是一個很好的适配方案。
是以我們應該設定
動态的寬：這一步我們首先要有一個寬度參照物（這個參照物可以是百分比的寬，因為我們在擷取寬的時候會被轉化成真正的像素寬），參照物可以是
chart的wrap
，也可以是相鄰寬度相同的DOM節點。
拿我的頁面舉例，擷取下面這一塊的寬度，假設這個div的類名為
content
，那麼我們可以編寫如下代碼
document.querySelector('#myChart').style.width = document.querySelector('.content').clientWidth
這樣就可以在一開始設定到具體的寬了，同時在變話浏覽器寬高後也能夠自适應的更改。
至于内容自己找到需要的進行修改就好，更多配置項可以參考這個連結進行學習。
結論
經過以上的學習，相信你已經初步了解了
Echarts
的用法，其實算是比較簡單的，重要的還是你想要展現什麼，選擇好之後複制到我們的模闆中就可以了。
在下篇中我将主要介紹如何将api接口傳回的資料填充到Echarts中。
前端深入之Vue篇 丨如何在項目中優雅的使用Echarts（下），可以點選連結進行學習
最後給出所有的代碼吧，供你參考。
<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
<div class="content"></div>
<script>
mounted() {
document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth;
this.setMyEchart();
},
methods: {
setMyEchart() {
const myChart = this.$refs.myChart; //通過ref擷取到DOM節點
if (myChart) {
const thisChart = this.$echarts.init(myChart); //利用原型調取Echarts的初始化方法
const option = {
tooltip: {
confine: true,
enterable: true //滑鼠是否可以移動到tooltip區域内
},
legend: {
// top : '96%', // 圖例距離頂部邊距
textStyle: {
coFlor: "#202124",
fontWeight: "bold",
fontSize: "14"
},
data: ["學生個人", "班級平均"]
},
calculable: true,
color: ["#00CA90", "#4285F4"],
radar: {
name: {
textStyle: {
color: "#fff",
backgroundColor: "#999",
fontSize: "10",
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: "出勤率", max: 1 },
{ name: "作業送出率", max: 1 },
{ name: "話題參與率", max: 1 },
{ name: "表現得星數", max: 1 },
{ name: "互動參與率", max: 1 }
],
radius: 80
},
series: [
{
type: "radar",
data: [
{
value: [
0.85,0.94,0.24,0.56,0.23
],
name: "學生個人"
},
{
value: [
0.90,0.85,0.37,0.85,0.52
],
name: "班級平均"
}
]
}
]
}; //這裡是我配置好的一個雷達圖，你可以複制到echart示例網檢視效果
thisChart.setOption(option); //将編寫好的配置項挂載到Echarts上
window.addEventListener("resize", function() {
thisChart.resize(); //頁面大小變化後Echarts也更改大小
});
}
}
}
}
</script>
結語
以上就是本文章的全部内容了，如果有不正确的地方歡迎指正。
感謝您的閱讀，如果感覺有用不妨點贊/轉發。前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。
前端路漫，踩坑不斷。
前端深入系列持續更新中……
以上2020-01-13。