引言

数据可视化是现代Web应用的重要组成部分，它能将复杂的数据以直观的图形方式呈现，帮助用户快速理解数据背后的信息。本文将介绍如何使用ECharts库实现智慧社区住户数据的可视化展示，包括柱状图和饼图两种常见图表类型的实现与优化。

技术栈

Vue.js：前端框架
ECharts：强大的数据可视化库
Axios：HTTP请求库（用于获取数据）

项目结构分析

1. 页面布局

<template><div class="app-container"><div><div id="myChart" style="width: 50%;height:600px;margin-top: 10px; float: left"></div><div id="myChart2" style="width: 50%;height:600px;margin-top: 10px; float: right"></div></div></div>
</template>

这种布局实现了：

左右并排的两个图表容器
各占50%宽度，高度固定为600px
顶部10px的外边距
使用浮动实现左右布局

2. 数据获取

import { chart } from '@/api/sys/inOut'methods: {drawLine(){chart().then(res => {// 图表初始化代码})}
}

通过封装的API接口chart()获取数据，返回的Promise对象在resolve后处理数据并渲染图表。

柱状图实现详解

1. 基础配置

let myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption({color: ['#3398DB'],title: {text: '智慧社区住户量统计',subtext: '对比图',left: 'center'},// 其他配置...
})

关键点：

使用#3398DB作为柱状图的主色调
设置主标题和副标题
标题居中显示

2. 交互与提示

tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: '{b}<br/>住户量: {c}'
}

优化点：

触发类型为坐标轴触发
阴影类型的坐标轴指示器
自定义提示框内容格式

3. 坐标轴配置

xAxis: {type: 'category',data: res.data.names,axisLabel: {rotate: 30,interval: 0}
},
yAxis: {type: 'value',name: '住户量',nameLocation: 'middle',nameGap: 30
}

特色处理：

X轴标签旋转30度防止重叠
强制显示所有标签（interval: 0）
Y轴名称居中显示，与轴线的间距为30px

4. 数据系列与样式

series: [{name: '住户量',type: 'bar',barWidth: '60%',data: res.data.nums,itemStyle: {borderRadius: [4, 4, 0, 0],shadowColor: 'rgba(0, 0, 0, 0.3)',shadowBlur: 5,shadowOffsetY: 3},label: {show: true,position: 'top',formatter: '{c}'}
}]

样式亮点：

柱状图宽度为60%
顶部圆角效果
阴影效果增强立体感
顶部显示数值标签

饼图实现详解

1. 基础配置

let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
myChart2.setOption({title: {text: '智慧社区住户量统计',subtext: '占比图',left: 'center'},// 其他配置...
})

与柱状图类似，但展示的是占比关系而非绝对数值。

2. 图例与交互

legend: {orient: 'vertical',left: 'left',data: res.data.list.map(item => item.name)
},
tooltip: {trigger: 'item',formatter: '{a}<br/>{b}: {c} ({d}%)'
}

特点：

垂直排列的图例
左侧显示
提示框显示百分比和绝对值

3. 环形图实现

series: [{name: '住户量',type: 'pie',radius: ['40%', '70%'],center: ['50%', '55%'],data: res.data.list.sort(function (a, b) { return a.value - b.value; }),// 其他样式配置...}
]

关键参数：

radius: ['40%', '70%']实现环形图效果
数据按值排序，使图表更美观
中心点稍微下移(55%)，为标题留出空间

4. 样式优化

itemStyle: {borderRadius: 5,borderColor: '#fff',borderWidth: 2,shadowBlur: 5,shadowColor: 'rgba(0, 0, 0, 0.2)'
},
label: {show: true,formatter: '{b}: {d}%'
},
emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}
}

视觉增强：

扇形区块圆角
白色边框分隔各区块
悬浮时的高亮效果
显示百分比标签

性能与体验优化

动画效果：两个图表都设置了animationDuration: 1500，1.5秒的动画过渡使数据展示更生动
响应式设计：图表容器使用百分比宽度，可以适应不同屏幕尺寸
数据排序：饼图数据按值排序，提升可读性
标签处理：柱状图X轴标签旋转防止重叠，确保所有标签可见

后端数据结构

理想的后端返回数据结构应包含：

{"data": {"names": ["社区A", "社区B", "社区C"],"nums": [100, 200, 150],"list": [{"name": "社区A", "value": 100},{"name": "社区B", "value": 200},{"name": "社区C", "value": 150}]}
}

这种结构同时满足柱状图(分类+数值)和饼图(名称+值)的需求。