vue中封裝echarts公共組件過(guò)程
更新時(shí)間：2022年05月27日 11:58:48 作者：朵朵和太陽(yáng)
這篇文章主要介紹了vue中封裝echarts公共組件過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
定義圖表公共樣式是為了統(tǒng)一同一網(wǎng)站各頁(yè)面圖表的基礎(chǔ)樣式baseOption.js（軸線、區(qū)域、色系、字體），統(tǒng)一封裝后頁(yè)面需要直接引入，傳入所需參即可覆蓋基礎(chǔ)樣式。
以下示例封裝圖表組件Echart.vue。
1、安裝echarts
npm install echarts --save npm install lodash --save // 若已安裝請(qǐng)忽略
2、在mian.js中全局引入
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
3、下面開始封裝圖表
baseOption.js文件：公共樣式定義，為了統(tǒng)一同網(wǎng)站各種圖表的基礎(chǔ)樣式，比如軸線、圖各板塊顏色，值僅供參考）：
// baseOption.js
export default {
color: [
"#0067E1",
"#0CC1FF",
"#00D1B3",
"#85E814",
"#FFA082",
],
tooltip: {},
legend: {
orient:'horizontal',
type:'scroll',
pageIconSize:12,
pageIconColor:'#aaa',
pageIconInactiveColor :'#2f4554',
pageTextStyle:{
color:'#999999'
},
itemWidth:20,
itemHeight:12,
top:0,
textStyle:{
color:'#999999'
},
},
grid: {
top: "13%",
left: "3%",
right: "10%",
bottom: "2%",
containLabel: true,
},
xAxis: [
{
axisLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
// type: "dashed",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval:0,
color: "#rgba(0, 0, 0, 0.25)",
textStyle: {
fontSize: 10,
}
},
nameTextStyle:{
color:'#999999',
fontSize: 10,
},
},
],
yAxis: [
{
axisLabel: {
color: "#rgba(0, 0, 0, 0.25)",
textStyle: {
fontSize: 11,
},
},
axisLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
},
},
splitLine: {
lineStyle: {
color: "rgba(65, 97, 128, 0.15)",
},
},
axisTick: {
show: false,
},
nameTextStyle:{
color:'#999999',
fontSize: 10,
padding:[0,20,0,0]
},
minInterval: 1
},
],
};
Echart.vue文件：圖本身組件
// Echart.vue <template> ? <div :id="elId" style="height:100%,width:100%" /> </template>
<script>
import echarts from "echarts";
import { merge, debounce } from "lodash";
// 引入公共樣式
import baseOption from "./baseOption"
export default {
? data() {
? ? return {
? ? ? elId: "",
? ? ? vOption: {
? ? ? ? series: [],
? ? ? },
? ? };
? },
? props: {
? ? optionData: Object,
? },
? computed: {
? ? // 合并配置對(duì)象
? ? option() {
? ? ? return merge({}, baseOption, this.vOption, this.optionData);
? ? },
? },
? created() {
? ? this.elId = this.uuid();
? },
? mounted() {
? ? // 實(shí)例化echarts對(duì)象
? ? this.$nextTick(() => {
? ? ? this.initChart();
? ? });
? },
? beforeDestroy() {
? ? if (!this.chart) {
? ? ? return;
? ? }
? ? this.chart.dispose();
? ? this.chart = null;
? },
? watch: {
? ? optionData: {
? ? ? deep: true,
? ? ? handler: function() {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.initChart();
? ? ? ? });
? ? ? },
? ? },
? },
? methods: {
? ?? ?// 生成唯一uuid做為唯一標(biāo)識(shí)符
? ? uuid() {
? ? ? return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
? ? ? ? var r = (Math.random() * 16) | 0,
? ? ? ? ? v = c == "x" ? r : (r & 0x3) | 0x8;
? ? ? ? return v.toString(16);
? ? ? });
? ? },
? ? // 繪圖
? ? initChart() {
? ? ? if(!document.getElementById(this.elId)) return
? ? ? this.chart = echarts.init(document.getElementById(this.elId));
? ? ? this.chart.setOption(this.option);
? ? ? const that = this;
? ? ? window.addEventListener(
? ? ? ? "resize",
? ? ? ? debounce(() => { ? ?// 引入debounce，防止頻繁更改瀏覽頁(yè)尺寸出現(xiàn)頁(yè)面抖動(dòng)
? ? ? ? ? if (that.chart) {
? ? ? ? ? ? that.chart.resize();
? ? ? ? ? }
? ? ? ? }, 100)
? ? ? );
? ? },
? },
};
</script>4、接下來(lái)只需要在需要顯示圖表的地方引入Echart.vue
傳入目標(biāo)數(shù)據(jù)就可以了，以下示例數(shù)據(jù)為餅圖：
// index.vue
<template>
<div class="chartBox">
<Chart :optionData="chartData"></Chart>
</div>
</template>
<script>
// 引入Echart.vue組件
import Chart from "./Echart.vue";
export default {
components: {
Chart,
},
data() {
return {
// 圖目標(biāo)數(shù)據(jù)
chartData: {
tooltip: {
show:true,
trigger:'item',
formatter: " : {c} (vvxyksv9kd%)",
},
xAxis: [{ show: false }],
yAxis: [{ show: false }],
series: [
{
name: "訪問(wèn)來(lái)源",
type: "pie", // 餅圖
radius: ["30%", "45%"], // 餅圖大小
data: [
{ value: 1048, name: "搜索引擎" },
{ value: 735, name: "直接訪問(wèn)" },
{ value: 580, name: "郵件營(yíng)銷" },
{ value: 484, name: "聯(lián)盟廣告" },
{ value: 300, name: "視頻廣告" },
],
},
],
},
};
},
};
</script>
此時(shí)好看的餅圖就出現(xiàn)啦~~
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue的$http的get請(qǐng)求要加上params操作
這篇文章主要介紹了vue的$http的get請(qǐng)求要加上params操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue框架提供了前端開發(fā)組件的思想，可以通過(guò)組件來(lái)組合成一個(gè)完整的頁(yè)面，都是隨著組件數(shù)量原來(lái)越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫(kù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例
在前端開發(fā)中,當(dāng)用戶頻繁連續(xù)點(diǎn)擊按鈕,可能會(huì)導(dǎo)致頻繁的請(qǐng)求或者觸發(fā)過(guò)多的操作,本文主要介紹了vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-01-01
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項(xiàng)目中遇到了一個(gè)需求，我們通過(guò)Vue.nextTick()來(lái)解決這一需求，但發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來(lái)總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料，需要的朋友可以參考下。2017-08-08
vuejs+element-ui+laravel5.4上傳文件的示例代碼
本篇文章主要介紹了vuejs+element-ui+laravel5.4上傳文件的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
element中async-validator異步請(qǐng)求驗(yàn)證使用
本文主要介紹了element中async-validator異步請(qǐng)求驗(yàn)證使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本篇文章主要介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08