https://router.vuejs.org/zh/

一、下载

npm install vue-router

二、引入路由和使用路由

（1）在src文件下创建router

router目录里新建一个index，把有关路由的组件放在这里

导入vue
import Vue from 'vue'
导入路由
import VueRouter from 'vue-router'
使用路由
Vue.use(VueRouter)

导入Home组件
import Home from '../pages/Home.vue'
导入List组件
import List from '../pages/List.vue'
导入About组件
import About from '../pages/About.vue'
导入News组件
import News from '../pages/News.vue'

创建路由器对象
export default new VueRouter({
定义路由信息数组
  routes:[
每一条路由信息，就是一个对象
    {
路由路径
      path:'/home',
路由名称
      name:'home',
路由组件
      component:Home
    },
    {
      path:'/list',
      name:'list',
      component:List
    },
    {
        path:'/about',
        name:'about',
        component:About
    },
    {
        path:'/news',
        name:'news',
        component:News
    }
  ]
})

（2）在main.js入口文件中引入并将路由器对象传给vue实例

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

导入当前项目中的路由器对象
import router from './router'

 全局导入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'
因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper) 

new Vue({
  render: h => h(App),
将路由器对象传给vue实例
  router
}).$mount('#app')

三、创建路由组件

（1）在src目录里创建pages文件/view文件：

①pages放页面组件
②components放业务组件

（2）在App.vue页面使用

①router-link背后的原理其实就是a链接

②在路由中使用按钮跳转有两种方式：

第一种是在router-link中直接放button，方便简洁

 <router-link to="/news"><button>新闻</button></router-link>

第二种是绑定点击事件写方法，这个的好处在于可以进行判断，如用户不是会员，无权限则不跳转

<template>
  <div id="app">
    <div class="header">
router-link是路由链接组件，用于跳转路由，相当于a链接
      <router-link to="/home">首页</router-link>&nbsp;
      <router-link to="/list">列表</router-link>&nbsp;
      <button @click="gotoAbount">关于</button>&nbsp;
      <button @click="gotoNews">新闻</button>
    </div>
router-view是路由视图组件，用于呈现路由页面 
    <router-view></router-view>
    <div class="footer">我是页尾</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return 
    }
  },

编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等
$route返回的是当前路由信息
$router返回的是当前vue实例里面的路由器对象
通过push方法，跳转路由，并将路由地址添加到历史记录
通过replace方法，也是跳转路由，它用当前地址替换提示记录里面的最近一条地
址  

  methods: {
    gotoAbount(){
      if(this.$route.path!=='/about'){
        this.$router.push('/about')
      }      
    },
    gotoNews(){
      if(this.$route.path!=='/news'){
        this.$router.push('/news')
      }
    }解释：点击跳转时，如果当前路由地址不等于当前地址就跳转
  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

四、Swiper轮播图插件

https://www.swiper.com.cn/

（1）由于现在用的是vue2，所有目前只能用低版本的Swiper,需要下载两个

npm install swiper@5 vue-awesome-swiper@4

（2）导入有两种方式

1.全局导入，在main.js导入，所有页面都能用。全局导入开发起来更方便

导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'
因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)

2.局部导入，只在当前使用的组件内导入。局部性能好

局部导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'

export default {
  name: "Home",
注册组件
  components: {
      Swiper,
      SwiperSlide
  }}

（3）使用Swiper

<template>
  <div class="home">
      <div class="box">
swiper组件，options属性设置配置选项
        <swiper :options="swiperOptions">
swiper组件的每一项 
          <swiper-slide>
              <img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
              <img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
              <img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
              <img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">
          </swiper-slide>
分页器 
          <div class="swiper-pagination" slot="pagination"></div>
左箭头。如果放置在swiper-container外面，需要自定义样式。
          <div class="swiper-button-prev" slot="button-prev"></div>
右箭头。如果放置在swiper-container外面，需要自定义样式。
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
  </div>
</template>
<script>
局部导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'

export default {
  name: "Home",
注册组件
  components: {
      Swiper,
      SwiperSlide
  },
  data() {
    return {
定义swiper的配置选项
      swiperOptions: {
指定分页器
        pagination: {
指定分页器的容器
            el: ".swiper-pagination",
点击分页器的指示点分页器会控制Swiper切换
            clickable:true
        },
配置自动播放
autoplay:true
配置自动播放间隔时间等，更详细操作
        autoplay:{
自动播放
            autoplay:true,
设置间隔时间
            delay:3000,
用户操作swiper之后，是否禁止autoplay
            disableOnInteraction:false
        },
配置衔接滑动
        loop:true,
箭头
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
effect是图片切换效果
        effect:'cube',
      },
    }
  },
};
</script>
<style>
.home{
  border: 1px solid green;
}
.box{
  width: 750px;
}
.box img{
  width: 750px;
}
</style>

五、ECharts图表

https://echarts.apache.org/zh/index.html

（1）安装ECharts

npm install echarts --save

（2）在组件中导入Charts

import * as echarts from "echarts";

（3）在组件mounted生命周期里

基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
绘制图表
myChart.setOption({
  title: {} })

（4）使用axios请求数据

1.下载axios包,在脚手架里使用第三方插件和库都是需要安装，网页则是引入

npm install axios

2.public里面是静态资源目录，它里面的文件直接请求，不需要../

   let {data} = await axios.get('data/data1.json')

（5）ECharts曲线图案例

<template>
  <div class="list">
    <h2>列表</h2>
    <div id="container"></div>
  </div>
</template>
<script>
导入echarts对象
import * as echarts from 'echarts';
导入axios
import axios from 'axios'
export default {
  name: "List",
  data() {
    return {
定义一份数据
      list:[]
    }
  },
方法
  methods: {
加载数据的方法
    async loadData(){
向后台发送请求，获取一份数据
      let {data} = await axios.get('data/data1.json')
      this.list = data
调用渲染数据的方法
      this.showData()
    },
渲染数据的方法
    showData(){
基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('container'));
绘制图表
      myChart.setOption({
 标题
          title: {
            text: '收入记录'
          },
提示框组件
          tooltip: {
            trigger: 'axis'
          },
 图例组件
          legend: {
            data: this.list.map(r=>r.name)
          },
网格
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
网格空间是否包含文本
            containLabel: true
          },
工具栏下载保存为图片
          toolbox: {
各工具配置项
            feature: {
保存为图片
              saveAsImage: {}
            }
          },
X轴数据
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
Y轴数据
          yAxis: {
            type: 'value'
          },
系列
          series: this.list.map(r=>{
            return {
              name:r.name,
              type:'line',
              data:r.moneys.map(m=>m.money)
            }
          })
        });
    }
页面挂载完成
  mounted() {
    this.loadData()
  },
};
</script>
<style>
.list{
  border: 1px solid blue;
}
.list #container{
  width: 1000px;
  height: 500px;
  border: 1px solid red;
}
</style>

（6）EChars日历小案例

<template>
  <div class="about">
    <h2>关于</h2>
    <div id="container"></div>
  </div>
</template>
<script>
导入echarts对象
import * as echarts from 'echarts';
export default {
  name: "About",
  methods: {
渲染数据的方法
    showData(){
      const dateList = [
  ['2021-1-1', '初四'],
  ['2021-1-2', '初五'],
  ['2021-1-3', '初六'],
  ['2021-1-4', '初七'],
  ['2021-1-5', '初八', '小寒'],
  ['2021-1-6', '初九'],
  ['2021-1-7', '初十'],
  ['2021-1-8', '十一'],
  ['2021-1-9', '十二'],
  ['2021-1-10', '十三'],
  ['2021-1-11', '十四'],
  ['2021-1-12', '十五'],
  ['2021-1-13', '十六'],
  ['2021-1-14', '十七'],
  ['2021-1-15', '十八'],
  ['2021-1-16', '十九'],
  ['2021-1-17', '二十'],
  ['2021-1-18', '廿一'],
  ['2021-1-19', '廿二'],
  ['2021-1-20', '廿三', '大寒'],
  ['2021-1-21', '廿四'],
  ['2021-1-22', '廿五'],
  ['2021-1-23', '廿六'],
  ['2021-1-24', '廿七'],
  ['2021-1-25', '廿八'],
  ['2021-1-26', '廿九'],
  ['2021-1-27', '三十'],
  ['2021-1-28', '正月'],
  ['2021-1-29', '初二'],
  ['2021-1-30', '初三'],
  ['2021-1-31', '初四'],
  ['2021-2-1', '初五'],
  ['2021-2-2', '初六'],
  ['2021-2-3', '初七', '立春'],
  ['2021-2-4', '初八'],
  ['2021-2-5', '初九'],
  ['2021-2-6', '初十'],
  ['2021-2-7', '十一'],
  ['2021-2-8', '十二'],
  ['2021-2-9', '十三'],
  ['2021-2-10', '十四'],
  ['2021-2-11', '十五'],
  ['2021-2-12', '十六'],
  ['2021-2-13', '十七'],
  ['2021-2-14', '十八'],
  ['2021-2-15', '十九'],
  ['2021-2-16', '二十'],
  ['2021-2-17', '廿一'],
  ['2021-2-18', '廿二', '雨水'],
  ['2021-2-19', '廿三'],
  ['2021-2-20', '廿四'],
  ['2021-2-21', '廿五'],
  ['2021-2-22', '廿六'],
  ['2021-2-23', '廿七'],
  ['2021-2-24', '廿八'],
  ['2021-2-25', '廿九'],
  ['2021-2-26', '二月'],
  ['2021-2-27', '初二'],
  ['2021-2-28', '初三'],
  ['2021-3-1', '初四'],
  ['2021-3-2', '初五'],
  ['2021-3-3', '初六'],
  ['2021-3-4', '初七'],
  ['2021-3-5', '初八', '驚蟄'],
  ['2021-3-6', '初九'],
  ['2021-3-7', '初十'],
  ['2021-3-8', '十一'],
  ['2021-3-9', '十二'],
  ['2021-3-10', '十三'],
  ['2021-3-11', '十四'],
  ['2021-3-12', '十五'],
  ['2021-3-13', '十六'],
  ['2021-3-14', '十七'],
  ['2021-3-15', '十八'],
  ['2021-3-16', '十九'],
  ['2021-3-17', '二十'],
  ['2021-3-18', '廿一'],
  ['2021-3-19', '廿二'],
  ['2021-3-20', '廿三', '春分'],
  ['2021-3-21', '廿四'],
  ['2021-3-22', '廿五'],
  ['2021-3-23', '廿六'],
  ['2021-3-24', '廿七'],
  ['2021-3-25', '廿八'],
  ['2021-3-26', '廿九'],
  ['2021-3-27', '三十'],
  ['2021-3-28', '三月'],
  ['2021-3-29', '初二'],
  ['2021-3-30', '初三'],
  ['2021-3-31', '初四'],
  ['2021-4-1', '初五'],
  ['2021-4-2', '初六'],
  ['2021-4-3', '初七'],
  ['2021-4-4', '初八', '清明'],
  ['2021-4-5', '初九'],
  ['2021-4-6', '初十'],
  ['2021-4-7', '十一'],
  ['2021-4-8', '十二'],
  ['2021-4-9', '十三'],
  ['2021-4-10', '十四'],
  ['2021-4-11', '十五'],
  ['2021-4-12', '十六'],
  ['2021-4-13', '十七'],
  ['2021-4-14', '十八'],
  ['2021-4-15', '十九'],
  ['2021-4-16', '二十'],
  ['2021-4-17', '廿一'],
  ['2021-4-18', '廿二'],
  ['2021-4-19', '廿三'],
  ['2021-4-20', '廿四', '穀雨'],
  ['2021-4-21', '廿五'],
  ['2021-4-22', '廿六'],
  ['2021-4-23', '廿七'],
  ['2021-4-24', '廿八'],
  ['2021-4-25', '廿九'],
  ['2021-4-26', '四月'],
  ['2021-4-27', '初二'],
  ['2021-4-28', '初三'],
  ['2021-4-29', '初四'],
  ['2021-4-30', '初五'],
  ['2021-5-1', '初六'],
  ['2021-5-2', '初七'],
  ['2021-5-3', '初八'],
  ['2021-5-4', '初九'],
  ['2021-5-5', '初十', '立夏'],
  ['2021-5-6', '十一'],
  ['2021-5-7', '十二'],
  ['2021-5-8', '十三'],
  ['2021-5-9', '十四'],
  ['2021-5-10', '十五'],
  ['2021-5-11', '十六'],
  ['2021-5-12', '十七'],
  ['2021-5-13', '十八'],
  ['2021-5-14', '十九'],
  ['2021-5-15', '二十'],
  ['2021-5-16', '廿一'],
  ['2021-5-17', '廿二'],
  ['2021-5-18', '廿三'],
  ['2021-5-19', '廿四'],
  ['2021-5-20', '廿五'],
  ['2021-5-21', '廿六', '小滿'],
  ['2021-5-22', '廿七'],
  ['2021-5-23', '廿八'],
  ['2021-5-24', '廿九'],
  ['2021-5-25', '三十'],
  ['2021-5-26', '五月'],
  ['2021-5-27', '初二'],
  ['2021-5-28', '初三'],
  ['2021-5-29', '初四'],
  ['2021-5-30', '初五'],
  ['2021-5-31', '初六'],
  ['2021-6-1', '初七'],
  ['2021-6-2', '初八'],
  ['2021-6-3', '初九'],
  ['2021-6-4', '初十'],
  ['2021-6-5', '十一', '芒種'],
  ['2021-6-6', '十二'],
  ['2021-6-7', '十三'],
  ['2021-6-8', '十四'],
  ['2021-6-9', '十五'],
  ['2021-6-10', '十六'],
  ['2021-6-11', '十七'],
  ['2021-6-12', '十八'],
  ['2021-6-13', '十九'],
  ['2021-6-14', '二十'],
  ['2021-6-15', '廿一'],
  ['2021-6-16', '廿二'],
  ['2021-6-17', '廿三'],
  ['2021-6-18', '廿四'],
  ['2021-6-19', '廿五'],
  ['2021-6-20', '廿六'],
  ['2021-6-21', '廿七', '夏至'],
  ['2021-6-22', '廿八'],
  ['2021-6-23', '廿九'],
  ['2021-6-24', '六月'],
  ['2021-6-25', '初二'],
  ['2021-6-26', '初三'],
  ['2021-6-27', '初四'],
  ['2021-6-28', '初五'],
  ['2021-6-29', '初六'],
  ['2021-6-30', '初七'],
  ['2021-7-1', '初八'],
  ['2021-7-2', '初九'],
  ['2021-7-3', '初十'],
  ['2021-7-4', '十一'],
  ['2021-7-5', '十二'],
  ['2021-7-6', '十三'],
  ['2021-7-7', '十四', '小暑'],
  ['2021-7-8', '十五'],
  ['2021-7-9', '十六'],
  ['2021-7-10', '十七'],
  ['2021-7-11', '十八'],
  ['2021-7-12', '十九'],
  ['2021-7-13', '二十'],
  ['2021-7-14', '廿一'],
  ['2021-7-15', '廿二'],
  ['2021-7-16', '廿三'],
  ['2021-7-17', '廿四'],
  ['2021-7-18', '廿五'],
  ['2021-7-19', '廿六'],
  ['2021-7-20', '廿七'],
  ['2021-7-21', '廿八'],
  ['2021-7-22', '廿九', '大暑'],
  ['2021-7-23', '閏六'],
  ['2021-7-24', '初二'],
  ['2021-7-25', '初三'],
  ['2021-7-26', '初四'],
  ['2021-7-27', '初五'],
  ['2021-7-28', '初六'],
  ['2021-7-29', '初七'],
  ['2021-7-30', '初八'],
  ['2021-7-31', '初九'],
  ['2021-8-1', '初十'],
  ['2021-8-2', '十一'],
  ['2021-8-3', '十二'],
  ['2021-8-4', '十三'],
  ['2021-8-5', '十四'],
  ['2021-8-6', '十五'],
  ['2021-8-7', '十六', '立秋'],
  ['2021-8-8', '十七'],
  ['2021-8-9', '十八'],
  ['2021-8-10', '十九'],
  ['2021-8-11', '二十'],
  ['2021-8-12', '廿一'],
  ['2021-8-13', '廿二'],
  ['2021-8-14', '廿三'],
  ['2021-8-15', '廿四'],
  ['2021-8-16', '廿五'],
  ['2021-8-17', '廿六'],
  ['2021-8-18', '廿七'],
  ['2021-8-19', '廿八'],
  ['2021-8-20', '廿九'],
  ['2021-8-21', '三十'],
  ['2021-8-22', '七月'],
  ['2021-8-23', '初二', '處暑'],
  ['2021-8-24', '初三'],
  ['2021-8-25', '初四'],
  ['2021-8-26', '初五'],
  ['2021-8-27', '初六'],
  ['2021-8-28', '初七'],
  ['2021-8-29', '初八'],
  ['2021-8-30', '初九'],
  ['2021-8-31', '初十'],
  ['2021-9-1', '十一'],
  ['2021-9-2', '十二'],
  ['2021-9-3', '十三'],
  ['2021-9-4', '十四'],
  ['2021-9-5', '十五'],
  ['2021-9-6', '十六'],
  ['2021-9-7', '十七', '白露'],
  ['2021-9-8', '十八'],
  ['2021-9-9', '十九'],
  ['2021-9-10', '二十'],
  ['2021-9-11', '廿一'],
  ['2021-9-12', '廿二'],
  ['2021-9-13', '廿三'],
  ['2021-9-14', '廿四'],
  ['2021-9-15', '廿五'],
  ['2021-9-16', '廿六'],
  ['2021-9-17', '廿七'],
  ['2021-9-18', '廿八'],
  ['2021-9-19', '廿九'],
  ['2021-9-20', '八月'],
  ['2021-9-21', '初二'],
  ['2021-9-22', '初三'],
  ['2021-9-23', '初四', '秋分'],
  ['2021-9-24', '初五'],
  ['2021-9-25', '初六'],
  ['2021-9-26', '初七'],
  ['2021-9-27', '初八'],
  ['2021-9-28', '初九'],
  ['2021-9-29', '初十'],
  ['2021-9-30', '十一'],
  ['2021-10-1', '十二'],
  ['2021-10-2', '十三'],
  ['2021-10-3', '十四'],
  ['2021-10-4', '十五'],
  ['2021-10-5', '十六'],
  ['2021-10-6', '十七'],
  ['2021-10-7', '十八'],
  ['2021-10-8', '十九', '寒露'],
  ['2021-10-9', '二十'],
  ['2021-10-10', '廿一'],
  ['2021-10-11', '廿二'],
  ['2021-10-12', '廿三'],
  ['2021-10-13', '廿四'],
  ['2021-10-14', '廿五'],
  ['2021-10-15', '廿六'],
  ['2021-10-16', '廿七'],
  ['2021-10-17', '廿八'],
  ['2021-10-18', '廿九'],
  ['2021-10-19', '三十'],
  ['2021-10-20', '九月'],
  ['2021-10-21', '初二'],
  ['2021-10-22', '初三'],
  ['2021-10-23', '初四', '霜降'],
  ['2021-10-24', '初五'],
  ['2021-10-25', '初六'],
  ['2021-10-26', '初七'],
  ['2021-10-27', '初八'],
  ['2021-10-28', '初九'],
  ['2021-10-29', '初十'],
  ['2021-10-30', '十一'],
  ['2021-10-31', '十二'],
  ['2021-11-1', '十三'],
  ['2021-11-2', '十四'],
  ['2021-11-3', '十五'],
  ['2021-11-4', '十六'],
  ['2021-11-5', '十七'],
  ['2021-11-6', '十八'],
  ['2021-11-7', '十九', '立冬'],
  ['2021-11-8', '二十'],
  ['2021-11-9', '廿一'],
  ['2021-11-10', '廿二'],
  ['2021-11-11', '廿三'],
  ['2021-11-12', '廿四'],
  ['2021-11-13', '廿五'],
  ['2021-11-14', '廿六'],
  ['2021-11-15', '廿七'],
  ['2021-11-16', '廿八'],
  ['2021-11-17', '廿九'],
  ['2021-11-18', '十月'],
  ['2021-11-19', '初二'],
  ['2021-11-20', '初三'],
  ['2021-11-21', '初四'],
  ['2021-11-22', '初五', '小雪'],
  ['2021-11-23', '初六'],
  ['2021-11-24', '初七'],
  ['2021-11-25', '初八'],
  ['2021-11-26', '初九'],
  ['2021-11-27', '初十'],
  ['2021-11-28', '十一'],
  ['2021-11-29', '十二'],
  ['2021-11-30', '十三'],
  ['2021-12-1', '十四'],
  ['2021-12-2', '十五'],
  ['2021-12-3', '十六'],
  ['2021-12-4', '十七'],
  ['2021-12-5', '十八'],
  ['2021-12-6', '十九'],
  ['2021-12-7', '二十', '大雪'],
  ['2021-12-8', '廿一'],
  ['2021-12-9', '廿二'],
  ['2021-12-10', '廿三'],
  ['2021-12-11', '廿四'],
  ['2021-12-12', '廿五'],
  ['2021-12-13', '廿六'],
  ['2021-12-14', '廿七'],
  ['2021-12-15', '廿八'],
  ['2021-12-16', '廿九'],
  ['2021-12-17', '三十'],
  ['2021-12-18', '十一月'],
  ['2021-12-19', '初二'],
  ['2021-12-20', '初三'],
  ['2021-12-21', '初四'],
  ['2021-12-22', '初五', '冬至'],
  ['2021-12-23', '初六'],
  ['2021-12-24', '初七'],
  ['2021-12-25', '初八'],
  ['2021-12-26', '初九'],
  ['2021-12-27', '初十'],
  ['2021-12-28', '十一'],
  ['2021-12-29', '十二'],
  ['2021-12-30', '十三'],
  ['2021-12-31', '十四']
      ];
      let heatmapData = [];
      let lunarData = [];
      for (let i = 0; i < dateList.length; i++) {
        heatmapData.push([dateList[i][0], Math.random() * 300]);
        lunarData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
      }
基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('container'));
绘制图表
      myChart.setOption({
         tooltip: {
          formatter: function (params) {
            return '降雨量: ' + params.value[1].toFixed(2);
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          calculable: true,
          seriesIndex: [2],
          orient: 'horizontal',
          left: 'center',
          bottom: 20,
          inRange: {
            color: ['#e0ffff', '#006edd'],
            opacity: 0.3
          },
          controller: {
            inRange: {
              opacity: 0.5
            }
          }
        },
        calendar: [
          {
            left: 'center',
            top: 'middle',
            cellSize: [70, 70],
            yearLabel: { show: false },
            orient: 'vertical',
            dayLabel: {
              firstDay: 1,
              nameMap: 'cn'
            },
            monthLabel: {
              show: false
            },
            range: '2021-03'
          }
        ],
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate() + '\n\n' + params.value[2] + '\n\n';
              },
              color: '#000'
            },
            data: lunarData
          },
          {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                return '\n\n\n' + (params.value[3] || '');
              },
              fontSize: 14,
              fontWeight: 700,
              color: '#a00'
            },
            data: lunarData
          },
          {
            name: '降雨量',
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: heatmapData
          }
        ]
      })
    },
  },
  mounted() {
    this.showData()
  },
};
</script>
<style>
.about{
    border: 1px solid red;
}
.about #container{
  width: 1000px;
  height: 500px;
  border: 1px solid red;
}
</style>