echarts在vue中的使用

1.安装   

npm install echarts --save

2.引入 ECharts

import * as echarts from 'echarts';

 3.在页面中设置ECharts

<template>
  <!--应收款分析-->
  <div className="com-threemoisten" ref="threemoistenRef" style="width: 503px;height:208px;">

  </div>

</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      myChartname: null, // 图表对象
      standardsize: 1 // 全局标准值
    }
  },

  mounted () {
    // 挂载图标
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    // 屏幕适配
    this.screenAdapter()
  },
  destroyed () {
    // 移除监听
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化图表
    initChart () {
      this.myChartname = echarts.init(this.$refs.threemoistenRef)
      // 图表基础配置
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 设置数据
      this.myChartname.setOption(option)
    },
    // 获取数据
    getData () {

    },
    // 更新图表
    updataChart () {
      // 设置请求的数据
      var upoption = {

      }
      this.myChartname.setOption(upoption)
    },
    // 屏幕适配
    screenAdapter () {
      this.standardsize = this.$refs.threemoistenRef.offsetWidth / 335
      const adapterOption = {}
      this.myChartname.setOption(adapterOption)
      // 手动调用图表对象resize
      this.myChartname.resize()
    }
  }

}
</script>
<style>
.com-threemoisten {
  background: #051045;
}
</style>