|
|
|
|
@ -1,17 +1,18 @@
|
|
|
|
|
<!--
|
|
|
|
|
Bootstrap 的五个预设响应尺寸分别是：
|
|
|
|
|
这里是对Bootstrap预设响应尺寸的说明注释，用于解释在页面布局中不同屏幕尺寸范围对应的类前缀含义，方便后续理解组件在不同设备上的布局表现。
|
|
|
|
|
|
|
|
|
|
xs - Extra Small（特小屏幕）：适用于小型移动设备，如手机。一般小于576px宽度。
|
|
|
|
|
sm - Small（小屏幕）：适用于较小的设备，如平板电脑或较小的桌面显示器。一般在576px到768px之间。
|
|
|
|
|
md - Medium（中等屏幕）：适用于中等尺寸的设备，如普通的桌面显示器或笔记本电脑。一般在768px到992px之间。
|
|
|
|
|
lg - Large（大屏幕）：适用于较大的设备，如较大的桌面显示器。一般在992px到1200px之间。
|
|
|
|
|
xl - Extra Large（特大屏幕）：适用于非常大尺寸的设备，如大型显示器或电视。一般大于1200px宽度。
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 创建一个名为my-chart的div容器，作为整个图表区域的外层容器 -->
|
|
|
|
|
<div class="my-chart">
|
|
|
|
|
<!-- 使用el-row组件创建一个行布局，设置列间距（gutter）为24像素，用于对内部列元素进行分组布局 -->
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
<!-- 第一行 -->
|
|
|
|
|
<!-- 以下是第一行的布局代码，目前被注释掉了，原本计划放置两个等宽的列元素，在不同屏幕尺寸下有相应的占比设置，每个列元素内包含一个空的chartCard类的div，可能用于后续添加具体图表内容 -->
|
|
|
|
|
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
|
|
|
<div class="chartCard " />
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -19,9 +20,11 @@ xl - Extra Large（特大屏幕）：适用于非常大尺寸的设备，如大
|
|
|
|
|
<div class="chartCard " />
|
|
|
|
|
</el-col> -->
|
|
|
|
|
|
|
|
|
|
<!-- 第二行 -->
|
|
|
|
|
<!-- 第二行的布局，包含三个列元素，分别用于放置不同的图表 -->
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
|
|
|
<!-- 创建一个名为chartCard的div元素，设置宽度为100%、高度为20rem、内边距为0.3rem，作为折线图的容器 -->
|
|
|
|
|
<div class="chartCard " style='width:100%; height:20rem; padding: 0.3rem;'>
|
|
|
|
|
<!-- 创建一个id为lineChart的div元素，设置宽度为100%、高度为98%、顶部内边距为1rem，作为Echarts折线图的绘制区域 -->
|
|
|
|
|
<div id='lineChart' style='width:100%; height:98%; padding-top: 1rem;'></div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -40,51 +43,73 @@ xl - Extra Large（特大屏幕）：适用于非常大尺寸的设备，如大
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
// 从vue模块中导入ref、onMounted和toRef函数，ref用于创建响应式引用，onMounted用于在组件挂载后执行回调函数，toRef用于创建对响应式对象属性的引用（此处未看到使用，可能后续会添加相关逻辑）
|
|
|
|
|
import { ref, onMounted, toRef } from "vue";
|
|
|
|
|
// 导入echarts库，用于创建和配置各种图表
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
|
|
// 在组件挂载完成后执行以下回调函数
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 定义EChartsOption类型别名，等同于echarts.EChartsOption类型，方便后续书写配置选项时明确类型
|
|
|
|
|
type EChartsOption = echarts.EChartsOption;
|
|
|
|
|
|
|
|
|
|
// 折线图
|
|
|
|
|
// 折线图相关配置和初始化
|
|
|
|
|
// 获取页面中id为lineChart的DOM元素，使用非空断言操作符（!）表示确定该元素存在（若不存在会报错）
|
|
|
|
|
var chartDomLineChart = document.getElementById('lineChart')!;
|
|
|
|
|
// 使用echarts.init方法初始化一个折线图实例，传入对应的DOM元素
|
|
|
|
|
var lineChart = echarts.init(chartDomLineChart);
|
|
|
|
|
// 定义一个变量option用于存储折线图的配置选项，类型为EChartsOption
|
|
|
|
|
var option: EChartsOption;
|
|
|
|
|
option = {
|
|
|
|
|
// 设置折线图线条颜色，这里只有一个颜色值，意味着所有数据系列的线条颜色相同
|
|
|
|
|
color: ['#80FFA5'],
|
|
|
|
|
title: {
|
|
|
|
|
// 图表标题文本，显示车流量相关信息以及一个火箭图标（可能是装饰性图标，实际显示效果取决于字体图标库等支持情况）
|
|
|
|
|
text: ' 🚀 车流量折线图 ',
|
|
|
|
|
// left: 'center'
|
|
|
|
|
// subtext: '每分钟数据'
|
|
|
|
|
// left: 'center'，这行代码被注释掉了，若启用可设置标题在水平方向居中显示（目前未使用该设置）
|
|
|
|
|
// subtext: '每分钟数据'，这行代码被注释掉了，原本可能用于设置副标题，显示数据的时间间隔等信息（目前未使用该设置）
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
|
|
// 设置提示框的触发方式为坐标轴触发，即鼠标悬停在坐标轴上的系列数据点时显示提示框
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 设置坐标轴指示器类型为十字准星，方便查看对应的数据点在横纵坐标轴上的位置
|
|
|
|
|
type: 'cross',
|
|
|
|
|
label: {
|
|
|
|
|
// 设置提示框背景颜色
|
|
|
|
|
backgroundColor: '#80FFA5'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 设置提示框内容的格式化字符串，{b}表示系列名称，{c}表示数据值，这里用于展示车流量具体数值及相关说明
|
|
|
|
|
formatter: '{b}:<br/> 车流量：{c} %'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
// 设置图例的数据，这里只有一个“车流量”，对应图表中的数据系列名称
|
|
|
|
|
data: ['车流量'],
|
|
|
|
|
// 设置图例在底部显示（位置为0，即最底部）
|
|
|
|
|
bottom: 0
|
|
|
|
|
},
|
|
|
|
|
// 保存
|
|
|
|
|
// 图表的工具盒配置，用于提供一些图表操作功能，如保存图像等
|
|
|
|
|
toolbox: {
|
|
|
|
|
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: {
|
|
|
|
|
pixelRatio: 2, // 设置保存图像的像素比例，默认为1，可以提高清晰度
|
|
|
|
|
title: '下载', // 保存图像按钮的鼠标悬停标题
|
|
|
|
|
// icon: 'image://path/to/save-icon.png', // 自定义保存图像按钮的图标
|
|
|
|
|
name: '车流量折线图', // 指定保存图像时使用的文件名
|
|
|
|
|
// backgroundColor: 'transparent', // 保存的图像背景颜色，默认为透明
|
|
|
|
|
excludeComponents: ['toolbox'], // 排除不想保存的组件，默认不排除任何组件
|
|
|
|
|
show: true, // 是否显示保存图像按钮，默认为true
|
|
|
|
|
// 设置保存图像的像素比例，默认为1，这里设置为2可以提高保存图像的清晰度
|
|
|
|
|
pixelRatio: 2,
|
|
|
|
|
// 设置保存图像按钮的鼠标悬停标题，显示为“下载”
|
|
|
|
|
title: '下载',
|
|
|
|
|
// 以下这行代码被注释掉了，原本可用于自定义保存图像按钮的图标，通过指定路径来显示特定的图标（需根据实际图标资源情况设置路径）
|
|
|
|
|
// icon: 'image://path/to/save-icon.png',
|
|
|
|
|
// 指定保存图像时使用的文件名，这里设置为“车流量折线图”
|
|
|
|
|
name: '车流量折线图',
|
|
|
|
|
// 以下这行代码被注释掉了，原本可用于设置保存的图像背景颜色，默认为透明（这里未启用该设置）
|
|
|
|
|
// backgroundColor: 'transparent',
|
|
|
|
|
// 排除不想保存的组件，默认不排除任何组件，这里保持默认设置（未排除任何组件）
|
|
|
|
|
excludeComponents: ['toolbox'],
|
|
|
|
|
// 设置是否显示保存图像按钮，默认为true，这里保持显示
|
|
|
|
|
show: true,
|
|
|
|
|
// 以下这段代码被注释掉了，原本可用于设置鼠标悬停在保存图像按钮时的高亮显示相关样式，如文本位置、颜色、边框颜色和宽度等（目前未启用该设置）
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// show: true, // 鼠标悬停按钮时是否高亮显示，默认为true
|
|
|
|
|
// iconStyle: {
|
|
|
|
|
@ -100,32 +125,50 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
// 设置图表绘图区域距离容器左侧的百分比，这里为5%
|
|
|
|
|
left: '5%',
|
|
|
|
|
// 设置图表绘图区域距离容器右侧的百分比，这里为5%
|
|
|
|
|
right: '5%',
|
|
|
|
|
// 设置图表绘图区域距离容器顶部的百分比，这里为20%
|
|
|
|
|
top: '20%',
|
|
|
|
|
// 设置图表绘图区域距离容器底部的百分比，这里为10%
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
// 设置是否包含坐标轴的刻度标签，设置为true表示包含，使绘图区域能自适应刻度标签的大小
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
xAxis: [{
|
|
|
|
|
// 设置坐标轴两边不留空白，使数据点能紧密排列在坐标轴上
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
// 设置坐标轴类型为类目型，意味着坐标轴上的数据是离散的类别（如时间点、分类名称等）
|
|
|
|
|
type: 'category',
|
|
|
|
|
// 设置x轴的数据，这里是一系列时间点（小时数），用于展示不同时间的车流量情况
|
|
|
|
|
data: ['12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26']
|
|
|
|
|
}],
|
|
|
|
|
yAxis: [{
|
|
|
|
|
// 设置y轴类型为数值型，用于展示数值数据（车流量的百分比数值）
|
|
|
|
|
type: 'value'
|
|
|
|
|
}],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
// 数据系列的名称，对应图例中的显示名称以及提示框等地方的标识
|
|
|
|
|
name: '车流量',
|
|
|
|
|
// 设置数据系列类型为折线图
|
|
|
|
|
type: 'line',
|
|
|
|
|
// smooth: true, // 是否为曲线
|
|
|
|
|
// 以下这行代码被注释掉了，若启用可使折线变为平滑曲线（目前为折线形式）
|
|
|
|
|
// smooth: true,
|
|
|
|
|
// 以下这行代码被注释掉了，原本可设置折线图上数据点的形状为圆形（目前未设置特定形状）
|
|
|
|
|
// symbol: 'circle',
|
|
|
|
|
// 以下这行代码被注释掉了，原本可设置折线图上数据点的大小（目前未设置特定大小）
|
|
|
|
|
// symbolSize: 5,
|
|
|
|
|
// 以下这行代码被注释掉了，若启用可隐藏数据点的显示（目前数据点默认显示）
|
|
|
|
|
//showSymbol: false,
|
|
|
|
|
// 设置数据系列的数据，对应每个时间点的车流量百分比数值
|
|
|
|
|
data: [90, 80, 70, 75, 70, 80, 75, 70, 60, 75, 60, 60, 70, 85, 90,],
|
|
|
|
|
areaStyle: {
|
|
|
|
|
// 设置区域填充的透明度，这里为0.8，使填充区域有一定的透明度效果
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
// 设置区域填充的颜色为线性渐变，从起始颜色到结束颜色渐变过渡
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
@ -138,34 +181,50 @@ onMounted(() => {
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
// 设置鼠标悬停时的聚焦方式，这里聚焦到整个数据系列
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
polyline: true,
|
|
|
|
|
// 以下这行代码被注释掉了，若启用可隐藏数据点的显示（目前未设置是否隐藏）
|
|
|
|
|
// showSymbol: false,
|
|
|
|
|
// 数据系列的名称，用于在图例等地方标识，这里是“流动光线”，可能用于展示一种特殊的线条效果
|
|
|
|
|
name: "流动光线",
|
|
|
|
|
// 设置数据系列类型为lines（用于绘制带特效的线条，如流动、闪烁等效果）
|
|
|
|
|
type: "lines",
|
|
|
|
|
// 设置坐标系为二维直角坐标系（cartesian2d），与前面的折线图共用同一个坐标系
|
|
|
|
|
coordinateSystem: "cartesian2d",
|
|
|
|
|
effect: {
|
|
|
|
|
delay: 100, // 延迟100ms开始流动
|
|
|
|
|
// 设置特效延迟100ms开始流动，使线条有一定的延迟出现效果
|
|
|
|
|
delay: 100,
|
|
|
|
|
// 设置流动线条的拖尾长度比例，这里为0.5，表示拖尾长度占线条总长度的一半
|
|
|
|
|
trailLength: 0.5,
|
|
|
|
|
// 设置特效是否显示，这里为true，显示流动光线特效
|
|
|
|
|
show: true,
|
|
|
|
|
// 设置特效的周期，即流动一次的时间间隔，这里为5，表示每5个单位时间流动一次（具体单位取决于图表的时间设置等情况）
|
|
|
|
|
period: 5,
|
|
|
|
|
// 设置特效中符号（如线条端点的图形等）的大小，这里为4
|
|
|
|
|
symbolSize: 4,
|
|
|
|
|
// 设置特效是否循环播放，这里为true，使流动光线效果一直循环
|
|
|
|
|
loop: true,
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
// 设置线条颜色，带有一定的透明度（alpha通道值为f0）
|
|
|
|
|
color: "#20db9df0",
|
|
|
|
|
// 设置线条宽度为0，可能结合其他样式或特效来实现特殊的视觉效果（目前单独看宽度为0可能看不到线条，需结合整体效果理解）
|
|
|
|
|
width: 0,
|
|
|
|
|
// 设置线条透明度为0，同样可能结合其他设置来实现特殊效果（目前单独看透明度为0看不到线条，需结合整体效果理解）
|
|
|
|
|
opacity: 0,
|
|
|
|
|
curveness: 0.3, // 设置曲率
|
|
|
|
|
// type: "curve", // 设置为曲线
|
|
|
|
|
|
|
|
|
|
// 设置线条的曲率，这里为0.3，使线条有一定的弯曲效果
|
|
|
|
|
curveness: 0.3,
|
|
|
|
|
// 以下这行代码被注释掉了，原本可设置线条类型为曲线（目前通过curveness已设置了一定的弯曲效果，未启用该设置）
|
|
|
|
|
// type: "curve",
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
// 设置线条的数据坐标点，每个坐标点是一个二维数组，对应x轴和y轴上的位置，这里的数据与车流量数据的时间点和数值相对应，用于展示与车流量相关的流动光线效果
|
|
|
|
|
coords: [[0, 90], [1, 80], [2, 70], [3, 75], [4, 70], [5, 80], [6, 75], [7, 70], [8, 60], [9, 75], [10, 60], [11, 60], [12, 70], [13, 85], [14, 90]],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
@ -173,283 +232,25 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
// 如果option配置选项有值（不为null或undefined），则将配置应用到折线图实例上，使其按照配置进行渲染显示
|
|
|
|
|
option && lineChart.setOption(option);
|
|
|
|
|
// 监听页面宽度改变事件
|
|
|
|
|
// 监听页面宽度改变事件，当页面宽度变化时调用handleResize函数来重新调整图表大小（目前handleResize函数被注释掉了，使用了下面的匿名函数方式来实现相同功能）
|
|
|
|
|
// window.addEventListener("resize", handleResize);
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
lineChart.resize();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 柱状图
|
|
|
|
|
// 柱状图相关配置和初始化
|
|
|
|
|
var chartDomBarChart = document.getElementById('barChart')!;
|
|
|
|
|
var barChart = echarts.init(chartDomBarChart);
|
|
|
|
|
|
|
|
|
|
// 柱状图数据
|
|
|
|
|
// 柱状图数据，这里定义了x轴的数据轴标签，是一系列文字（可能用于表示不同的车辆类型、统计类别等，具体含义需结合业务场景确定），以下代码使用了prettier-ignore注释来忽略代码格式化，保持原始的书写格式
|
|
|
|
|
// prettier-ignore
|
|
|
|
|
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
|
|
|
|
|
// prettier-ignore
|
|
|
|
|
|
|
|
|
|
// 定义柱状图每个柱子对应的数据，是一系列数值，代表不同类别对应的车流量等相关数据（具体含义需结合业务场景确定）
|
|
|
|
|
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
|
|
|
|
// 定义y轴的最大值，用于限制柱状图在y轴方向的显示范围，这里设置为500
|
|
|
|
|
let yMax = 500;
|
|
|
|
|
let dataShadow = [];
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
dataShadow.push(yMax);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: ' 🚀 车辆速度统计柱状图 ',
|
|
|
|
|
// left: 'center'
|
|
|
|
|
// subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
label: {
|
|
|
|
|
backgroundColor: 'rgb(0, 221, 255)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formatter: '{b}:<br/> 车流量：{c} %'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['车流量'],
|
|
|
|
|
bottom: 0
|
|
|
|
|
},
|
|
|
|
|
// 保存
|
|
|
|
|
toolbox: {
|
|
|
|
|
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: {
|
|
|
|
|
pixelRatio: 2, // 设置保存图像的像素比例，默认为1，可以提高清晰度
|
|
|
|
|
title: '下载', // 保存图像按钮的鼠标悬停标题
|
|
|
|
|
// icon: 'image://path/to/save-icon.png', // 自定义保存图像按钮的图标
|
|
|
|
|
name: '车流量折线图', // 指定保存图像时使用的文件名
|
|
|
|
|
// backgroundColor: 'transparent', // 保存的图像背景颜色，默认为透明
|
|
|
|
|
excludeComponents: ['toolbox'], // 排除不想保存的组件，默认不排除任何组件
|
|
|
|
|
show: true, // 是否显示保存图像按钮，默认为true
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// show: true, // 鼠标悬停按钮时是否高亮显示，默认为true
|
|
|
|
|
// iconStyle: {
|
|
|
|
|
// textPosition: 'bottom',
|
|
|
|
|
// color: '#000',
|
|
|
|
|
// borderColor: '#000',
|
|
|
|
|
// borderWidth: 1
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: dataAxis,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#999'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#999'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '5%',
|
|
|
|
|
right: '5%',
|
|
|
|
|
top: '20%',
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'inside'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '车流量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
showBackground: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgb(0, 221, 255)' },
|
|
|
|
|
// { offset: 0.5, color: 'rgb(0, 221, 255)' },
|
|
|
|
|
{ offset: 1, color: 'rgb(77, 119, 255)' }
|
|
|
|
|
// { offset: 0, color: 'rgb(6,190,179)' },
|
|
|
|
|
// // { offset: 0.5, color: 'rgb(0, 221, 255)' },
|
|
|
|
|
// { offset: 1, color: 'rgb(1,141,160)' }
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: '#2378f7' },
|
|
|
|
|
{ offset: 0.7, color: '#2378f7' },
|
|
|
|
|
{ offset: 1, color: '#83bff6' }
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: data
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Enable data zoom when user click bar.
|
|
|
|
|
const zoomSize = 6;
|
|
|
|
|
barChart.on('click', function (params) {
|
|
|
|
|
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
|
|
|
|
barChart.dispatchAction({
|
|
|
|
|
type: 'dataZoom',
|
|
|
|
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
|
|
|
|
endValue:
|
|
|
|
|
dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
option && barChart.setOption(option);
|
|
|
|
|
// 监听页面宽度改变事件
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
barChart.resize();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 饼状图
|
|
|
|
|
var chartDomPieChart = document.getElementById('pieChart')!;
|
|
|
|
|
var pieChart = echarts.init(chartDomPieChart);
|
|
|
|
|
|
|
|
|
|
option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: ' 🚀 车辆类型统计图',
|
|
|
|
|
// subtext: 'Fake Data',
|
|
|
|
|
// left: 'center'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{b}:<br/> 车流量：{c} %'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
bottom: 10,
|
|
|
|
|
left: 'center',
|
|
|
|
|
data: ['私家车', '面包车', '大客车', '大卡车']
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: '65%',
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
selectedMode: 'single',
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: 434, name: '大卡车', itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgb(89,253,193)' },
|
|
|
|
|
{ offset: 1, color: 'rgb(48,214,231)' }
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 1548, name: '私家车',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgb(37,210,234)' },
|
|
|
|
|
{ offset: 1, color: 'rgb(8,209,255)' }
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 735, name: '面包车',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgb(148,107,244)' },
|
|
|
|
|
{ offset: 1, color: 'rgb(151,162,247)' }
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 510, name: '大客车',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgb(61,185,249)' },
|
|
|
|
|
{ offset: 1, color: 'rgb(98,106,241)' }
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.02)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
option && pieChart.setOption(option);
|
|
|
|
|
// 监听页面宽度改变事件
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
pieChart.resize();
|
|
|
|
|
});
|
|
|
|
|
// 雷达图
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
// function handleResize() {
|
|
|
|
|
// var chartDom = document.getElementById('showorders')!;
|
|
|
|
|
// var myChart = echarts.init(chartDom);
|
|
|
|
|
// myChart.resize();
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.my-chart {
|
|
|
|
|
width: 80%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
margin-top: 10vh;
|
|
|
|
|
margin-bottom: 10vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-row {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-row:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-col {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartCard {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
min-height: 36px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
/* box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.04); */
|
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
|
border: 1px solid rgba(181, 233, 248, 0.878);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chartCard:hover {
|
|
|
|
|
transform: translateY(-0.5px);
|
|
|
|
|
box-shadow: 0 0 20px rgba(23, 196, 185, 0.2);
|
|
|
|
|
border: 1px solid rgba(40, 189, 230, 0.878);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
// 创建一个数组dataShadow，用于存储每个柱子对应的阴影数据（
|
daquan
p9tnomuae