登录
【拒绝平庸】Vue+ECharts图表美化--柱状图展示优化教程
2025年7月2日 20:01
优化后的饼图效果
Scss样式部分
html,body{
width: 100%;
height: 100%;
padding:0px;
box-sizing: border-box;
overflow: hidden;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.layout-demo-box{
display: flex;
flex-direction: column;
width: 540px;
height: 300px;
background: linear-gradient(
to bottom,
#000e2a 0%,
#000000 10%,
#001134 100%
);
border: 1px solid #00436e;
border-radius: 5px;
*{
box-sizing: border-box;
}
.title-box{
display: flex;
align-items: center;
width: 100%;
height: 50px;
flex-shrink: 0;
padding: 20px 30px 0px 20px;
span{
flex-shrink: 0;
&:nth-child(1){
width: 0px;
flex-grow: 1;
}
}
.btn-box{
display: block;
color:#6bf6fc;
cursor: pointer;
}
h1{
font-size: 14px;
line-height: 16px;
margin: 0px;
background: linear-gradient(to top, #00d1fe, #fff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
p{
font-size: 12px;
margin:2px 0px;
color:#416387;
}
}
.chart-box{
width: 100%;
height: 0px;
flex:1;
}
}
HTML页面部分
<div id="app">
<!-- demo内容 start -->
<div class="layout-demo-box">
<div class="title-box">
<span>
<h1>柱状图面板</h1>
<p>统计日期(2025-07-02 12:00:00)</p>
</span>
</div>
<div class="chart-box" id="chartId"></div>
</div>
<!-- demo内容 end -->
</div>
JS页面部分
methods: {
/**
* 初始化并渲染 ECharts 图表
* 功能说明：
* 1. 创建 ECharts 实例并渲染图表
* 2. 自动响应窗口大小变化
* 3. 组件销毁时自动清理资源防止内存泄漏
*/
initEcharts() {
// 1. 获取 DOM 元素 - 添加空检查
const chartDom = document.getElementById('chartId');
if (!chartDom) {
console.warn(' 图表容器不存在');
return;
}
// 2. 初始化图表实例
this.myChart = echarts.init(chartDom);
// 3. 设置图表配置
const option = {
// option 配置 start ---------------------------------------
// option 配置 end ---------------------------------------
};
// 4. 应用配置
try {
this.myChart.setOption(option);
} catch (error) {
console.error(' 图表配置错误:', error);
}
// 5. 响应式处理 - 使用防抖优化性能
this.handleResize = debounce(() => {
this.myChart && this.myChart.resize();
}, 300);
window.addEventListener('resize', this.handleResize);
},
// 清理资源
destroyEcharts() {
if (this.myChart) {
window.removeEventListener('resize', this.handleResize);
this.myChart.dispose();
this.myChart = null;
}
}
},
// Vue生命周期钩子-组件挂载完成后调用
mounted() {
this.$nextTick(() => {
this.initEcharts();
});
},
// Vue生命周期钩子-组件销毁前调用
beforeDestroy() {
this.destroyEcharts();
}
定义data数据
// 数据
chartData:{
xAxisData: ['语文','数学','英语','科学','历史'],
seriesData : [20, 80, 100, 40, 34, 90, 60]
},
柱状图的option配置
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: { // 鼠标经过背景色
color: 'rgba(0, 67, 110, 0.1)',
}
},
formatter: function(params) {
return params[0].marker + params[0].name + "成绩：" + params[0].data
}
},
animation: true,
grid: {
top: "40",
bottom: "40",
left: "50",
right: "20"
},
xAxis: {
data: chartData.xAxisData,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#0A376C'
}
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
margin: 14,
fontSize: 12,
textStyle: {
color: "#A3C0DF" //X轴文字颜色
}
}
},
yAxis: [
{
type: "value",
gridIndex: 0,
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 关键属性：虚线
color: '#011731',
width: 1
},
},
axisTick: {
show: false
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 14,
fontSize: 10,
textStyle: {
color: "#A3C0DF" //X轴文字颜色
}
}
}
],
series: [
{
name: "单科成绩",
type: "bar",
barWidth: 16,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#07ecd9"
},
{
offset: 1,
color: "#034881"
}
]),
}
},
data: chartData.seriesData,
z: 10,
zlevel: 2,
label: {
show: true,
position: "top",
distance: 5,
fontSize:12,
color: "#01fff4"
}
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal:{
color:"#0F375F"
}
},
symbolRepeat: "fixed",
symbolMargin: 2,
symbol: "rect",
symbolClip: true,
symbolSize: [16, 2],
symbolPosition: "start",
symbolOffset: [0, -1],
data: chartData.seriesData,
z: 0,
zlevel: 3,
}
]
在线Demo
下方可在线查看Demo完整代码
总结
通过以上步骤，我们成功地使用 Echarts 制作并优化了一个柱状图。在实际应用中，大家可以根据具体的数据和业务需求，进一步调整图表的样式和交互效果，让数据可视化更加美观和实用。希望这篇教程能对大家在前端数据可视化开发中有所帮助
