优化后的饼图效果

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 制作并优化了一个柱状图。在实际应用中，大家可以根据具体的数据和业务需求，进一步调整图表的样式和交互效果，让数据可视化更加美观和实用。希望这篇教程能对大家在前端数据可视化开发中有所帮助