在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.簡單筆記
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?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁面內(nèi)容定位的方法
本前端仔在做頁面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁面時(shí)候,把對(duì)應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下2024-04-04
element基于el-form智能的FormSmart表單組件
本文主要介紹了element基于el-form智能的FormSmart表單組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的詳細(xì)教程
Vue腳手架指的是vue-cli,它是一個(gè)快速構(gòu)建**單頁面應(yīng)用程序(SPA)**環(huán)境配置的工具，cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue實(shí)例中el和data的兩種寫法小結(jié)
這篇文章主要介紹了Vue實(shí)例中el和data的兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
本文主要以 vue-cli3 搭建的項(xiàng)目為例，來聊一下如何在項(xiàng)目中更優(yōu)雅的使用 svg 。感興趣的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要為大家介紹了vue 支持百萬量級(jí)的無限滾動(dòng)組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
vite如何build時(shí)清除console.log()問題
這篇文章主要介紹了vite如何build時(shí)清除console.log()問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07