Vue怎麼使用Echarts建立圖表
阿新 • • 發佈：2020-10-21
在後臺管理系統中，我們經常會遇到圖表，比如說：柱形圖，餅狀圖，折線圖，雷達圖等等，而用來寫圖表外掛有很多，我這裡主要介紹Echarts在專案裡怎麼使用，官網地址如下：https://echarts.apache.org/zh/tutorial.html，詳細資訊請閱覽他們的官網文件和例項，各種圖表都比較完善。
一.安裝外掛
方法一：npm安裝Echarts
npminstallecharts-S
方法二：cnpm安裝Echarts
1.首先我們需要安裝cnpm
npminstall-gcnpm--registry=https://registry.npm.taobao.org
2.然後
cnpminstallecharts-S
二.引入Echarts
方法一：全域性引入
開啟main.js檔案引入Echarts
importechartsfrom'echarts'
然後將echart新增到vue的原型上，這樣就可以全域性使用了
Vue.prototype.$echarts=echarts
方法二：區域性引入
全域性引入會將所有的echarts圖表打包，導致體積過大，所以我覺得最好還是按需要來區域性引入，比如我們需要引入一個柱狀圖，這裡require直接從 node_modules 中查詢檔案位置進行引入
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖元件
require('echarts/lib/chart/bar')
三.建立圖表
當你安裝完外掛和在頁面裡面引入圖表之後，那麼恭喜你可以建立圖表了~
第一步：你首先得創造一個圖表的容器，寬高必須是行內樣式，單位必須是px
<template>
<div id="myChart" :style="{width: '1000px', height: '600px'}"></div>
</template>
注意：這樣會出現一個問題，因為由於必須固定好寬高，你縮小螢幕的時候，圖表不會隨之適應的縮小，重新整理頁面才能適應，解決方法的實現請接著往下看
第二步：繪製圖表，這裡我們要注意，echarts初始化應在鉤子函式mounted()中，掛載之後呼叫
<script>
export default {
data() {
return {
}
},
//鉤子函式
mounted(){
this.draw();
},
methods: {
draw(){
// 初始化echarts例項
let myChart=this.$echarts.init(document.getElementById('myChart'))
// 繪製圖表
var option = {
//此處佔用篇幅過大，先省略等下會進行解釋
}
//防止越界，重繪canvas
window.onresize = myChart.resize;
myChart.setOption(option);//設定option
}
}
}</script>
解釋：
第一點：省略處為繪製圖表的程式碼，首先，你開啟Echarts官網，找到例項，選取你專案裡面需要用到的圖表模板（樣式差不多就行，下文會教你如何修改圖表樣式），點進去，然後你可以看到左側的程式碼，把option = {}括號裡面的內容放置到我上方省略的程式碼處，執行，你頁面即可以看到你所需要的圖表；
第二點：下方程式碼防止越界，重匯canvas處，即為可以解決掉螢幕縮小，圖表不會隨之適應的縮小的方法，原理為當瀏覽器發生resize事件的時候，讓其觸發echart的resize事件，重繪canvas
//防止越界，重繪canvaswindow.onresize = myChart.resize; myChart.setOption(option);//設定option
四.修改樣式
當你建立完圖表之後，你會發現你的圖表和UI給的樣式差距太大，這樣寫肯定是不能過關的，所以你得修改圖表樣式，現在我從圖表的左上角說到右下角，如何去更改圖表樣式，
樣式修改方法：
1.左上角圖例處：
//圖例legend: {
data: ['降水量'],//與series的name對應
left: '75%',//圖例的離左邊位置，可以用畫素，可以用百分比，也可以用center，right等
top: 12px,//圖例離頂部的位置
itemWidth: 10,//圖例圖示的寬
itemHeight: 10,//圖例圖示的高 textStyle: {
color: '#878787',//文字的具體的顏色 }
},
2.右上角切換圖形處：
toolbox: {
show : true,//顯示 feature : {
magicType : {show: true, type: ['line', 'bar']},
},//柱形圖和折線圖切換
right: '6%',//離右邊的距離},
3.中部圖表X軸修改：
//x軸xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月'],//x軸的資料
splitLine: {show: false},//去除網格分割線
// splitArea: {show: true},//保留網格區域
axisLine: {//座標線 lineStyle: {
type: 'solid',
color: '#d8d8d8',//軸線的顏色
width:'1'//座標線的寬度 }
},
axisTick: {//刻度
show: false//不顯示刻度線 },
axisLabel: {
textStyle: {
color: '#878787',//座標值的具體的顏色 }
},
splitLine: {
show: false//去掉分割線 },
},
4.中部圖表Y軸修改：
yAxis: {
name: '單位：次',//軸的名字，預設位置在y軸上方顯示,也可不寫
max: 30,//最大刻度
type: 'value',
axisLine: {//線
show: false
},
axisTick: {//刻度
show: false
},
axisLabel: {
textStyle: {
color: '#878787',//座標值得具體的顏色 }
},
minInterval: 5,//標值的最小間隔 splitLine: {
lineStyle: {
color: ['#f6f6f6'],//分割線的顏色 }
}
},
5.柱狀圖形修改：
series: [{
name: '數量',//每組資料的名字，與圖例對應
data: [200, 300, 400, 350, 100],//資料
type: 'bar',//柱狀圖 itemStyle: {
normal: {
color: '#FD6B71',//設定柱子顏色 abel: {
show: true,//柱子上顯示值
position: 'top',//值在柱子上方顯示 textStyle: {
color: '#FD6B71'//值得顏色 }
}
}
},
barWidth: 15//設定柱子寬度，單位為px
}],
好吧！整體程式碼我也發一份，當你安裝好外掛和全域性引入後，你可以用以下程式碼進行測試有沒有成功，程式碼如下：
<template>
<div class="MyAchievement">
<div class="MyAchievement-echart">
<div class="echart-title">我的業績</div>
<div class="echart-content">
<div id="myChart" :style="{width: '1500px', height: '460px'}"></div>
</div>
</div>
</div></template><script>export default {
data() { return {
}
},
mounted(){ this.drawLine();
},
methods: {
drawLine(){ var myChart = this.$echarts.init(document.getElementById('myChart'));//獲取容器元素
var option = {
tooltip : {
trigger: 'axis'
},
grid: {
left: '6%',
right: '6%',
bottom: '6%',
containLabel: true
},
legend: {
data:['訂單數量','我的業績'],
left: '6%',
top: 'top',
itemWidth: 15,//圖例圖示的寬 itemHeight: 15,//圖例圖示的高 textStyle: {
color: '#3a6186',
fontSize:20,
}
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
},
right: '6%',
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['01-01','01-02','01-03','01-04','01-05','01-06','01-07'],
splitLine: {show: false},//去除網格分割線 axisTick: {//刻度 show: false//不顯示刻度線 },
axisLine: {//座標線 lineStyle: {
type: 'solid',
color: '#e7e7e7',//軸線的顏色 width:'2'//座標線的寬度 }
},
axisLabel: {
textStyle: {
color: '#3a6186',//座標值的具體的顏色 }
},
splitLine: {
show: false//去掉分割線 },
}
],
yAxis : [
{
type : 'value',
axisLine: {//線 show: false
},
axisTick: {//刻度 show: false
},
axisLabel: {
textStyle: {
color: '#3a6186',//座標值的具體的顏色 }
},
splitLine: {
lineStyle: {
color: ['#e7e7e7'],//分割線的顏色 }
}
}
],
series : [
{
name:'訂單數量',
type:'bar',
barWidth: 20,
data:[20, 35, 55, 60, 120, 150, 140],
itemStyle: {
normal: {
color: '#00abf7',//設定柱子顏色 label: {
show: true,//柱子上顯示值 position: 'top',//值在柱子上方顯示 textStyle: {
color: '#00abf7',//值的顏色 fontSize:16,
}
}
}
},
},
{
name:'我的業績',
type:'bar',
barWidth: 20,
data:[40, 50, 90, 110, 130, 160, 150],
itemStyle: {
normal: {
color: '#ff4f76',//設定柱子顏色 label: {
show: true,//柱子上顯示值 position: 'top',//值在柱子上方顯示 textStyle: {
color: '#ff4f76',//值的顏色 fontSize:16,
}
}
}
},
}
]
}; //防止越界，重繪canvas window.onresize = myChart.resize;
myChart.setOption(option);//設定option }
}
}</script><style lang="scss" scoped>
.MyAchievement{
display: flex;
flex-direction: column;
padding:0px 90px;
}
.MyAchievement .MyAchievement-echart{
width: 100%;
height: 570px;
border-radius: 10px;
border:1px solid #d3d9e9;
box-shadow: 4px 6px 10px -2px #d3d9e9;
background-color: #fff;
display: flex;
flex-direction: column;
}
.MyAchievement-echart .echart-title{
width: 100%;
height: 70px;
background-color: #00abf7;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 26px;
color: #fff;
text-align: center;
line-height: 75px;
}
.MyAchievement-echart .echart-content{
width: 100%;
height: 500px;
display: flex;
// align-items: center;
justify-content: center;
}
.echart-content #myChart{
margin-top: 35px;
}</style>
五.接入資料
就比如上方柱形圖，資料為data: [200, 300, 400, 350, 100],我們通過呼叫介面，把介面資料替換掉之前寫死的資料即可，比如：
axios({
method:'POST',
url:this.API.drawline,
}).then(response => { //獲取資料
this.draw= response.data; //把原先寫死的資料替換為介面資料即可
//...... }).catch(err => {
console.log(err);
})