怎么在vue中使用echarts

怎么在vue中使用echarts

在做项目的时候遇到了一个问题，采用echarts官网的的方法导入会发生错误，在浏览器上报dom is not defined的错，于是上网查了前辈们的解决方案，成功了，解决办法如下

1. 使用npm命令导入

npm instaill echarts --serve-dev

注：在此我采用了cnpm的命令成功的，不成功的可以试试

2. 在main.js内引入全局变量

import echarts from 'echarts'  //引入Echarts，
Vue.prototype.$echarts = echarts  //定义为全局变量

3. 接下来就可以在vue的template标签内使用啦
   下面是官网上的例子

<template>
  <div class="main">
    <div class="HelloWorld echart-box" ref="mycharts" id="box"></div> 
  </div>
</template>

<script>
  export default {
    name:'HelloWorld',
    data(){
      return{
        option:{ 
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    },
    mounted(){
      let mycharts = this.$echarts.init(this.$refs.mycharts)
      mycharts.setOption(this.option)
    }
  }
</script>

<style scoped>
.main{
  padding:10px;
}
//为容器设置大小
#box{   
  width: 250;
  height:200px;
}
</style>

4.运行后效果如下：
这样就好啦！