busroute/src/pages/views/home/components/PassengerFlow.vue

<template>
  <Layout>
    <template #left>
      <div class="left">
        <Box
          :width="1370"
          :height="406"
          :name="'区域流量'"
          class="left-top"
        >
          <Echart
            v-for="(item, index) in leftContent.tCharts"
            :key="index"
            :option="item.option"
          />
        </Box>
        <div class="left-bottom">
          <template
            v-for="(item, index) in leftContent.bCharts"
            :key="index"
          >
            <Box
              :width="438"
              :height="400"
              :name="item.name"
            >
              <Echart
                v-if="!item.isList"
                :option="item.option"
              />
              <div
                v-else
                class="lineList"
              >
                <div
                  v-for="line, i in item.list"
                  :key="i"
                  class="line"
                >
                  <div
                    :class="'index' + i"
                    class="index"
                  >
                    {{ i + 1 }}
                  </div>
                  <div class="name">
                    {{ line.name }}
                  </div>
                  <div class="content">
                    {{ line.startStation }} → {{ line.endStation }}
                  </div>
                </div>
              </div>
            </Box>
          </template>
        </div>
      </div>
    </template>
    <template #center>
      <div>777</div>
    </template>
    <template #right>
      <div class="right">
        <div class="right-top">
          <Box
            :width="460"
            :height="406"
            :name="'客运量排名'"
          >
            <Echart :option="rightContent.top1" />
          </Box>
          <Box
            :width="900"
            :height="406"
            :name="'运能分析'"
          >
            <Echart :option="rightContent.top2" />
          </Box>
        </div>
        <Box
          class="right-center"
          :width="1370"
          :height="406"
          :name="'今日客流'"
        >
          <Echart :option="rightContent.center" />
        </Box>
        <Box
          class="right-bottom"
          :width="1370"
          :height="406"
          :name="'本月客流'"
        >
          <Echart :option="rightContent.bottom" />
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import Echart from '@/components/chart.vue'
import { ref } from 'vue'
import { graphic } from 'echarts'

const leftContent = ref({
  tCharts: [
    {
      name: '客流线路分布',
      option: {
        title: {
          text: '客流总数/万人', // 图标内容文本
          subtext: '10',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 10, // 图例距离容器右侧的距离
          top: 'center', // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的日候显示一个占位圆
            label: {
              show: true,
              formatter: '{d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '雨城区', value: 30619 },
              { key: 2, name: '芦山县', value: 5921 },
              { key: 2, name: '名山县', value: 1153 },
              { key: 2, name: '天全县', value: 266 },
              { key: 2, name: '宝兴县', value: 87 },
              { key: 2, name: '汉源县', value: 999 },
              { key: 2, name: '石棉县', value: 5921 }
            ]
          }
        ]
      }
    },
    {
      name: '客流线路分布',
      option: {
        grid: {
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          right: '40%',
          itemWidth: 18,
          itemHeight: 18,
          itemGap: 30,
          textStyle: {
            fontSize: 18,
            color: '#C9D2FA'
          }
        },
        xAxis: {
          // name: "班级",
          triggerEvent: true,
          data: [
            '雨城区',
            '芦山县',
            '名山县',
            '天全县',
            '宝兴县',
            '汉源县'
          ],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 18,
            color: '#C9D2FA'
          },
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: '#F3F3F3',
              width: 2
            }
          },

          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitNumber: 2,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#C9D2FA'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#3E4A82'
              }
            }
          }
        ],
        series: [
          {
            name: '客流量',
            type: 'bar',
            silent: true,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [ {
                    offset: 0,
                    color: '#00fdff'// 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00aaff08' // 100% 处的颜色
                  }
                  ],
                  false
                )
              }
            },
            barWidth: 30,
            data: [ 200, 108, 200, 40, 210, 100 ]
          }
        ]
      }
    }
  ],
  bCharts: [
    {
      name: '客流线路分布',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}条',
              color: 'white'
            },
            data: [
              { key: 2, name: '常规', value: 130 },
              { key: 2, name: '快线', value: 50 },
              { key: 2, name: '特色线路', value: 50 }
            ]
          }
        ]
      }
    },
    {
      name: '消费类型',
      option: {
        title: {
          text: '客流总数/万人', // 图标内容文本
          subtext: '10',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '老年卡', value: 180 },
              { key: 2, name: '电子钱包', value: 50 },
              { key: 2, name: '现金', value: 30 },
              { key: 2, name: '学生卡', value: 20 },
              { key: 2, name: '免费', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '乘距分布',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}万人次',
              color: 'white'
            },
            data: [
              { key: 2, name: '2km', value: 5 },
              { key: 2, name: '2-5km', value: 3 },
              { key: 2, name: '5-10km', value: 2 },
              { key: 2, name: '>10km', value: 1 }
            ]
          }
        ]
      }
    },
    {
      name: '通勤时间占比',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}条',
              color: 'white'
            },
            data: [
              { key: 2, name: '<30分钟', value: 130 },
              { key: 2, name: '30-60分钟', value: 50 },
              { key: 2, name: '60-70分钟', value: 50 },
              { key: 2, name: '>90分钟', value: 50 }
            ]
          }
        ]
      }
    },
    {
      name: '换乘次数占比',
      option: {
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{b}： {c}人次',
              color: 'white'
            },
            data: [
              { key: 2, name: '0次', value: 130 },
              { key: 2, name: '1次', value: 30 },
              { key: 2, name: '2次', value: 20 },
              { key: 2, name: '3次以上', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '热门出行线路排名',
      isList: true,
      list: [
        {
          name: '1号',
          startStation: '北京',
          endStation: '上海'
        },
        {
          name: '2号',
          startStation: '北京',
          endStation: '上海'
        },
        {
          name: '3号',
          startStation: '北京',
          endStation: '上海'
        },
        {
          name: '4号',
          startStation: '北京',
          endStation: '上海'
        },
        {
          name: '5号',
          startStation: '北京',
          endStation: '上海'
        }
      ]
    }
  ]
})

const rightContent = ref({
  top1: {
    grid: {
      containLabel: true,
      bottom: '0'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 10,
      right: '40%',
      itemWidth: 18,
      itemHeight: 18,
      itemGap: 30,
      textStyle: {
        fontSize: 18,
        color: '#C9D2FA'
      }
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#232e32'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      },
      data: [ '1路', '2路', '3路', '4路', '5路' ],
      axisTick: {
        show: false
      }
    },
    yAxis: [ {
      type: 'category',
      inverse: true,
      data: [ '1路', '2路', '3路', '4路', '5路' ],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        // "margin": 10,
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      }
    } ],
    series: [ { // 内
      type: 'bar',
      barWidth: 30,
      barGap: 0.5,
      name: '客流量',
      label: {
        show: true,
        position: 'right',
        textStyle: {
          color: '#fff',
          fontSize: 16,
          padding: [ 0, 10 ],
          rich: {
            a: {
              color: '#fff',
              fontSize: 36
            }
          }
        }
      },
      legendHoverLink: false,
      silent: true,
      itemStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          1,
          1,
          [ {
            offset: 0,
            color: '#0f224066'// 0% 处的颜色
          },
          {
            offset: 1,
            color: '#625fdf' // 100% 处的颜色
          }
          ],
          false
        )
      },
      data: [ '80', '70', '60', '50', '40' ]
    }
    ]
  },
  top2: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50
    },
    legend: {
      show: true,
      left: 'center',
      top: '10',
      icon: 'stack',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: '#646464',
        fontSize: 18
      }
    },
    xAxis: [ {
      type: 'category',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18
        // formatter: (value: number) => format( 1'时')
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
    } ],
    yAxis: [ {
      name: '人数/人',
      nameLocation: 'center',
      nameGap: 50,
      nameTextStyle: {
        color: '#fff',
        fontSize: 18
      },
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3'
          // type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#fff'

        }
      },
      axisTick: {
        show: false
      }
    }
    ],
    series: [ {
      name: '客流',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#4293FD',
          lineStyle: {
            // color: '#FFD35D',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FFD35D66'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#189066'
            }
          ], false)
        }
      },
      data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
    },
    {
      name: '运能',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#6A5BF066'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#1890ff66'
            }
          ], false)
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    }
    ],
    dataZoom: {}
  },
  center: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50
    },
    legend: {
      show: true,
      left: 'center',
      top: '10',
      icon: 'stack',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: '#646464',
        fontSize: 18
      }
    },
    xAxis: [ {
      type: 'category',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18
        // formatter: (value: number) => format( 1'时')
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
    } ],
    yAxis: [ {
      name: '人数/人',
      nameLocation: 'center',
      nameGap: 50,
      nameTextStyle: {
        color: '#fff',
        fontSize: 18
      },
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3'
          // type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#fff'

        }
      },
      axisTick: {
        show: false
      }
    }
    ],
    series: [ {
      name: '当前',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#4293FD',
          lineStyle: {
            // color: '#4293FD',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FFD35D66'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#189066'
            }
          ], false)
        }
      },
      data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
    },
    {
      name: '环比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#6A5BF066'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#1890ff66'
            }
          ], false)
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    },
    {
      name: '同比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2ECC7166'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#1890ff66'
            }
          ], false)
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    }
    ],
    dataZoom: {}
  },
  bottom: {
    grid: {
      containLabel: true,
      right: 30,
      left: 50
    },
    legend: {
      show: true,
      left: 'center',
      top: '10',
      icon: 'stack',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        color: '#646464',
        fontSize: 18
      }
    },
    xAxis: [ {
      type: 'category',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18
        // formatter: (value: number) => format( 1'时')
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: [ '1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日' ]
    } ],
    yAxis: [ {
      name: '人数/人',
      nameLocation: 'center',
      nameGap: 50,
      nameTextStyle: {
        color: '#fff',
        fontSize: 18
      },
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3'
          // type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#fff'

        }
      },
      axisTick: {
        show: false
      }
    }
    ],
    series: [ {
      name: '当前',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#4293FD',
          lineStyle: {
            // color: '#4293FD',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FFD35D66'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#189066'
            }
          ], false)
        }
      },
      data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
    },
    {
      name: '环比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#6A5BF066'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#1890ff66'
            }
          ], false)
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    },
    {
      name: '同比',
      type: 'line',
      smooth: true,
      symbolSize: 0,
      itemStyle: {
        normal: {
          // color: '#23D0C4',
          lineStyle: {
            // color: '#23D0C4',
            width: 1
          }
        }
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2ECC7166'
            },
            {
              offset: 0.5,
              color: '#7ec2f366'
            },
            {
              offset: 1,
              color: '#1890ff66'
            }
          ], false)
        }
      },
      data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
    }
    ],
    dataZoom: {}
  }
})
</script>

<style lang="scss" scoped>
.left {
  &-top {
    :deep(.box-content) {
      display: flex;
      justify-content: space-between;
    }
  }

  &-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    :deep(.box-content) {
      position: relative;
    }

    .lineList {
      padding: 25px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      height: 335px;
      overflow: scroll;

      .line {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #fff;

        .index {
          width: 45px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          border-radius: 50%;
          border: 1px solid #00FFFF;
          background-color: rgba(0, 191, 191, 0.3);

          &.index0 {
            border: 1px solid #FFFF00;
            background-color: rgba(255, 255, 0, 0.3);
          }

          &.index1 {
            border: 1px solid #F2F2F2;
            background: rgba(242, 242, 242, 0.298);
          }

          &.index2 {
            border: 1px solid #FAAD0E;
            background: rgba(250, 173, 14, 0.298);
          }
        }

        .name {
          margin: 0 50px 0 15px;
          text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.8);
        }

        .content {
          color: #80FFFF;
          font-size: 20px;
        }
      }
    }

  }
}

.right {
  &-top {
    display: flex;
    gap: 10px;
    // justify-content: space-between;
  }
}
</style>