vue+echarts中图类型实现双向数据绑定

在 Vue.js 中，可以通过 `v-model` 指令实现双向数据绑定，而 Echarts 中也提供了 `setOption` 方法用于设置图表的配置项。因此，我们可以通过将图表的数据作为 Vue 组件的一个数据属性，然后在模板中使用 `v-model` 实现数据的双向绑定，并在数据发生变化时通过 `setOption` 方法更新图表。

以下是一个简单的示例代码：

<template>
  <div>
    <select v-model="chartType">
      <option value="line">折线图</option>
      <option value="bar">柱状图</option>
      <option value="pie">饼图</option>
    </select>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data () {
    return {
      chart: null,
      chartType: 'line',
      chartData: {
        xData: ['周一', '周二', '周三', '周四', '周五'],
        yData: [120, 200, 150, 80, 70]
      }
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.updateChart()
  },
  watch: {
    chartType () {
      this.updateChart()
    },
    chartData: {
      handler () {
        this.updateChart()
      },
      deep: true
    }
  },
  methods: {
    updateChart () {
      const option = {
        tooltip: {},
        xAxis: {
          data: this.chartData.xData
        },
        yAxis: {},
        series: [{
          type: this.chartType,
          data: this.chartData.yData
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

在上述代码中，我们定义了一个 `chartData` 数据属性，用于保存图表的数据。在模板中，我们使用 `v-model` 指令将 `chartType` 和 `chartData` 分别绑定到一个下拉框和图表的数据上。在 `mounted` 钩子函数中，我们通过 `echarts.init` 方法初始化了一个图表实例，并在 `updateChart` 方法中根据当前的 `chartType` 和 `chartData` 更新了图表的配置项。同时，在 `watch` 中我们监听了 `chartType` 和 `chartData` 的变化，并在数据发生变化时重新更新了图表。