Vue中Echarts使用示例

Vue中Echarts使用示例

示例

1 引入echarts的三方包

npm install echarts --save

2.引入三方包（main.js）

const echarts = require("echarts");
Vue.prototype.$echarts = echarts;

3.使用echarts（页面.vue）

创建一个用于存放表格的容器（必须有长和宽）

<template>
  <div class="box">
    <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    echartsinit() {
      // 第一个图表
      ;((params) => {
        // 电脑屏幕分辨率自适应
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        var chartDom = document.getElementById('echarts-main')
        var myChart = this.$echarts.init(chartDom)
        var option

        option = {}

        option && myChart.setOption(option)
      })()
    },
  },
  mounted() {
    // this.getSomeData();
    this.echartsinit()
  },
}
</script>

4.常见问题

如果使用时出现init未定义等情况，尝试将项目进行重启，重启或将解决问题哦。