START

ECharts是干嘛的？
- 官网解释： ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
- 我个人的理解就是，第三方库，实现数据可视化。基本就是，可以根据数据，绘制我们想要的图表，大概就是这样，具体的可以去官网特性去了解,或者自己去百度搜索一下。
官网地址
- ECharts官网

一.环境选定

这里我就用我比较熟悉的环境，
- VUE
我电脑的环境
- node版本 :v12.16.3
- vue-cli版本 : 3.12.1

二.创建一个基本的vue项目

vue中创建一个项目
```
vue create myechart
```
删除多余的内容，创建一个新页面专门用来我们练习Echart

三.开始使用echart

官方5 分钟上手 ECharts 教程

安装echart
```
npm install echarts --save
```

main.js 中引入echart

// 全局导入一下 echart 
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

开始写个.vue文件

<template>
  <div class="echart">
    <h1 style="text-align=center">ECHART 基本使用</h1>
    <div>
      <!-- 写个div用来留给Echart来画图 -->
      <div ref="chart" style="width:100%;height:700px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Echart",
  mounted() {
    // DOM渲染完了我们再去加载echart
    this.getEchartData();
  },
  methods: {
    // 初始化 echart 的方法
    getEchartData() {
      // 通过ref 获取我们的DOM元素
      const chart = this.$refs.chart;
      // 当我们DOM确实是存在的我们再去绘制我们的echart图标
      if (chart) {
        const myChart = this.$echarts.init(chart);
        // 参数信息 暂时先不管每个参数 什么功能
        const option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        // 设置参数
        myChart.setOption(option);
        // 当页面的大小变化时，去重置echart的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      // 通过$on 或 $once 监听页面生命周期销毁来移除监听
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
</style>