以下是使用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);

解释:

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

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

使用echart创建一个有阴影的柱形图

原文地址: https://www.cveoy.top/t/topic/AiZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录