vue中使用echarts

1、简介

echarts是一个数据可视化工具，是我们数据不再只是单单的展示出来，而可以使其通过图标的方式形象的展示，那么如何再vue中引用呢？

2、安装

通过如下命令进行安装echarts。

npm install echarts --save

3、配置

在main.js中进行如下配置：

import Vue from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4、使用

• template代码如下：

<template>
  <div id="app">
      <div id='wrap' style=''></div>
  </div>
</template>

• script代码如下

<script>
export default {
  name: 'App',
  mounted() {
      this.myCharts()
  },
  methods: {
      myCharts() {
          let myCharts = this.$echarts.init(document.getElementById('wrap'))
          let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            };
          myCharts.setOption(option)
      }
  }
}
</script>

• style代码如下：

<style>
    #wrap{
        height: 400px;
        background-color: #ffs;
        width: 300px
    }
</style>

• 效果如下图所示：

  
  
  在vue中使用echarts效果图