写一个柱状图带下钻的echarts图列

下面是一个简单的柱状图带下钻的 Echarts 图例:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '销售额统计',
        subtext: '数据来自: XXX公司'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['销售额']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisTick: {
            alignWithLabel: true
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'销售额',
            type:'bar',
            barWidth: '60%',
            data:[100, 200, 300, 400, 500, 600, 700],
            itemStyle: {
                color: '#2f4554'
            },
            emphasis: {
                itemStyle: {
                    color: '#c23531'
                }
            },
            // 添加下钻事件
            drilldown: {
                series: [
                    {
                        name: '周一',
                        type: 'bar',
                        data: [10, 20, 30, 40, 50, 60, 70],
                        itemStyle: {
                            color: '#2f4554'
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#c23531'
                            }
                        }
                    },
                    {
                        name: '周二',
                        type: 'bar',
                        data: [20, 30, 40, 50, 60, 70, 80],
                        itemStyle: {
                            color: '#2f4554'
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#c23531'
                            }
                        }
                    }
                ]
            }
        }
    ]
};

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

// 添加下钻事件
myChart.on('click', function (params) {
    if (params.seriesIndex === 0 && params.componentType === 'series') {
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
        });
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: params.dataIndex
        });
        myChart.setOption({
            series: option.series[0].drilldown.series[params.dataIndex]
        });
    }
});

在这个例子中，我们创建了一个简单的柱状图，其中包含了一些基本的配置项，例如标题、图例、网格和坐标轴。我们还添加了一个下钻功能，当用户单击柱状图时，它会显示该数据的详细信息。

这个下钻功能是通过 Echarts 的 `drilldown` 和 `dispatchAction` 方法实现的。 在 `drilldown` 中，我们定义了一些子系列，当用户单击柱状图时，它会显示相应的子系列。 在 `click` 事件处理程序中，我们检查用户单击的是哪个系列，然后使用 `dispatchAction` 方法更新图表的选中状态和子系列。