Vue 中使用 ECharts，附大量图表示例

安装和引入ECharts

首先，我们需要安装ECharts：

npm install echarts --save

然后，我们可以通过import引入ECharts：

import echarts from 'echarts'

注：如果你使用Vue CLI创建的项目，则应该在main.js中引入ECharts。

如果你使用了Vue脚手架，则应该在App.vue中引入ECharts。

创建ECharts实例

在创建Vue实例时，我们需要在mounted生命周期中创建ECharts实例，并绑定DOM元素：

export default {
  mounted() {
    let myChart = echarts.init(this.$refs. echarts) //绑定DOM
    let option = {...} //配置项
    myChart.setOption(option)
  }
}

其中，this.$refs.echarts是一个指向DOM元素的引用。

我们可以在模板中定义这个引用：

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

现在，我们已经可以在页面上看到一个ECharts图表了。

数据绑定和重新渲染

绑定数据

在Vue中，我们可以通过v-bind指令将数据绑定到ECharts实例中。

例如，我们可以将数据对象data绑定到图表的配置项中：

export default {
  data() {
    return {
      data: [10, 20, 30, 40, 50] //数据对象
    }
  },
  mounted() {
    let myChart = echarts.init(this.$refs. echarts) //绑定DOM
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        type: 'bar',
        data: this.data //数据绑定
      }]
    }
    myChart.setOption(option)
  }
}

现在，图表将显示data中的数据。

数据更新

当我们需要更新数据时，只需要修改数据对象中的值即可。

例如，我们可以通过按钮来更新数据：

<template>
  <div>
    <div ref="echarts" style="width:100%;height:500px"></div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [10, 20, 30, 40, 50]
    }
  },
  methods: {
    updateData() {
      this.data = [20, 30, 40, 50, 60] //修改数据
    }
  },
  mounted() {
    let myChart = echarts.init(this.$refs. echarts)
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        type: 'bar',
        data: this.data
      }]
    }
    myChart.setOption(option)
  }
}
</script>

当我们点击按钮时，数据对象的值将会更新，图表也会根据新的数据重新渲染。

异步数据更新

有时候，我们需要从后端获取数据，并将数据绑定到图表中。

在这种情况下，我们需要使用Vue的异步数据更新功能来更新图表。

例如，我们可以通过axios库来获取数据：

import axios from 'axios'
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data //更新数据
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    let myChart = echarts.init(this.$refs. echarts)
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'Sales',
        type: 'bar',
        data: this.data
      }]
    }
    myChart.setOption(option)

    this.fetchData() //调用fetchData方法获取数据
  }
}

现在，当我们调用fetchData方法时，数据将会从后端获取，并更新图表。

总结

通过以上步骤，我们已经学会了如何在Vue中使用ECharts，并实现数据的动态更新。

除此之外，ECharts还可以用于制作多种类型的图表，如折线图、饼图、雷达图等。

扩展：vue 中使用echart如何进行重新渲染

在 Vue 中使用 ECharts 进行重新渲染，可以通过以下步骤实现：

1. 1. 在 Vue 组件中引入 ECharts，并初始化图表对象：

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null // 初始化图表对象
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const container = this.$refs.chartContainer // 获取容器节点
      this.chart = echarts.init(container) // 初始化图表对象
      // ...
    }
  }
}

1. 1. 在需要重新渲染图表的时候，调用图表对象的 setOption 方法，传入新的数据配置项：

updateChart() {
  const newData = { /* 新的数据配置项 */ }
  this.chart.setOption(newData)
}

1. 1. 如果需要改变图表大小或者样式，可以通过修改容器节点的样式来实现：

resizeChart() {
  const container = this.$refs.chartContainer
  container.style.width = '100%' // 修改容器宽度
  container.style.height = '400px' // 修改容器高度
  this.chart.resize() // 调用图表对象的 resize 方法
}

需要注意的是，在组件销毁的时候，需要手动销毁图表对象，避免内存泄露：

beforeDestroy() {
  if (this.chart) {
    this.chart.dispose() // 销毁图表对象
    this.chart = null
  }
}

扩展：大量图表示例

isqqw echarts图表集 isqqw.com

echarts图表集 www.isqqw.com