创建窗体自适应Echarts图表（基于Vue2.0）

1 安装echarts

npm install echarts

2 查看版本

在package.json里面可以查看版本

3 导入包文件

在main.js文件中添加下面代码

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

4 在Vue组件中使用

创建一个Helloworld.vue组件

<template>
  <div
    class="hello"
    :style="{ height: divHeight + 'px', width: divWidth + 'px' }"
  ></div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      divHeight: null,
      divWidth: null
    };
  },
  created() {
    this.divHeight = window.innerHeight * 0.8;
    this.divWidth = window.innerWidth * 0.8;
    const that = this;
    window.onresize = function() {
      that.divHeight = this.innerHeight * 0.8;
      that.divWidth = this.innerWidth * 0.8;
      that.charts.resize();
    };
  },
  mounted() {
    this.drawCharts();
  },
  methods: {
    drawCharts() {
      this.charts = this.$echarts.init(document.querySelector(".hello"));
      this.charts.setOption({
        title: {
          text: "列表"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

5 添加路由

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})