ECharts 柱状图实战：从基础到高级，手把手教你打造动态可视化图表！」「ECharts 柱状图开发指南：超详细教程+完整代码，新手必看！」「前端新手必学：ECharts 柱状图自定义样式全解析

最新推荐文章于 2025-01-26 17:16:59 发布

南北极之间

最新推荐文章于 2025-01-26 17:16:59 发布

阅读量1.1k

点赞数 15

分类专栏： echarts图表从入门到精通文章标签：前端 echarts javascript

本文链接：https://blog.csdn.net/qq_22182989/article/details/145369658

版权

echarts图表从入门到精通专栏收录该内容

22 篇文章

订阅专栏

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

以下是一个带有详细注释的 ECharts 柱状图 示例代码。柱状图适用于展示不同类别的数据对比，适合用于展示销售数据、用户分布等场景。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts 柱状图 - 详细注释</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 20px;
    }
    #chart {
      width: 100%;
      height: 500px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div id="chart"></div>

  <script>
    // 初始化 ECharts 实例
    const chart = echarts.init(document.getElementById('chart'));

    // 基础数据
    const xAxisData = ['类别A', '类别B', '类别C', '类别D', '类别E'];
    const seriesData = [120, 200, 150, 80, 70]; // 柱状图数据

    // 配置项
    const option = {
      // 标题
      title: {
        text: '柱状图示例', // 图表标题
        left: 'center', // 标题居中
        textStyle: {
          color: '#333', // 标题颜色
          fontSize: 18 // 标题字体大小
        }
      },
      // 提示框
      tooltip: {
        trigger: 'axis', // 触发类型，axis 表示坐标轴触发
        axisPointer: {
          type: 'shadow' // 指示器类型，shadow 表示阴影指示器
        }
      },
      // 网格
      grid: {
        left: '10%', // 左边距
        right: '10%', // 右边距
        bottom: '15%', // 下边距
        containLabel: true // 包含坐标轴标签
      },
      // X 轴
      xAxis: {
        type: 'category', // 类目轴
        data: xAxisData, // X 轴数据
        axisLabel: {
          color: '#666', // X 轴标签颜色
          fontSize: 12 // X 轴标签字体大小
        },
        axisLine: {
          lineStyle: {
            color: '#ccc' // X 轴线颜色
          }
        }
      },
      // Y 轴
      yAxis: {
        type: 'value', // 数值轴
        axisLabel: {
          color: '#666', // Y 轴标签颜色
          fontSize: 12 // Y 轴标签字体大小
        },
        axisLine: {
          lineStyle: {
            color: '#ccc' // Y 轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee' // Y 轴分割线颜色
          }
        }
      },
      // 系列数据
      series: [{
        name: '销量', // 系列名称
        type: 'bar', // 柱状图
        data: seriesData, // 系列数据
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' }, // 渐变起始颜色
            { offset: 0.5, color: '#188df0' }, // 渐变中间颜色
            { offset: 1, color: '#188df0' } // 渐变结束颜色
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' }, // 高亮时渐变起始颜色
              { offset: 0.7, color: '#2378f7' }, // 高亮时渐变中间颜色
              { offset: 1, color: '#83bff6' } // 高亮时渐变结束颜色
            ])
          }
        }
      }]
    };

    // 设置配置项并渲染图表
    chart.setOption(option);
  </script>
</body>
</html>