1016 Swiper ECharts(数据可视化)

1016 Swiper 数据可视化

主要讲

1. 插件 依赖 运行依赖 开发依赖 四者的区别，可以总结写成 csdn 上传。
2. 安装不使用 ，要 log, Swiper 其中遇到了问题。
3. 这节课知识点 mounted
4. 安装 npm i swiper@5
5. this.myswiper 去官网查看 APi 文档的 swiper 属性 修改方向 this.mySwiper.changeDirection(); 。
6. 这两天自己一定要写一个功能出来，可以联合路由一切写
7. swiper 结束
8. 数据可视化 主流 Echarts 运行依赖安装 1M

安装依赖和安装插件的区别

1. 插件安装的东西不需要你去配，依赖:一种是必须的一种是开发用的
2. 其实我们现在安装的方式都是通过 webpack 命令行安装的。

• 在 vue 项目中安装依赖(包)，分两类
  1. 项目必需依赖(axios element-ui vue-router ...) 项目没有这个工具(包) 不可能运行，比如没有 axios 发请求不行。安装方式 npm --save -S
  2. 项目开发依赖(sass-loader sass less stylus ...) 工具类的(编译工具，插件类辅助工具) --save-dev 或者 -D 安装方式。
• 那三个工具是 css 语法扩展，看上去虽然写的是高级的，但是最后是转化成低级的。高级的 css 语法转换成低级的 css 语法。装了工具之后我支持你写这句语法，我装了 node.sass ，只是开发的时候用，上线的时候就不用了，因为开发过程中写的是高级的语法，需要编译，项目做好了想要上线，传到 git 的时候必须要有 css html js 。成品的时候 sass 是没有用的。
• vue create xxx(项目名)

我们使用 element-ui 的时候，并不是直接去依赖安装，而是选择插件安装了 element ，其实安装的并不是叫 element-ui 包，叫 vue-plugins-element,这个它去安装了两个包。是一个工具，帮助我们配置了 element 的，vue-plugins-element 是一个配置工具包，就是辅助插件用的，

一句话：上线必须用到的就是运行依赖，用不到了叫开发依赖。

安装包的方式目前来说会影响项目成品的大小。一般来说都会选择依赖的，运行依赖安装方式
插件其实就是一些高级的包，才有插件安装的功能，一般来说都是去依赖里面安装运行或者开发的包的。
Swiper 安装的肯定是运行依赖

Vue 安装使用 Swiper

• 之前使用的是 获取Swiper 点击下载

1. 在依赖>运行依赖中安装 swiper 是 6 版本的。
2. import swiper from 'swiper' --> console.log(swiper) //swiper 函数
3. 引 css import "swiper/swiper-bundle.min.css";
4. 粘结构
5. 创建实例的要放到 mounted 里面。
6. 遇到问题整个下载下来测试：新建index.html 引入 package 包下的 swiper.bundle.css swiper.bundle.main.js 可以用。Open In Default Browser Alt+B
7. 命令行安装了 npm i swiper@5 会自动覆盖 6 版本。
8. 再把之前的 css 的路径修改 放在main.js 中更好，全局引用。import "swiper/css/swiper.min.css"; 成功
9. 写方法点击修改 mySwiper 属性 this.mySwiper.changeDirection();。

• 进入页面的时候只有在该生命周期才能获取真实 dom 节点才可以执行一些相关操作。
• 直接安装 6 版本的 swiper 会出问题，建议安装 5 版本。
• import Swiper from "swiper";
• 当你想要引入 包 内的的其他文件，路径直接写 包名 + / 找即可

<template>
  <div class="swiper-demo">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/images/gracetan_01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/gracetan_02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/gracetan_03.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/gracetan_04.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/gracetan_05.jpg" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航s按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <button @click="handleClick">是否切换方向</button>
  </div>
</template>

<script>
// 在 vue 项目中安装依赖(包) 分两类
// 1. 项目必需(运行)依赖(axios vue-router element-ui ...)  项目没有这个包不可能运行 --save -S
// 2. 项目开发依赖(sass less stylus ...)      工具类的(编译工具，插件类辅助工具)    --save-dev  -D
// 安装包的方式目前来说会影响项目成品的大小。

// 直接安装 6 版本的 swiper 会出问题，建议安装 5 版本。
import Swiper from "swiper";
// 当你想要引入 包 内的的其他文件，路径直接写 包名 + / 找即可
// import "swiper/swiper-bundle.min.css";
// import "swiper/css/swiper.min.css";

export default {
  name: "SwiperDemo",
  // data(){
  //   return{
  //     loop:true
  //   }
  // },
  mounted() {
    // 进入页面的时候只有在该生命周期才能获取真实 dom 节点才可以执行一些相关操作。
    this.mySwiper = new Swiper(".swiper-container", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
  created() {
    console.log(Swiper); //出来一个函数
  },
  methods: {
    handleClick() {
      // this.loop = !this.loop
      // console.log(this.mySwiper);  //是一个 swiper 函数
      this.mySwiper.changeDirection();
    },
  },
};
</script>

<style scoped>
.swiper-container {
  width: 600px;
  height: 300px;
}
</style>

1020 补充

1. 用命令行工具下载 npm install swiper@5
2. 在 main.js 全局引入 import "swiper/css/swiper.min.css"; import "swiper/js/swiper.min.js"; 这个是 swiper 5 版本的 css 和 js
   import "swiper/swiper-bundle.min.css"; 这个是 swiper 6 版本的 css
3. 然后就是把结构粘贴进来的事了

• 修改属性 this.mySwiper

1. 定义一个方法然后，去配置选项找相对应的方法或者属性修改即可

在 Vue 中使用 Swiper vue-awesome-swiper(参考)

swiperi 的 vue 版:之前我们用的是原生的 HTML 版本的。

1. 两种安装方式：

• 推荐使用 yarn add swiper@5.x vue-awesome-swiper

Install
npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

# Swiper5 is recommended
yarn add swiper@5.x vue-awesome-swiper

2. 全局引入 and 本地引入

Global Registration

Global Registration
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

Local Registration

import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";

// import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";

// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
};

3. 组件的用法

Component

npm 安装使用 ECharts

1. 安装

• vue ui 运行依赖安装 echarts
• 或者你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

2. 按需引入 ECharts 图表和组件
   默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。
   例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB减小到 170 多 KB。

• getElementById("main") 按照要求，写一个盒子 <div id="main"></div>
• 全局引入太大了 import echarts from "echarts";
• 导入的都是 js 模块,大小，标题，还有提示都可以取消，或者自己设置。
• 如果遇到不懂的就去 API 或者配置项手册查找。
• 其实改图很简单 只需要把引入的模块换成自己想要的名称就可以实现图标效果。
• 注意:有一些可以直接把名称修改，有一些不可以。

<template>
  <div id="main"><h3>在 vue 中使用 echarts</h3></div>
</template>

<script>
// import echarts from "echarts";

// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/scatter";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

export default {
  name: "EchartsDemo",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      // 数组
      series: [
        {
          // 图标系列的名称 用于 tootip 的显示
          name: "销量",
          // 设置图标类型 scatter 散点图 bar 柱状图
          type: "scatter",
          // 图标的数据  一般来说是 Y 展示的数值
          // 以后可能自己从数据库中获取数据
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style>
#main{
  height: 400px;
}
</style>

• 效果图