一.VUE 中 ECharts 的基本使用

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 教程

1. 安装echart

   npm install echarts --save
   

2. main.js 中引入echart

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

3. 开始写个.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>
   

4. 运行一下，一个简单的echarts案例就实现了。