vue+echarts封裝氣泡圖的方法
更新時間：2023年05月09日 10:24:41 作者：醒醒打工仔
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(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: "員工增長",
? ? ? ? ? ? value: -20,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: -38,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 44,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 42,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 35,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 30,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: -25,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 20,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 12,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "員工增長",
? ? ? ? ? ? value: 15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: -15,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 30,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: -21,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: -22,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 23,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 8,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 56,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: 31,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "營收增長",
? ? ? ? ? ? value: -3,
? ? ? ? ? },
? ? ? ? ];
? ? ? },
? ? },
? ? color: {
? ? ? default: () => {
? ? ? ? return "#50BCD8";
? ? ? },
? ? },
? ? legends: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return ["員工增長", "營收增長"];
? ? ? },
? ? },
? },
? 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] ? ?// 四個數(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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- React項(xiàng)目搭建與Echarts工具使用詳解
- echarts 3D地圖為區(qū)域自定義顏色的解決方法
- 在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
- 使用GetInvalidFileNameCharts生成文件名
- 解決echarts中餅圖標(biāo)簽重疊的問題
- echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
- echarts餅圖指示器文字顏色設(shè)置不同實(shí)例詳解
- echarts餅圖各個板塊之間的空隙如何實(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)動餅圖的示例代碼
相關(guān)文章
本篇文章主要介紹了vue使用watch 觀察路由變化，重新獲取內(nèi)容 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實(shí)現(xiàn)的相關(guān)資料，實(shí)現(xiàn)Observer構(gòu)造函數(shù)，監(jiān)聽已有數(shù)據(jù)data中的所有屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Vue+Bootstrap實(shí)現(xiàn)簡易學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實(shí)現(xiàn)簡易學(xué)生管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
本文通過實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue將文件/圖片批量打包下載zip的教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個對象，使其每個對象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3的頁面跳轉(zhuǎn)有兩種方式，第一種是標(biāo)簽內(nèi)跳轉(zhuǎn)，第二種是編程式路由導(dǎo)航，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-05-05
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04