web数据可视化(Echarts版)5-1双y轴折现图与柱状图混搭图表

Web数据可视化ECharts是一个强大的JavaScript库，用于创建交互式的数据可视化图表。在版本5.1中，你可以创建复杂的混搭图表，如双Y轴折线图与柱状图结合。这种图表结构通常用于展示两个维度的数据，其中一个维度的数据用折线图呈现，另一个维度的数据用柱状图表示。

例如，如果你想要比较产品销售额和销售时间的变化趋势，可以设置一个主Y轴（折线图）显示销售额随时间的增长，而副Y轴（柱状图）则用来表示每个时间段内的销售量。这样既能看到整体趋势又能快速看到各点的具体数值。

以下是创建这种图表的基本步骤：
1. **引入ECharts库**：首先在HTML文件中引入ECharts的JS文件。
2. **初始化图表**：使用ECharts API创建一个新的图表实例，并配置其属性，包括type（"scatter"表示折线，"bar"表示柱状），以及 yAxis 数组，分别对应主副两个Y轴。
3. **数据绑定**：将你的数据源传入图表的series数组，确保每个系列的数据包含正确的x值和对应的主、副Y值。
4. **设置坐标轴**：配置每个轴的标题、刻度和边界等细节。
5. **混合绘制**：在series里同时添加折线图和柱状图组件，它们会自动根据配置在同一图表上混合渲染。

<echarts id="main" :options="chartOptions"></echarts>

data() {
  return {
    chartOptions: {
      xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
      yAxis: [
        { type: 'value', name: '销售额', axisLabel: { formatter: '{value}万元' } },
        { type: 'value', position: 'right', name: '销售量' }
      ],
      series: [
        {
          name: '销售额',
          type: 'line',
          yAxisIndex: 0,
          data: [120, 132, 101, 134]
        },
        {
          name: '销售量',
          type: 'bar',
          yAxisIndex: 1,
          data: [220, 182, 191, 234]
        }
      ]
    }
  };
}