您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么用vue+echars封裝氣泡圖”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
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: { // 初始化實例 initChart() { // 掛在 DOM this.chartInstance = this.$echarts.init(this.$refs.bubbleChart); // 初始化配置項 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>
“怎么用vue+echars封裝氣泡圖”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。