用echarts写一个折线图数据钻取成柱状图

以下是一个使用ECharts实现折线图数据钻取成柱状图的示例代码：

HTML代码：

<div id="chart" style="width: 100%; height: 500px;"></div>

JavaScript代码：

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

// 定义折线图的数据
var data = [
  [10, 20, 30, 40, 50, 60, 70],
  [20, 30, 40, 50, 60, 70, 80],
  [30, 40, 50, 60, 70, 80, 90],
  [40, 50, 60, 70, 80, 90, 100]
];

// 定义折线图的配置项
var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['数据1', '数据2', '数据3', '数据4']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数据1',
      type: 'line',
      data: data[0]
    },
    {
      name: '数据2',
      type: 'line',
      data: data[1]
    },
    {
      name: '数据3',
      type: 'line',
      data: data[2]
    },
    {
      name: '数据4',
      type: 'line',
      data: data[3]
    }
  ]
};

// 绘制折线图
myChart.setOption(option);

// 监听折线图的点击事件
myChart.on('click', function(params) {
  // 获取点击的数据及其索引
  var name = params.seriesName;
  var index = option.legend.data.indexOf(name);

  // 将折线图数据转换成柱状图数据
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var item = {
      name: option.legend.data[i],
      type: 'bar',
      data: data[i]
    };
    if (i === index) {
      item.type = 'line';
    }
    series.push(item);
  }

  // 定义柱状图的配置项
  var newOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: option.legend.data
    },
    xAxis: {
      type: 'category',
      data: option.xAxis.data
    },
    yAxis: {
      type: 'value'
    },
    series: series
  };

  // 绘制柱状图
  myChart.setOption(newOption);
});

在上述代码中，首先通过定义折线图的数据和配置项绘制了一个折线图，然后监听了折线图的点击事件，在点击事件中将折线图数据转换成柱状图数据，并定义了柱状图的配置项，最后通过调用`setOption`方法绘制了柱状图。在转换折线图数据为柱状图数据时，需要注意将被点击的数据转换为折线图，其他数据转换为柱状图。