vue+echarts封裝氣泡圖的方法
更新時(shí)間：2023年05月09日 10:24:41 作者：醒醒打工仔
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue+echarts封裝氣泡圖的具體代碼，供大家參考，具體內(nèi)容如下
前端可視化封裝氣泡圖
1. html
<template> ? <div class="bubble-chart"> ? ? <div ref="bubbleChart" class="bubble"></div> ? </div> </template>
2. js
<script>
export default {
? name: "BubbleChart",
? props: {
? ? rowData: {
? ? ? default: () => {
? ? ? ? return [
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: -20,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: -38,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 44,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 42,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 35,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 30,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: -25,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 20,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 12,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長(zhǎng)",
? ? ? ? ? ? value: 15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: -15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 30,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: -21,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: -22,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 23,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 8,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 56,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: 31,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營(yíng)收增長(zhǎng)",
? ? ? ? ? ? value: -3,
? ? ? ? ? },
? ? ? ? ];
? ? ? },
? ? },
? ? color: {
? ? ? default: () => {
? ? ? ? return "#50BCD8";
? ? ? },
? ? },
? ? legends: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return ["員工增長(zhǎng)", "營(yíng)收增長(zhǎng)"];
? ? ? },
? ? },
? },
? data() {
? ? return {
? ? ? chartInstance: null,
? ? ? staffData: [],
? ? ? revenueData: [],
? ? ? dataList: [],
? ? };
? },
? mounted() {
? ? this.initChart();
? },
? methods: {
? ? // 初始化實(shí)例
? ? initChart() {
? ? ? // ?掛在 DOM
? ? ? this.chartInstance = this.$echarts.init(this.$refs.bubbleChart);
? ? ? // ?初始化配置項(xiàng)
? ? ? let option = {
? ? ? ? grid: {
? ? ? ? ? left: "0%",
? ? ? ? ? right: "2%",
? ? ? ? ? bottom: "3%",
? ? ? ? ? containLabel: true,
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? name: this.legends[1],
? ? ? ? ? ?nameTextStyle: {
? ? ? ? ? ? padding: [40, 65, 0, -65] ? ?// 四個(gè)數(shù)字分別為上右下左與原位置距離
? ? ? ? },
? ? ? ? ? type: "value",
? ? ? ? ? scale: true,
? ? ? ? ? axisLabel: {
? ? ? ? ? ? formatter: "{value}",
? ? ? ? ? },
? ? ? ? ? splitLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: "#BFEBFF",
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? name: this.legends[0],
? ? ? ? ? type: "value",
? ? ? ? ? scale: true,
? ? ? ? ? axisLabel: {
? ? ? ? ? ? formatter: "{value}",
? ? ? ? ? },
? ? ? ? ? splitLine: {
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: "#BFEBFF",
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? },
? ? ? ? series: [],
? ? ? };
? ? ? this.setSeries(option);
? ? ? this.setOption(option);
? ? },
? ? // ?設(shè)置series
? ? setSeries(option) {
? ? ? this.rowData.forEach((e) => {
? ? ? ? if (e.name === this.legends[0]) {
? ? ? ? ? this.staffData.push(e);
? ? ? ? } else {
? ? ? ? ? this.revenueData.push(e);
? ? ? ? }
? ? ? });
? ? ? this.staffData.forEach((e, i) => {
? ? ? ? this.revenueData.forEach((item, index) => {
? ? ? ? ? if (i === index) {
? ? ? ? ? ? this.dataList.push([e.value, item.value]);
? ? ? ? ? }
? ? ? ? });
? ? ? });
? ? ? let _series = {
? ? ? ? data: this.dataList,
? ? ? ? type: "scatter",
? ? ? ? symbolSize: function(data) {
? ? ? ? ? return (Math.abs(data[1]) + Math.abs(data[0])) / 2;
? ? ? ? },
? ? ? ? label: {
? ? ? ? ? show: false,
? ? ? ? },
? ? ? ? itemStyle: {
? ? ? ? ? normal: {
? ? ? ? ? ? color: this.color,
? ? ? ? ? },
? ? ? ? },
? ? ? };
? ? ? option.series.push(_series);
? ? },
? ? // ?設(shè)置圖表
? ? setOption(option) {
? ? ? this.chartInstance.setOption(option);
? ? },
? },
};
</script>3. css
<style lang="less" scoped>
.bubble-chart {
? width: 100%;
? height: 100%;
? .bubble {
? ? width: 100%;
? ? height: 100%;
? }
}
</style>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- React項(xiàng)目搭建與Echarts工具使用詳解
- echarts 3D地圖為區(qū)域自定義顏色的解決方法
- 在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
- 使用GetInvalidFileNameCharts生成文件名
- 解決echarts中餅圖標(biāo)簽重疊的問(wèn)題
- echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
- echarts餅圖指示器文字顏色設(shè)置不同實(shí)例詳解
- echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
- echarts實(shí)現(xiàn)餅圖與樣式設(shè)置
- echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
- 基于Echarts實(shí)現(xiàn)餅圖效果
- Vue ECharts餅圖實(shí)現(xiàn)方法詳解
- Echarts實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖的示例代碼
相關(guān)文章
一文詳解Vue3中簡(jiǎn)單diff算法的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹Vue3中簡(jiǎn)單diff算法的實(shí)現(xiàn)與使用，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
解決vue項(xiàng)目使用font-awesome,build后路徑的問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目使用font-awesome,build后路徑的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
el-popover是一個(gè)基于element-ui框架設(shè)計(jì)的,用于浮動(dòng)展示提示或菜單的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue.js修改el-popover組件顯示位置的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(2)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本文主要介紹了Vite熱更新失效的問(wèn)題解決,原因是文件夾和文件名大小寫不一致,下面就來(lái)解決一下次問(wèn)題,感興趣的可以了解一下2024-08-08
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開(kāi)發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下2022-03-03
在一般情況下,vue項(xiàng)目代碼部署發(fā)布只需將代碼打包后直接上傳到服務(wù)器即可,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并發(fā)布的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01