图表大小怎么设置问题（我才入门vue，提的问题不周到，多包含）

求指教一下，怎么设置才能成功，使用vue-cli生成的项目，添加的node-sass编译这种形式引入

<template src="./Chart1.html"></template>
<style src="./Chart1.scss" module lang="scss"></style>
<script src="./Chart1js.js"></script>

Chart1.html内容：

<div class="chart">
  <chart :options="bar" auto-resize></chart>
</div>

Chart1.scss内容：

.echarts {
  width: 800px;
  height: 400px;
}

Chart1js.js内容：

import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/geo'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/visualMap'

import 'echarts-liquidfill'
// built-in theme
import 'echarts/theme/dark'

import {mapActions} from 'vuex'
export default {
  name: 'chart1',
  data () {
    return {
      bar: this.$store.state.chart1.bar
    }
  },
  components: {
    chart: ECharts
  },
  methods: {
    ...mapActions([
      'getDataRemote'
    ])
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getDataRemote({
        dataType: 10,
        dateType: 3,
        anaType: 0,
        storeId: 0,
        startDate: '2017-06-23 00:00:00',
        endDate: '2017-06-23 14:00:00'
      })
    })
  }
}

最终展示的页面的outerHTML内容如下

主要看这句width: 600px; height: 400px

<div class="chart">
<div class="echarts"
     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"
     _echarts_instance_="ec_1498213089850">
    <div style="position: relative; overflow: hidden; width: 600px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
        <canvas width="600" height="400" data-zr-dom-id="zr_0"
                style="position: absolute; left: 0px; top: 0px; width: 600px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
    </div>
    <div style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &quot;Microsoft YaHei&quot;; line-height: 21px; padding: 5px; left: 310px; top: 345px;">
        2017-06-23 09 : 7078
    </div>
</div>
</div>

忘记附上package.json 中的dependencies

  "dependencies": {
    "axios": "^0.16.2",
    "better-scroll": "^0.1.15",
    "echarts-liquidfill": "^1.0.5",
    "element-ui": "^1.3.6",
    "fastclick": "^1.0.6",
    "humps": "^2.0.0",
    "iscroll": "^5.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "showdown": "^1.6.4",
    "vue": "^2.3.3",
    "vue-echarts": "^2.4.0",
    "vue-router": "^2.3.1",
    "vuex": "^2.2.1"
  },

ecomfe / vue-echarts

图表大小怎么设置问题（我才入门vue，提的问题不周到，多包含） #97