Echarts (基本配置)

引入echarts包

将官网下载的echarts包，放在此处

在html中引入

将全局echarts对象 在main.js中挂载到Vue的原型对象上

Vue.prototype.$echarts = window.echarts

开始创建一个echarts对象

随便在一个vue文件中

<template>
  <div>
    <div class="myChart" ref="myChart_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null, // echarts实例对象
    };
  },
  //方法集合
  methods: {
    //创建一个echart
    initEchart() {
      this.chartInstance = this.$echarts.init(this.$refs.myChart_ref);

      const option = {};

      this.chartInstance.setOption(option);
    },
  },

  mounted() {},
};
</script>
<style lang="less" scoped>
.myChart {
  position: absolute;
  left: 800px;
  top: 400px;
  width: 548px;
  height: 220px;
  background: rgb(0, 255, 94);
}
</style>

页面中已经有一个对象，这里的过程其实就是 声明----注册，可以看到option中还没有值，所以现在没有任何显示

关于能出现具体的图，可以看此类目的其他文章，我根据实际项目 边做边加