echarts学习 vue中使用echarts

1、在public文件夹下新建 static/lib -->放入echarts.min.js文件（echarts.min.js 文件可以在jsDelivr中下载）
2、然后在 public/index.html 文件中引用入

<script src="static/lib/echarts.min.js"></script>

3、在main.js文件中，将全局的echarts 挂载到Vue的原型对象上

Vue.prototype.$echarts = window.echarts

4、 axios（该部分用于后端数据请求）
1.安装 npm install axios
2.引入

import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载到Vue的原型对象上
Vue.prototype.$axios = axios

5、 使用，echart ,初始化，数据获取

该部分为数据是由后端请求

<template>
  <div class="com-contain">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
export default {
     
  data () {
     
    return {
     
      chartInstance: null,
      allData: [], // 服务器返回的数据
      currentPage: 1, // 当前显示的页数
      totalPage: 0, // 一共有多少页 
      timer: null // 定时器的标识
    }
  },
  mounted () {
     
    this.initChart()
    this.getData()
  },
  destroyed () {
     
  	clearInterval(this.timer)
  },
  methods: {
     
    // 初始化chartInstance对象
    initChart () {
     
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref)
 	  // 对图表对象进行鼠标事件的监听
 	  this.chartInstance.on('mouseover', () => {
     
 	  	clearInterval(this.timer)
 	  })
 	  this.chartInstance.on('mouseout', () => {
     
 	  	this.startInterval()
 	  })
    },

    // 获取服务器的数据
    async getData () {
     
      // http://127.0.0.1:8888/api/seller
      const data = await this.$axios.get('seller')
      this.allData = data.ret
      // 对数据排序
      this.allData.sort((