在Vue中使用Echarts+封裝
更新時(shí)間：2023年11月26日 09:02:06 投稿：wdc
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下
一 . 準(zhǔn)備階段
1.下載 echarts
npm install echarts -S 有時(shí)候版本過高會(huì)報(bào)錯(cuò) 換成 "echarts": "4.2.1"
2.全局引入
// 在main.js中引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
3.創(chuàng)建文件Charts.vue以及盒子
<div ref="chart"></div>
二.封裝
創(chuàng)建Chart.vue 封裝echarts 使用時(shí)只用傳option
<template>
<div ref="chart" class="chart"></div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Chart',
props: {
// 傳配置項(xiàng)option
option: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
chart: null
}
},
// 這里是獲取我項(xiàng)目側(cè)邊欄的狀態(tài)
computed: {
...mapGetters(['sidebar'])
},
watch: {
option: {
handler(val) {
// 判斷傳入的option是否有內(nèi)容
if (Object.keys(val).length) {
this.$nextTick(() => {
this.drawChart()
})
}
},
immediate: true,
deep: true
},
// 當(dāng)側(cè)邊欄打開或者收縮 都影響了圖表的寬度 所以需要重繪 如果項(xiàng)目里沒左側(cè)側(cè)邊欄可以不用監(jiān)聽重繪
'sidebar.opened': {
handler(val) {
this.$nextTick(() => {
this.drawChart()
})
}
}
},
methods: {
drawChart() {
this.chart = this.$echarts.init(this.$refs.chart) // 初始化echarts
this.chart.setOption(this.option) // 設(shè)置對(duì)應(yīng)配置項(xiàng)
// 當(dāng)窗口大小改變 echarts重置大小
window.addEventListener('resize', () => {
this.chart.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
三.使用
// 使用組件
<chart class="chart" :option="pieOption" />
// 引入組件
import Chart from "../components/Chart.vue";
components: { Chart }
// 定義option配置
this.pieOption={....}
示例 :
<template>
<div class="home">
<chart class="chart" :option="pieOption" />
</div>
</template>
<script>
import Chart from "../components/Chart.vue";
export default {
name: "Home",
components: { Chart },
data() {
return {
pieOption: {},
};
},
created() {
this.initPie();
},
methods: {
initPie() {
const color = [
"#6080EB",
"rgba(96, 128, 235, 0.42)",
"rgba(96, 128, 235, 0.03)",
];
const xData = [
"2021-11-21",
"2021-11-22",
"2021-11-23",
"2021-11-24",
"2021-11-25",
"2021-11-26",
"2021-11-27",
];
const yData = [1220, 182, 491, 234, 790, 330, 310];
this.pieOption = {
color: color[0],
dataZoom: {
type: "inside",
xAxisIndex: [0],
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 10,
bottom: 40,
},
xAxis: {
boundaryGap: false,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#d8d8d8",
},
},
axisLabel: {
color: "rgba(0, 0, 0, 0.65)",
},
data: xData,
},
yAxis: {
splitNumber: 4,
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#d8d8d8",
},
},
axisLabel: {
color: "rgba(0, 0, 0, 0.65)",
},
},
series: [
{
type: "line",
showSymbol: false,
smooth: true,
lineStyle: {
color: color[0],
width: 3,
},
areaStyle: {
//區(qū)域填充樣式
normal: {
color: this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[1],
},
{
offset: 1,
color: color[2],
},
],
false
),
},
},
data: yData,
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
.chart {
width: 80%;
height: 300px;
margin: 20px auto;
}
}
</style>
四.配置筆記
1.常用主配置
backgroundColor 圖表默認(rèn)背景
title 圖表標(biāo)題-----可設(shè)置圖表主標(biāo)題和副標(biāo)題
legend 圖例配置
tooltip 提示框
grid 網(wǎng)格-----可設(shè)置圖表位置以及大小
xAxis x軸
yAxis y軸
series 系列列表。每個(gè)系列通過 type 決定自己的圖表類型。----可以改變圖表類型以及數(shù)據(jù)
2.簡(jiǎn)單筆記
1.折線圖平滑
smooth: true, //平滑的折線
3.折線圖點(diǎn)的顏色不同處理
ps:需求是折線圖的數(shù)據(jù)是0的點(diǎn) 對(duì)應(yīng)顏色是黑色
series: [
{
name: '每日30天銷量分析',
type: 'line',
data: [0, 12, 0, 86, 12, 0, 6],
lineStyle: {
color: '#D70023'
},
symbol: 'circle', // 實(shí)心圓點(diǎn)
itemStyle: {
normal: {
color: (e) => {
return this.getColor(e.data) // 主要是這里 用color的回調(diào)去根據(jù)值返回顏色值
},
lineStyle: {
width: 1, // 設(shè)置虛線寬度
type: 'solid' // 虛線'dotted' 實(shí)線'solid'
}
}
}
}
]
getColor(data) {
if (data) {
return '#D70023'
} else {
return '#333'
}
},
4.圖例過多導(dǎo)致超出盒子
tooltip 組件中的 confine 屬性用于控制提示框的邊界約束。當(dāng)設(shè)置為 true 時(shí)，提示框?qū)⒈幌拗圃趫D表的區(qū)域內(nèi)，不會(huì)超出圖表的邊界。
tooltip: {
confine: true,// 設(shè)置為true，開啟邊界約束
}
在上述代碼中，我們將 tooltip 的 confine 屬性設(shè)置為 true，開啟邊界約束。這樣，當(dāng)鼠標(biāo)懸停在圖表上時(shí)，提示框的位置會(huì)被限制在圖表的區(qū)域內(nèi)，避免超出圖表的邊界。
:有些配置需要用的時(shí)候直接百度就可以了 感覺有目的的查會(huì)比看文檔快一些
到此這篇關(guān)于在Vue中使用Echarts 使用+封裝的文章就介紹到這了,更多相關(guān)在Vue中使用Echarts 使用+封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案
本篇文章主要介紹了vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
詳解swiper在vue中的應(yīng)用(以3.0為例）
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法
本文主要介紹了vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要給大家介紹了關(guān)于多個(gè)vue子路由文件自動(dòng)化合并的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08
vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格鏈接頁面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)和路由,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03