vue中简单的引入并使用echarts

官方文档地址

npm 拉取依赖

npm install echarts --save

全局引入

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

因为版本问题 可能会有遇到上面的引入方式报错引入错误
可以这样

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

也可以按需引入

let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/title')
require("echarts/lib/component/grid");
Vue.prototype.$echarts = echarts

页面中的使用

<template>
  <div class="home">
      <div id="myChart"></div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {

  },
  created(){
    
  },
  mounted(){
    this.initCharts();
  },
  data(){
    return{
      chart: null,
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        xAxis: {
          type: 'category',
          data: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [100, 200, 300, 400, 500, 600, 700],
          type: 'line'
        }]
      },
      initCharts () {
        this.chart = this.$echarts.init(document.getElementById('myChart'))
        this.chart.setOption(this.options)
      }
    }
  }
  
}
</script>


<style scoped>
  #myChart{
    width: 800px;
    height: 600px;
  }
</style>

也可以在init时 添加宽高参数

this.chart = this.$echarts.init(document.getElementById('myChart'),null,{
          width:800,
          height:600,
        })

效果