Vue2 使用 Echarts 创建简单折线柱状混合图表

以下是一个简单的折线柱状混合图的例子，使用了vue2和echarts。

安装echarts

npm install echarts

在组件中引入echarts

import echarts from 'echarts'

在组件中创建图表

export default {
  data() {
    return {
      chartData: {
        legend: {
          data: ['销量', '价格']
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          {
            type: 'value',
            name: '销量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 件'
            }
          },
          {
            type: 'value',
            name: '价格',
            min: 0,
            max: 50,
            interval: 10,
            axisLabel: {
              formatter: '{value} 元'
            }
          }
        ],
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            name: '价格',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 30, 25, 15, 12, 18, 22]
          }
        ]
      }
    }
  },
  mounted() {
    this.createChart()
  },
  methods: {
    createChart() {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption(this.chartData)
    }
  }
}

在模板中渲染图表

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