在Vue环境下实现Echarts

在Vue环境下实现Echarts

前言

想要在Vue的基础上实现Echarts，就需要对Vue进行环境配置，并使用正确的调用命令

Echarts全局环境的配置

(以下方法是在npm环境下进行。如果未安装，在项目命令行中输入npm init 即可)

1. 方法一

项目命令行下输入 npm install echarts --save

npm install echarts --save

安装好后，将其导入main.js

import echarts from 'echarts'

最后需要将其挂载到Vue上

Vue.prototype.$echarts = window.echarts

2. 方法二

通过引入echarts.min.js包来完成
进入Echarts官网 > 下载 > 下载 > 在线定制
Echarts官网echarts.min.js包

选择自己想要的图表、坐标系和组件，然后点击下载

执行到此步，等待一会儿，就下载成功了


将下载好的echarts.min.js包，移动到vue项目下的public下（具体位置看自己）
然后进入public下的index.html，引入才下载好的包

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

最后在main.js中将其挂载在Vue上就完成了

Vue.prototype.$echarts = window.echarts

Echarts局部环境的配置

如果只是想个别组件使用Echarts，只需要在使用时导入即可

import echarts from 'echarts'

<script>
import echarts from 'echarts'

  export default {
    name: "echarts",
    data() {
      return {}
    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        this.MyEcharts = echarts.init(document.getElementById('link'))
          const option = {}
          this.MyEcharts.setOption(option)
      }
    }
  }
</script>

注：使用Echarts局部环境，前提是要在Vue中下载对应的echarts(方法一)

Echarts全局使用方法

由于我们是将Echarts挂载到了Vue上，所以我们使用this.$echarts

this.MyEcharts = this.$echarts.init(document.getElementById('link'))

完整代码

<template>
  <div id="link"></div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        this.MyEcharts = this.$echarts.init(document.getElementById('link'))

          const option = {
            xAxis: {
            type: 'category',
            data: ['1月', '3月', '5月', '7月', '9月', '11月']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [600, 800, 700, 620, 555, 470],
              type: 'bar'
            }]
          }
          this.MyEcharts.setOption(option)
      }
    }
  }
</script>

<style scoped>
div{
  width: 400px;
  height: 400px;
}
</style>

亦可利用ref来引盒子

<template>
  <div ref="echarts_link"></div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        this.MyEcharts = this.$echarts.init(this.$refs.echarts_link)

          const option = {
            xAxis: {
            type: 'category',
            data: ['1月', '3月', '5月', '7月', '9月', '11月']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [600, 800, 700, 620, 555, 470],
              type: 'bar'
            }]
          }
          this.MyEcharts.setOption(option)
      }
    }
  }
</script>

<style scoped>
div{
  width: 400px;
  height: 400px;
}
</style>

Echarts局部使用方法

在局部使用时，需要注意的是我们使用是echarts

this.MyEcharts = echarts.init(document.getElementById('link'))

完整代码

<template>
  <div id="link"></div>
</template>

<script>
import echarts from 'echarts'

  export default {
    name: "echarts",
    data() {
      return {}
    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        this.MyEcharts = echarts.init(document.getElementById('link'))

          const option = {
            xAxis: {
            type: 'category',
            data: ['1月', '3月', '5月', '7月', '9月', '11月']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [600, 800, 700, 620, 555, 470],
              type: 'bar'
            }]
          }
          this.MyEcharts.setOption(option)
      }
    }
  }
</script>

<style scoped>
div{
  width: 400px;
  height: 400px;
}
</style>

实现具体的图例

可以通过依照Echarts官网中的示例来制作，只需修改具体的方法就行

如果本文对你有帮助的话，请不要忘记给我点赞留言哟！！!
有问题请留言哟!