在vue中使用echarts组件

安装echart

npm install echarts --save
复制代码

在组件中引入并初始化

在模板中准备一个容器

<template>
    <div id="line-charts" style="height: 400px;" ></div>
</template>
复制代码

import * as echarts from 'echarts'
const _debounce = require('lodash/debounce')

export default {
  name: 'LineCharts',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initLineCharts()
  },
  beforeDestroy() {
    this.destroyChart()
  },
  methods: {
    initLineCharts() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('line-charts'))
      // 使用option进行第一次初始化
      const option = {
        title: {
          text: '标题'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [20, 30, 50, 60, 70, 80]
          }
        ]
      }
      this.chart.setOption(option)
    },
    // 销毁chart实例
    destroyChart() {
      if(this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    }
  }
}

复制代码

异步请求并修改图表

在实际场景中，我们的数据来自于后端，需要发送请求，获取数据后，再渲染到页面上

export default {
  mounted() {
    // 请求数据进行二次渲染
    this.updateSeries()
    // 省略其它代码...
  },
  methods: {
    // 省略其它代码...
    updateSeries() {
      this.getList()
      .then(list => {
        if (list && Array.isArray(list)) {
          if (this.chart) {
            const option = this.chart.getOption()
            // 使用服务器数据替换原来的数据
            option.series[0].data = list
            this.chart.clear()
            this.chart.setOption(option)
          }
        }
      })
    },
    getList() {
      return new Promise((resolve, reject) => {
        // 模拟请求，这里请替换为真实请求
        setTimeout(() => {
          const list = new Array(6).fill(1).map(_ => parseInt(Math.random() * 100))
          resolve(list)
        }, 300)
      })
    },
    initLineCharts() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('line-charts'))
      // 使用option进行第一次初始化
      const option = {
        title: {
          text: '标题'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            // data一开始是空数组
            data: []
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
复制代码

监听窗口，重新设置图表大小

现在存在一个体验问题，改变浏览器窗口大小时，图表不会自动缩放，这就需要我们监听浏览器窗口变化，在变化时，修改图表尺寸

// 省略其它代码...
// 防抖动工具函数
const _debounce = require('lodash/debounce')

export default {
  name: 'LineCharts',
  data() {
    return {
      debounceResizeHandler: null
    }
  },
  mounted() {
    // 省略其它代码...
    this.addResizeListener()
  },
  beforeDestroy() {
    // 省略其它代码...
    this.removeResizeListener()
  },
  methods: {
    // 省略其它代码...
    addResizeListener() {
      this.debounceResizeHandler = _debounce(() => {
        this.resize()
      }, 200)
      window.addEventListener('resize', this.debounceResizeHandler)
    },
    removeResizeListener() {
      if(this.debounceResizeHandler) {
        window.removeResizeListener('resize', this.debounceResizeHandler)
      }
    },
    // 屏幕尺寸变化时，重新设置大小
    resize() {
      this.chart && this.chart.resize()
    }
  }
}
复制代码

完整示例

<template>
  <div>
    <el-button type="primary" size="mini" @click="updateSeries">手动拉取新数据</el-button>
    <div style="height: 400px;" id="line-charts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
const _debounce = require('lodash/debounce')

export default {
  name: 'LineCharts',
  data() {
    return {
      chart: null,
      loading: false,
      debounceResizeHandler: null
    }
  },
  mounted() {
    this.initLineCharts()
    this.addResizeListener()
    this.updateSeries()
  },
  beforeDestroy() {
    this.removeResizeListener()
    this.destroyChart()
  },
  methods: {
    updateSeries() {
      this.getList()
      .then(list => {
        if (list && Array.isArray(list)) {
          if (this.chart) {
            const option = this.chart.getOption()
            // 使用服务器数据替换原来的数据
            option.series[0].data = list
            // 清除图表
            this.chart.clear()
            this.chart.setOption(option)
          }
        }
      })
    },
    getList() {
      return new Promise((resolve, reject) => {
        // 模拟请求
        setTimeout(() => {
          const list = new Array(6).fill(1).map(_ => parseInt(Math.random() * 100))
          resolve(list)
        }, 300)
      })
    },
    initLineCharts() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('line-charts'))
      // 使用option进行第一次初始化
      const option = {
        title: {
          text: '标题'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: []
          }
        ]
      }
      this.chart.setOption(option)
    },
    addResizeListener() {
      this.debounceResizeHandler = _debounce(() => {
        this.resize()
      }, 200)
      window.addEventListener('resize', this.debounceResizeHandler)
    },
    removeResizeListener() {
      if(this.debounceResizeHandler) {
        window.removeResizeListener('resize', this.debounceResizeHandler)
      }
    },
    // 屏幕尺寸变化时，重新设置大小
    resize() {
      this.chart && this.chart.resize()
    },
    // 销毁chart实例
    destroyChart() {
      if(this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    }
  }
}
</script>
复制代码