vue中使用echarts 写一个自定义折柱混合图

在vue中使用echarts来画自定义折柱混合图，可以按照以下步骤进行：

1. 安装echarts

在vue项目中安装echarts，可以使用npm命令：

npm install echarts --save

2. 引入echarts

在需要使用echarts的组件中，引入echarts：

import echarts from 'echarts'

3. 定义图表容器

在模板中定义一个div容器，用于显示echarts图表：

<template>
  <div id="myChart" style="width: 100%; height: 400px;"></div>
</template>

4. 创建图表实例

在组件的mounted生命周期中，创建echarts实例并绑定到容器上：

mounted() {
  // 初始化echarts实例
  const myChart = echarts.init(document.getElementById('myChart'))
  // 绑定数据到echarts实例中
  myChart.setOption({...})
}

5. 设置图表数据

在echarts实例中，设置图表相关的数据和配置，如下所示：

// 定义x轴和y轴的数据
const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const yAxisData1 = [120, 200, 150, 80, 70, 110, 130]
const yAxisData2 = [200, 180, 160, 100, 90, 120, 140]

// 定义折线图和柱状图的配置
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: xAxisData,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'yAxis1',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'yAxis2',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    }
  ],
  series: [
    {
      name: 'yAxis1',
      type: 'bar',
      data: yAxisData1
    },
    {
      name: 'yAxis2',
      type: 'line',
      yAxisIndex: 1,
      data: yAxisData2
    }
  ]
}

// 将配置绑定到echarts实例中
myChart.setOption(option)

6. 效果预览

最终的效果如下所示：