在vue中使用echarts以及npm安装echarts时出现的问题

let’s talk about echarts in vue ^^

按照以下步骤：

一，配置代理为淘宝代理（防止出现rollbackFailedOptional: verb npm-session b163a9a245c2cf36）：

npm config set registry http://registry.npm.taobao.org

二，安装echarts：

npm install echarts --save-dev

三，引入main.js当中

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

四，使用：

<template>
  <div>
    <h1>vue and echarts!</h1>
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>

<script>
  export default {
    name: "EchartsTest",
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {text: '在Vue中使用echarts'},
          tooltip: {},
          xAxis: {
            data: ["变量1", "变量2", "变量3", "变量4", "变量5", "变量6"]
          },
          yAxis: {},
          series: [{
            name: '变量y',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    }
  }
</script>

<style scoped>

</style>

OK啦