本篇内容介绍了“怎么用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>
“怎么用vue+echars封装气泡图”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。