vue+echars封裝氣泡圖的方法
本文實例為大傢分享瞭vue+echars封裝氣泡圖的具體代碼,供大傢參考,具體內容如下
前端可視化封裝氣泡圖
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] // 四個數字分別為上右下左與原位置距離 }, 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); }, // 設置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); }, // 設置圖表 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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue3中echarts的tooltip組件不顯示問題及解決
- 利用Echarts如何實現多段圓環圖
- vue中echarts關系圖動態增刪節點以及連線方式
- vue實現橫向斜切柱狀圖
- vue+echarts實現進度條式柱狀圖