echarts用一张画布中绘制作两个图表，通过tooltip分别进行格式化

使用ECharts可以很方便地实现在一张画布中绘制两个图表并且通过tooltip进行格式化。下面是示例代码：

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

// 配置选项
var option = {
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      name: 'Chart 1',
      type: 'bar',
      data: [10, 20, 30, 40, 50, 60, 70],
      itemStyle: {
        color: 'blue'
      }
    },
    {
      name: 'Chart 2',
      type: 'line',
      data: [20, 30, 40, 50, 60, 70, 80],
      itemStyle: {
        color: 'red'
      }
    }
  ]
};

// 绘制图表
myChart.setOption(option);

// 添加tooltip
myChart.on('mouseover', function(params) {
  // 获取当前鼠标悬停的系列名称和数据
  var seriesName = params.seriesName;
  var data = params.data;
  // 格式化tooltip内容
  var tooltipContent = '';
  if (seriesName === 'Chart 1') {
    tooltipContent = 'Chart 1: ' + data;
  } else {
    tooltipContent = 'Chart 2: ' + data;
  }
  // 显示tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: params.seriesIndex,
    dataIndex: params.dataIndex,
    tooltipOption: {
      formatter: function() {
        return tooltipContent;
      }
    }
  });
});

// 隐藏tooltip
myChart.on('mouseout', function(params) {
  myChart.dispatchAction({
    type: 'hideTip'
  });
});

在这段代码中，我们首先初始化了一个ECharts实例，并定义了一个配置选项。然后，使用`setOption`方法将配置选项应用到画布上，实现了两个图表的绘制。接下来，我们添加了鼠标事件监听器，当鼠标悬停在某个数据点上时，就会触发`mouseover`事件，从而显示对应的tooltip。在tooltip中，我们根据当前悬停的系列名称和数据来格式化tooltip内容。当鼠标移开时，就会触发`mouseout`事件，从而隐藏tooltip。