vue+echars封装气泡图的方法
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
