ECharts柱状图知识点总结表

    itemStyle: {
      color: new echarts.graphic.LinearGradient(
    0, 0, 0, 1, // 渐变方向（垂直）
    [
      { offset: 0, color: '#4facfe' }, 
      { offset: 1, color: '#00f2fe' }
    ]
      )
    }
    
    
    javascript

    // 初始标记
    markArea: {
      data: [[{ xAxis: 0 }, { xAxis: 0 }]],
      itemStyle: { color: 'rgba(255,0,0,0.1)' }
    }
    
    // 动态更新
    myChart.setOption({
      series: [{
    markArea: { data: newMarkData }
      }]
    }, false)
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/k6PC1H3TGtlVxz8qWhiEwufDgByU.png)

    // 高亮联动
    myChart.on('mouseover', { seriesIndex: 0 }, (params) => {
      myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: params.dataIndex
      });
    });
    
    
    javascript

    <script setup>
    import * as echarts from 'echarts'; // 引入完整的echarts库，也可以按需引入减小体积
    
    // 使用ref创建DOM引用，用于图表初始化
    const chartDomRef = ref(null);
    // 图表实例变量
    let myChart = null;
    // 用于监听容器大小变化的观察器
    let resizeObserver = null;
    
    // 定义标记区域数据，便于后续操作
    // markArea用于在图表上标记特定区域，这里标记了第1、3、5个柱子
    const markAreaData = [0, 2, 4].map(index => [{
      xAxis: index // 标记区域的起始位置
    }, {
      xAxis: index // 标记区域的结束位置（与起始相同表示只标记单个柱子）
    }]);
    
    // 初始化图表的函数
    const initChart = () => {
      if (!myChart) {
    // 初始化ECharts实例，传入DOM容器
    myChart = echarts.init(chartDomRef.value);
    
    // 设置图表配置项
    myChart.setOption({
      // 设置背景色为透明
      backgroundColor: 'transparent',
      
      // 图表的网格配置，控制图表在容器中的位置和大小
      grid: {
        left: '3%',    // 减小左侧留白
        right: '3%',   // 减小右侧留白
        top: '20%',    // 减小顶部留白
        bottom: '10%', // 减小底部留白
        containLabel: true // 网格区域是否包含坐标轴的刻度标签
      },
      
      // X轴配置
      xAxis: {
        type: 'category', // 类目轴，适用于离散数据
        nameLocation: 'end', // 坐标轴名称显示位置
        name: '星期', // 坐标轴名称
        nameGap: 10,  // 坐标轴名称与轴线之间的距离
        nameTextStyle: { // 坐标轴名称的文字样式
          color: '#c8eeff',
          fontSize: 10,
          align: 'right',         // 文本对齐方式
          verticalAlign: 'top',   // 垂直对齐方式
          padding: [8, 0, 0, 0]   // 上右下左内边距
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',], // X轴类目数据
        axisLine: { // 坐标轴线的样式设置
          lineStyle: { color: '#8392A5' }
        },
        axisTick: { // 坐标轴刻度相关设置
          show: false  // 隐藏刻度线（锯齿）
        },
        axisLabel: { // 坐标轴刻度标签的设置
          color: '#c8eeff',
          fontSize: 10,
          interval: 0,  // 强制显示所有标签，0表示全部显示
          rotate: 0     // 标签旋转角度，0表示水平
        }
      },
      
      // Y轴配置
      yAxis: {
        type: 'value', // 数值轴，适用于连续数据
        name: '次数', // 坐标轴名称
        nameTextStyle: { // 坐标轴名称的文字样式
          color: '#c8eeff',
          fontSize: 10,
          padding: [0, 0, 0, -30] // 调整名称位置
        },
        axisLine: { // 坐标轴线相关设置
          show: false, // 不显示坐标轴线
        },
        splitLine: { // 分隔线设置
          show: true, // 显示分隔线
          lineStyle: { // 分隔线样式
            color: 'rgba(112, 112, 112, .31)',
            width: 1,
          }
        },
        axisLabel: { // 坐标轴刻度标签的设置
          color: '#c8eeff',
          fontSize: 10
        }
        // 未使用的Y轴属性：
        // min/max: 坐标轴最小/最大值
        // interval: 强制设置坐标轴分割间隔
        // splitNumber: 分割段数
      },
      
      // 系列列表，每个系列通常是一种类型的数据
      series: [
        {
          data: [120, 200, 150, 110, 130], // 系列中的数据内容
          type: 'bar', // 图表类型：柱状图
          barWidth: '40%',  // 柱条宽度，可以是绝对值或百分比
          showBackground: true, // 是否显示柱条的背景色
          backgroundStyle: { // 柱条背景样式
            color: 'transparent' // 背景透明
          },
          // 高亮状态的样式设置
          emphasis: {
            itemStyle: { // 图形样式
              // 使用渐变色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: 'rgba(0, 194, 255, 0.3)' }, // 渐变结束颜色
                { offset: 0.1, color: 'rgba(0, 194, 255, 1)' }, // 渐变中间颜色
                { offset: 0, color: '#fff' }, // 渐变开始颜色
              ]),
              borderColor: '#fff', // 边框颜色
              borderWidth: 1, // 边框宽度
              shadowColor: 'rgba(0, 194, 255, 0.8)', // 阴影颜色
              shadowBlur: 10 // 阴影模糊大小
            }
            // 未使用的emphasis属性：
            // focus: 聚焦时的表现 'none'/'self'/'series'
            // scale: 是否放大高亮图形
          },
          // 普通状态下的样式设置
          itemStyle: {
            // 使用渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'transparent' }, // 渐变结束颜色
              { offset: 0.1, color: 'rgba(0, 194, 255, 1)' }, // 渐变中间颜色
              { offset: 0, color: '#fff' }, // 渐变开始颜色
            ])
            // 未使用的itemStyle属性：
            // borderRadius: 柱条圆角半径
            // opacity: 透明度
          },
          // 标记区域设置
          markArea: {
            silent: true, // 是否不响应鼠标事件
            itemStyle: { // 标记区域样式
              color: 'rgba(4, 195, 255, .15)', // 区域填充色
              borderColor: 'rgba(4, 195, 255, .15)', // 区域边框色
            },
            data: markAreaData, // 标记区域数据
          }
          // 未使用的系列属性：
          // name: 系列名称，用于tooltip和legend
          // stack: 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
          // label: 图形上的文本标签
          // markPoint: 标记点
          // markLine: 标记线
        },
      ],
      
      // 提示框组件配置
      tooltip: {
        trigger: 'axis', // 触发类型：坐标轴触发
        axisPointer: {    // 坐标轴指示器配置
          type: 'shadow', // 指示器类型：阴影指示器
          shadowStyle: { // 阴影指示器样式
            color: 'rgba(0, 194, 255, 0.1)' // 阴影颜色
          }
        },
        formatter: function (params) { // 提示框内容格式器
          // params[0]包含当前柱子的所有信息
          return `在${params[0].name}次数，数量${params[0].value}次`;
        },
        backgroundColor: 'rgba(0, 0, 0, 0.7)', // 提示框背景色
        borderColor: 'rgba(0, 194, 255, 0.6)', // 提示框边框色
        borderWidth: 1, // 提示框边框宽度
        textStyle: { // 提示框文字样式
          color: '#fff',
          fontSize: 12
        }
        // 未使用的tooltip属性：
        // position: 提示框位置
        // extraCssText: 额外的CSS样式
      },
      // 未使用的全局配置：
      // title: 标题组件
      // legend: 图例组件
      // dataZoom: 区域缩放组件
      // visualMap: 视觉映射组件
      // color: 调色盘颜色列表
    });
    
    // 添加鼠标事件监听
    // mouseover: 鼠标悬停事件
    myChart.on('mouseover', function (params) {
      // 判断是否是柱状图系列的事件
      if (params.componentType === 'series' && params.seriesType === 'bar') {
        // 鼠标悬停在柱子上时，移除标记区域
        myChart.setOption({
          series: [{
            markArea: {
              data: [] // 设置为空数组，移除标记区域
            }
          }]
        }, false); // false表示不合并配置，直接替换
      }
    });
    
    // mouseout: 鼠标移出事件
    myChart.on('mouseout', function (params) {
      // 判断是否是柱状图系列的事件
      if (params.componentType === 'series' && params.seriesType === 'bar') {
        // 鼠标移出柱子时，恢复标记区域
        myChart.setOption({
          series: [{
            markArea: {
              data: markAreaData // 恢复原标记区域数据
            }
          }]
        }, false);
      }
    });
    // 未使用的事件：
    // click: 点击事件
    // dblclick: 双击事件
    // legendselectchanged: 图例选中状态改变事件
      }
    };
    
    // 组件挂载后执行
    onMounted(() => {
      // 初始化图表
      initChart();
      
      // 创建ResizeObserver监听器，用于响应容器大小变化
      resizeObserver = new ResizeObserver(() => {
    if (myChart) {
      // 调整图表大小，带有动画效果
      myChart.resize({ animation: { duration: 300 } });
    }
      });
    
      // 开始观察图表容器
      if (chartDomRef.value) {
    resizeObserver.observe(chartDomRef.value);
      }
    });
    
    // 组件卸载前执行清理工作
    onBeforeUnmount(() => {
      // 清理观察器
      if (resizeObserver) {
    resizeObserver.disconnect();
      }
      // 销毁图表实例，释放内存
      if (myChart) {
    myChart.dispose();
    myChart = null;
      }
    });
    </script>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/6JigHG7ICsOoMk3YpXnaZcNmFbBT.png)