add echarts demo

src/router/chart.js

@@ -0,0 +1,37 @@
+const ChartIndex = () => import('views/chart/ChartIndex')
+const ChartMap = () => import('views/chart/ChartMap')
+const HeatMap = () => import('views/chart/HeatMap')
+const LineChart = () => import('views/chart/LineChart')
+
+export default {
+  path: '/chart',
+  name: 'ChartIndex',
+  component: ChartIndex,
+  meta: { needAuth: false },
+  children: [
+    {
+      path: '',
+      name: '地图',
+      component: ChartMap,
+      meta: { needAuth: false }
+    },
+    {
+      path: '/chart/map',
+      name: '地图',
+      component: ChartMap,
+      meta: { needAuth: false }
+    },
+    {
+      path: '/chart/heatmap',
+      name: '热力图',
+      component: HeatMap,
+      meta: { needAuth: false }
+    },
+    {
+      path: '/chart/line',
+      name: '折线图',
+      component: LineChart,
+      meta: { needAuth: false }
+    }
+  ]
+}

src/router/index.js

@@ -6,6 +6,7 @@ import ExamRouter from './exam'
 import MallRouter from './mall'
 import VodRouter from './vod'
 import MapRouter from './map'
+import ChartRouter from './chart'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
@@ -41,6 +42,7 @@ const routes = [
   MallRouter,
   MapRouter,
   VodRouter,
+  ChartRouter,
   {
     path: '/login',
     name: 'Login',

src/views/chart/ChartIndex.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-container style="border: 1px solid #eee">
+    <el-header style="text-align: right; font-size: 12px">
+      <el-col :md="2">
+        <ul class="el-menu--horizontal el-menu">
+          <li class="el-menu-item">
+            <a href="/chart" style="text-decoration-line: none">
+              <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
+              chart
+            </a>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :md="20">
+        <el-menu
+          :default-active="this.$route.path"
+          router
+          mode="horizontal"
+        >
+          <el-menu-item index="/chart/map">
+            <i class="el-icon-map-location" />
+            <span slot="title">地图</span>
+          </el-menu-item>
+          <el-menu-item index="/chart/heatmap">
+            <i class="el-icon-map-location" />
+            <span slot="title">热力图</span>
+          </el-menu-item>
+          <el-menu-item index="/chart/line">
+            <i class="el-icon-map-location" />
+            <span slot="title">折线图</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :md="2" />
+    </el-header>
+    <el-container>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'ChartIndex',
+  mixins: [userMixin],
+  data() {
+    return {
+      user: null
+    }
+  },
+  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    const userInfo = getAuthedUser()
+    if (userInfo !== null) {
+      this.user = userInfo
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/chart/ChartMap.vue

@@ -0,0 +1,209 @@
+<template>
+  <div ref="chartsDOM" style="width: 1080px;height:720px;" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import chinaData from '@/json/china.json'
+import sichuanData from '@/json/sichuan.json'
+import guangxiData from '@/json/guangxi.json'
+
+export default {
+  name: 'ChartMap',
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  mounted() {
+    // 初始化统计图对象
+    this.myChart = echarts.init(this.$refs['chartsDOM'])
+    this.initChart1()
+  },
+  created() {
+    document.title = 'ChartMap'
+  },
+  methods: {
+    initChart1() {
+      // 显示 loading 动画
+      this.myChart.showLoading()
+
+      // 在得到数据的基础上，进行地图绘制, 得到结果后，关闭动画
+      this.myChart.hideLoading()
+
+      // 注册地图(数据放在axios返回对象的data中哦)
+      var mapData = this.getMapData('china')
+      var mapData1 = this.getMapData1('sichuan')
+      var mapData2 = this.getMapData2('guangxi')
+      echarts.registerMap(mapData.name, mapData.data)
+
+      var options = this.getOptions1(mapData)
+      this.myChart.setOption(options)
+    },
+    getMapData(mapName) {
+      var mapData = {
+        name: mapName,
+        data: chinaData,
+        dataList: [
+          { name: '北京', value: '100' }, { name: '天津', value: this.randomData() },
+          { name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
+          { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
+          { name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() },
+          { name: '黑龙江', value: this.randomData() }, { name: '湖南', value: this.randomData() },
+          { name: '安徽', value: this.randomData() }, { name: '山东', value: this.randomData() },
+          { name: '新疆', value: this.randomData() }, { name: '江苏', value: this.randomData() },
+          { name: '浙江', value: this.randomData() }, { name: '江西', value: this.randomData() },
+          { name: '湖北', value: this.randomData() }, { name: '广西', value: this.randomData() },
+          { name: '甘肃', value: this.randomData() }, { name: '山西', value: this.randomData() },
+          { name: '内蒙古', value: this.randomData() }, { name: '陕西', value: this.randomData() },
+          { name: '吉林', value: this.randomData() }, { name: '福建', value: this.randomData() },
+          { name: '贵州', value: this.randomData() }, { name: '广东', value: this.randomData() },
+          { name: '青海', value: this.randomData() }, { name: '西藏', value: this.randomData() },
+          { name: '四川', value: this.randomData() }, { name: '宁夏', value: this.randomData() },
+          { name: '海南', value: this.randomData() }, { name: '台湾', value: this.randomData() },
+          { name: '香港', value: this.randomData() }, { name: '澳门', value: this.randomData() }
+        ]
+      }
+      return mapData
+    },
+    getMapData1(mapName) {
+      var mapData = {
+        name: mapName,
+        data: sichuanData,
+        dataList: [
+          { name: '成都市', value: Math.round(Math.random() * 1000) },
+          { name: '自贡市', value: Math.round(Math.random() * 1000) },
+          { name: '攀枝花市', value: Math.round(Math.random() * 1000) },
+          { name: '广元市', value: Math.round(Math.random() * 1000) },
+          { name: '巴中市', value: Math.round(Math.random() * 1000) },
+          { name: '达州市', value: Math.round(Math.random() * 1000) },
+          { name: '广安市', value: Math.round(Math.random() * 1000) },
+          { name: '遂宁市', value: Math.round(Math.random() * 1000) },
+          { name: '南充市', value: Math.round(Math.random() * 1000) },
+          { name: '资阳市', value: Math.round(Math.random() * 1000) },
+          { name: '内江市', value: Math.round(Math.random() * 1000) },
+          { name: '泸州市', value: Math.round(Math.random() * 1000) },
+          { name: '宜宾市', value: Math.round(Math.random() * 1000) },
+          { name: '乐山市', value: Math.round(Math.random() * 1000) },
+          { name: '眉山市', value: Math.round(Math.random() * 1000) },
+          { name: '绵阳市', value: Math.round(Math.random() * 1000) },
+          { name: '德阳市', value: Math.round(Math.random() * 1000) },
+          { name: '雅安市', value: Math.round(Math.random() * 1000) },
+          { name: '阿坝藏族羌族自治州', value: Math.round(Math.random() * 1000) },
+          { name: '甘孜藏族自治州', value: Math.round(Math.random() * 1000) },
+          { name: '凉山彝族自治州', value: Math.round(Math.random() * 1000) }
+        ]
+      }
+      return mapData
+    },
+    getMapData2(mapName) {
+      var mapData = {
+        name: mapName,
+        data: guangxiData,
+        dataList: [
+          { name: '南宁市', value: 11111 },
+          { name: '崇左市', value: 22221 },
+          { name: '柳州市', value: 33333 },
+          { name: '来宾市', value: 22231 },
+          { name: '桂林市', value: 44441 },
+          { name: '梧州市', value: 555525 },
+          { name: '贺州市', value: 162475 },
+          { name: '玉林市', value: 65454 },
+          { name: '贵港市', value: 77771 },
+          { name: '百色市', value: 88884 },
+          { name: '钦州市', value: 99995 },
+          { name: '河池市', value: 10001 },
+          { name: '北海市', value: 122222 },
+          { name: '防城港市', value: 333332 }
+        ]
+      }
+      return mapData
+    },
+    getOptions(mapData) {
+      return {
+        visualMap: {
+          min: 1111,
+          max: 333332,
+          realtime: false,
+          calculable: true,
+          inRange: {
+            color: ['lightskyblue', 'yellow', 'orangered']
+          }
+        },
+        title: {
+          text: '广西GDP统计图(/万元)'
+        },
+        tooltip: {},
+        series: [
+          {
+            name: '广西地图',
+            type: 'map',
+            map: mapData.name, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+            label: {
+              show: true
+            },
+            data: mapData.dataList
+          }
+        ]
+      }
+    },
+    getOptions1(mapData) {
+      return {
+        backgroundColor: '#FFFFFF',
+        title: {
+          text: '全国数据',
+          subtext: '各市州显示',
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        // 左侧小导航图标
+        visualMap: {
+          show: true,
+          x: 'left',
+          y: 'center',
+          splitList: [
+            { start: 800, end: 1000 },
+            { start: 600, end: 800 },
+            { start: 400, end: 600 },
+            { start: 200, end: 400 },
+            { start: 100, end: 200 },
+            { start: 0, end: 100 }
+          ],
+          color: [
+            '#5475f5',
+            '#9feaa5',
+            '#85daef',
+            '#74e2ca',
+            '#e6ac53',
+            '#9fb5ea'
+          ]
+        },
+        // 配置属性
+        series: [{
+          name: '数据',
+          type: 'map',
+          map: mapData.name,
+          roam: true,
+          label: {
+            normal: {
+              show: true // 省份名称
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          data: mapData.dataList // 数据
+        }]
+      }
+    },
+    randomData() {
+      return Math.ceil(Math.random() * 1000)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/chart/HeatMap.vue

@@ -0,0 +1,280 @@
+<template>
+  <div ref="chartsDOM" style="width: 1080px;height:720px;" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'HeatMap',
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  mounted() {
+    // 初始化统计图对象
+    this.myChart = echarts.init(this.$refs['chartsDOM'])
+    this.initChart2()
+    // this.initChart3()
+    // this.initChart4()
+  },
+  created() {
+    document.title = 'HeatMap'
+  },
+  methods: {
+    initChart2() {
+      // 配置项
+      var option = {
+        tooltip: {
+          position: 'top'
+        },
+        animation: false,
+        grid: {
+          height: '50%',
+          y: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
+            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
+          splitArea: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
+            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
+          splitArea: {
+            show: true
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: 100,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%'
+        },
+        series: [{
+          name: '热力图',
+          type: 'heatmap',
+          data: [
+            [0, 1, 1],
+            [0, 2, 1],
+            [0, 3, 1],
+            [0, 4, 1],
+            [0, 2, 1],
+            [0, 3, 1],
+            [0, 7, 1],
+            [0, 8, 1],
+            [0, 9, 1],
+            [0, 10, 1],
+            [0, 11, 1],
+            [0, 12, 1],
+            [0, 13, 1],
+            [0, 14, 1],
+            [0, 12, 1],
+            [0, 13, 1],
+            [0, 17, 1],
+            [0, 18, 1],
+            [0, 19, 1],
+            [0, 18, 1],
+            [1, 0, 2],
+            [12, 1, 2],
+            [1, 1, 1],
+            [1, 2, 2],
+            [1, 3, 2],
+            [1, 4, 2],
+            [10, 2, 2],
+            [1, 3, 2],
+            [1, 7, 2],
+            [1, 8, 2],
+            [1, 9, 3],
+            [9, 10, 3],
+            [1, 11, 3],
+            [1, 12, 3],
+            [7, 13, 3],
+            [1, 14, 3],
+            [1, 12, 3],
+            [1, 13, 3],
+            [2, 17, 3],
+            [1, 18, 34],
+            [3, 19, 33],
+            [2, 19, 31],
+            [19, 18, 100],
+            [19, 19, 11]
+          ],
+          label: {
+            show: true
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }]
+      }
+
+      // 使用配置项显示图表
+      this.myChart.setOption(option)
+    },
+    initChart3() {
+      var option1 = {
+        title: {
+          top: 30,
+          left: 'center',
+          text: 'Daily Step Count'
+        },
+        tooltip: {},
+        visualMap: {
+          min: 0,
+          max: 10000,
+          type: 'piecewise',
+          orient: 'horizontal',
+          left: 'center',
+          top: 65
+        },
+        calendar: {
+          top: 120,
+          left: 30,
+          right: 30,
+          cellSize: ['auto', 13],
+          range: '2023',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false }
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: this.getVirtualData('2023')
+        }
+      }
+
+      this.myChart.setOption(option1, true)
+      // clearInterval(this.tootipTimer)
+      // this.tootipTimer = this.myChart.tools.loopShowTooltip(this.myChart, option, {
+      //   interval: 3000, // 轮播间隔时间
+      //   loopSeries: true // 是否开启轮播循环
+      // })
+
+      window.addEventListener('resize', () => {
+        if (this.myChart) {
+          this.myChart.resize()
+        }
+      })
+    },
+    randomData() {
+      return Math.ceil(Math.random() * 1000)
+    },
+    getVirtualData(year) {
+      const start = new Date(2023, 0, 0)
+      const data = []
+      for (let time = 1; time < 366; time++) {
+        start.setDate(start.getDate() + 1)
+        data.push([
+          this.formatDateTime(start),
+          Math.floor(Math.random() * 10000)
+        ])
+      }
+      console.log(data)
+      return data
+    },
+    formatDateTime(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      const hour = date.getHours()
+      const minute = date.getMinutes()
+      const second = date.getSeconds()
+      // return `${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hour)}:${this.pad(minute)}:${this.pad(second)}`
+      return `${year}-${this.pad(month)}-${this.pad(day)}`
+    },
+    pad(num) {
+      return num.toString().padStart(2, '0')
+    },
+    initChart4() {
+      const hours = [
+        '12a', '1a', '2a', '3a', '4a', '5a', '6a',
+        '7a', '8a', '9a', '10a', '11a',
+        '12p', '1p', '2p', '3p', '4p', '5p',
+        '6p', '7p', '8p', '9p', '10p', '11p'
+      ]
+
+      const days = [
+        'Saturday', 'Friday', 'Thursday',
+        'Wednesday', 'Tuesday', 'Monday', 'Sunday'
+      ]
+
+      const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
+        .map(function(item) {
+          return [item[1], item[0], item[2] || '-']
+        })
+      console.log(data)
+
+      var option = {
+        tooltip: {
+          position: 'top'
+        },
+        grid: {
+          height: '50%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: hours,
+          splitArea: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: days,
+          splitArea: {
+            show: true
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%'
+        },
+        series: [
+          {
+            name: 'Punch Card',
+            type: 'heatmap',
+            data: data,
+            label: {
+              show: true
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+
+      this.myChart.setOption(option, true)
+      window.addEventListener('resize', () => {
+        if (this.myChart) {
+          this.myChart.resize()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/chart/LineChart.vue

@@ -0,0 +1,424 @@
+<template>
+  <el-row>
+    <el-row class="movie-list">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>折线图</span>
+        </div>
+        <div id="chart1" style="width: 1000px;height:400px;" />
+      </el-card>
+    </el-row>
+    <el-row class="movie-list">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>饼图</span>
+        </div>
+        <div id="chart2" style="width: 600px;height:400px;" />
+      </el-card>
+    </el-row>
+    <el-row class="movie-list">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>金字塔图</span>
+        </div>
+        <div id="chart3" style="width: 800px;height:400px;" />
+      </el-card>
+    </el-row>
+    <el-row class="movie-list">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>饼图</span>
+        </div>
+        <div id="chart4" style="width: 800px;height:400px;" />
+      </el-card>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'LineChart',
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.initChart1()
+    this.initChart2()
+    this.initChart3()
+  },
+  created() {
+    document.title = 'LineChart'
+  },
+  methods: {
+    initChart() {
+      // 配置项
+      var option = {
+        tooltip: {
+          position: 'top'
+        },
+        animation: false,
+        grid: {
+          height: '50%',
+          y: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
+            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
+          splitArea: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
+            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
+          splitArea: {
+            show: true
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: 100,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%'
+        },
+        series: [{
+          name: '热力图',
+          type: 'heatmap',
+          data: [
+            [1, 2, 31, 4, 51, 60, 70, 10, 80, 10, 90, 19, 20, 30, 1, 20, 0, 1, 20, 20],
+            [0, 1, 20, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [0, 2, 30, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [1, 0, 40, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [1, 1, 50, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [1, 2, 60, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [2, 0, 70, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [2, 1, 80, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [2, 2, 90, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [3, 0, 80, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [3, 1, 70, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [3, 2, 60, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [4, 0, 50, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [4, 1, 40, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [4, 2, 30, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [5, 0, 20, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [5, 1, 10, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [5, 2, 5, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [6, 0, 0, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20],
+            [6, 1, 0, 0, 10, 0, 0, 10, 0, 10, 0, 1, 20, 0, 1, 20, 0, 1, 20, 20]
+          ],
+          label: {
+            show: true
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }]
+      }
+      // 使用配置项显示图表
+      this.myChart.setOption(option)
+    },
+    randomData() {
+      return Math.ceil(Math.random() * 1000)
+    },
+    initChart1() {
+      var base = +new Date(2014, 9, 3)
+      var oneDay = 24 * 3600 * 1000
+      var date = []
+      var data = [Math.random() * 150]
+      var now = new Date(base)
+
+      function addData(shift) {
+        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
+        date.push(now)
+
+        data.push((Math.random() - 0.4) * 10 + data[data.length - 1])
+
+        if (shift) {
+          date.shift()
+          data.shift()
+        }
+        now = new Date(+new Date(now) + oneDay)
+      }
+
+      for (var i = 1; i < 100; i++) {
+        addData()
+      }
+
+      var option = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: date
+        },
+        yAxis: {
+          boundaryGap: [0, '50%'],
+          type: 'value'
+        },
+        series: [
+          {
+            name: '成交',
+            type: 'bar',
+            smooth: true,
+            symbol: 'none',
+            stack: 'a',
+            areaStyle: {
+              normal: {}
+            },
+            data: data
+          }
+        ]
+      }
+
+      const myChart = this.$echarts.init(document.getElementById('chart1'))
+      setInterval(function() {
+        addData(true)
+        myChart.setOption({
+          xAxis: {
+            data: date
+          },
+          series: [{
+            name: '成交',
+            data: data
+          }]
+        })
+      }, 500)
+
+      myChart.setOption(option, true)
+      window.addEventListener('resize', () => {
+        if (myChart) {
+          myChart.resize()
+        }
+      })
+    },
+    initChart2() {
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ]
+          }
+        ]
+      }
+
+      const myChart = this.$echarts.init(document.getElementById('chart2'))
+      myChart.setOption(option, true)
+      window.addEventListener('resize', () => {
+        if (myChart) {
+          myChart.resize()
+        }
+      })
+    },
+    initChart3() {
+      var maleData = [
+        14, 4, 10, 66,
+        54, 98, 116, 144,
+        210, 358, 484, 562,
+        706, 671, 566, 345,
+        200, 92, 24, 12,
+        0.0
+      ]
+
+      var femaleData = [
+        0, 0, 0, 15, 19,
+        29, 30, 25, 27, 34,
+        36, 48, 36, 56, 60,
+        48, 36, 12, 8, 0,
+        0.0
+      ]
+
+      var maleTotal = maleData.map(function(x) {
+        return Math.abs(x)
+      }).reduce(function(a, b) {
+        return a + b
+      })
+
+      var femaleTotal = femaleData.map(function(x) {
+        return Math.abs(x)
+      }).reduce(function(a, b) {
+        return a + b
+      })
+
+      var malePercentage = maleData.map(function(x) {
+        return -(x / maleTotal * 100)
+      })
+
+      var femalePercentage = femaleData.map(function(x) {
+        return x / femaleTotal * 100
+      })
+
+      const myChart = this.$echarts.init(document.getElementById('chart3'))
+      var option = {
+        title: {
+          text: '唐朝人口金字塔', // 设置标题文本为“唐朝人口金字塔”
+          left: 'center', // 标题水平居中
+          top: '4%', // 标题距离顶部的距离为4%
+          textStyle: {
+            color: '#333', // 标题字体颜色
+            fontSize: 24, // 标题字体大小
+            fontWeight: 'bold', // 标题字体加粗
+            fontFamily: 'KaiTi, serif' // 标题字体样式，楷体或Serif字体
+          }
+        },
+        tooltip: {
+          trigger: 'axis', // 提示框触发类型为坐标轴
+          axisPointer: {
+            type: 'shadow' // 坐标轴指示器类型为阴影
+          },
+          formatter: function(params) {
+            return params[0].name + '<br/>' +
+              params[0].seriesName + ': ' + Math.abs(maleData[params[0].dataIndex]) + ' (' + Math.abs(params[0].data).toFixed(2) + '%)' + '<br/>' +
+              params[1].seriesName + ': ' + Math.abs(femaleData[params[0].dataIndex]) + ' (' + Math.abs(params[1].data).toFixed(2) + '%)'
+            // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
+          }
+        },
+        legend: {
+          data: ['男性', '女性'], // 图例数据为“男性”和“女性”
+          align: 'left', // 图例左对齐
+          top: '6%', // 图例距离顶部的距离为6%
+          right: 2 // 图例距离右边的距离为2
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: function(value) {
+              // 自定义X轴标签的格式化函数，返回绝对值百分比
+              return Math.abs(value) + '%'
+            }
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: [
+            '0-4', '5-9', '10-14', '15-19',
+            '20-24', '25-29', '30-34', '35-39', '40-44',
+            '45-49', '50-54', '55-59', '60-64', '65-69',
+            '70-74', '75-79', '80-84', '85-89', '90-94',
+            '95-99', '100 + '
+          ]
+        },
+        series: [
+          {
+            name: '男性', // 数据系列的名称
+            type: 'bar', // 系列类型为条形图
+            stack: 'total', // 数据堆叠，同一个堆叠组的数据会堆叠显示
+            itemStyle: {
+              // 条形图的颜色渐变设置
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#3d8e86' },
+                { offset: 0.5, color: '#5da39d' },
+                { offset: 1, color: '#88bfb8' }
+              ])
+            },
+            emphasis: {
+              focus: 'series' // 强调设置
+            },
+            data: malePercentage // 男性数据百分比
+          },
+          {
+            name: '女性', // 数据系列的名称
+            type: 'bar', // 系列类型为条形图
+            stack: 'total', // 数据堆叠
+            emphasis: {
+              focus: 'series' // 强调设置
+            },
+            itemStyle: {
+              // 条形图的颜色渐变设置
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#d2a36c' },
+                { offset: 0.5, color: '#d5c8a0' },
+                { offset: 1, color: '#dfd6b8' }
+              ])
+            },
+            data: femalePercentage // 女性数据百分比
+          }
+        ]
+      }
+
+      myChart.setOption(option, true)
+      window.addEventListener('resize', () => {
+        if (myChart) {
+          myChart.resize()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-container {
+  width: 100%;
+  height: 100%;
+}
+.el-container {
+  animation: leftMoveIn .7s ease-in;
+}
+
+@keyframes leftMoveIn {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.card-style {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+</style>