ECharts 柱形图阴影效果实现教程

以下是使用 ECharts 创建有阴影的柱形图的示例代码：

HTML：

<div id='chart-container' style='width: 600px; height: 400px;'></div>

JavaScript：

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart-container'));

// 配置项
var option = {
  // 图表标题
  title: {
    text: '有阴影的柱形图'
  },
  // 图表图例
  legend: {
    data: ['销量']
  },
  // X 轴数据
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  // Y 轴数据
  yAxis: {},
  // 柱形图数据
  series: [{
    name: '销量',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130],
    // 添加阴影
    itemStyle: {
      normal: {
        color: 'rgba(0,0,0,0.05)',
        shadowColor: 'rgba(0,0,0,0.1)',
        shadowBlur: 10,
        shadowOffsetY: 5
      }
    }
  }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

解释：

创建一个 div 元素作为图表容器。
初始化 ECharts 实例并将其绑定到图表容器上。
配置图表项，包括图表标题、图例、X 轴和 Y 轴数据以及柱形图数据。
在柱形图的 itemStyle 中添加阴影属性。
将配置项和数据应用于图表实例，并显示图表。

在这个示例中，我们使用了柱形图的 itemStyle 属性来添加阴影。我们设置了阴影的颜色、阴影的模糊程度和阴影的偏移量。这样可以让柱形图看起来更加立体化，更加美观。