echarts 折线图 设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图,搭建数据可视化系统...

8c3a4d7b1cd91c89e04e7af44d7a1637.png

作者丨夙言

来源丨前端大牛爱好者(Web-2017)

https://segmentfault.com/a/1190000018993981

本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人可一步步来阅读。

1、 前言

1.1 业务场景

突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图,类似于数据可视化的方式。本人之前从未接触过Echarts,然后需要2周拿出成果,有点慌😂😂

1.2 业务分析

拿到需求看了一下。支持用户名、密码登录,默认显示一个维度数据,然后点击可钻取进入第二维度数据,再点击进入第三维度数据展示。大致估摸着。。。
  1. 系统搭建vue-cli
  2. vuex记录登录信息
  3. vue-router路由跳转
  4. 3个维度的页面,提取出共用的组件
  5. 各个组件开发
  6. 调节样式,增加UI
  7. 加入后台接口数据
  8. 优化显示
  9. 测试
  10. 上线
当然这不是要2周内,全做完。应该是完成步骤6。相对于公司就我一个前端,没接触过Echarts,有问题都没人讨论的情况下。。。心里还是忍不住想吐槽一下😒😒😒

1.3 效果展示

这里列出了第一维度页面的样式。文字请无视,哈哈。5164dcd0029c3b0e538102706b05ce84.png

2 、系统安装

吐槽归吐槽,活还是要干的。😎因为本人最熟悉的还是vue,所以还是选择了用vue全家桶来做。这部分可参考 vue build

2.1 安装node环境

  • 下载安装node环境,直接去官网下载即可 node.js
安装完后可在命令行运行node -vnpm -v查看是否安装成功以及版本

2.2 安装Vue项目

2.2.1 安装vue

官方文档:vuejs这里我们使用npm的方式
  • npm i vue

2.2.2 安装Vue CLI

官方文档:vue CLI
  • npm i -g @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以用这个命令来查看其版本。vue -V

2.2.3 创建项目

这里安装的时候,注意将我们要使用的安装上。vuexvue-router,其他可根据需要添加。
  1. 方法一
  • vue create hello-world
这里参照官方网站,有很详细的介绍。参照:vue create
  1. 方法二
使用图形化界面
  • vue ui
界面含中文,很好操作。参照:vue ui

2.2.4 安装插件

  1. 方法一
最直接也是推荐的 npm i xxx这里介绍一下 -S -D -g的区别
  • npm i -S xxx 文件写入dependencies,用于工程中开发时使用到的插件,会发布到生产环境如UI,JS等。
  • npm i -D xxx 文件写入devDependencies,用于工程支持类插件,不会发布到生产环境,如gulp等压缩打包工具。
  • npm i -g xxx 全局安装,如vue、ncu等。安装目录为:C:Users用户AppDataRoamingnpm
  1. 方法二
vue ui图像化界面中包含了若干插件,可点击安装,但不一定是最新版本。同时会在hello中引入。其他和方法一没区别。

2.3 安装Echarts

这里我们为了方便,使用了npm全量引用,后期为了精简项目可单个引用。
  • npm i echarts -S
然后在main.js中添加db8b859434e6ec0abe5eaa936cfb9913.png这里建议提前自定义echarts的样式,并引入到项目中。官方自定义地址:theme-builder在页面中我们可以如下引用:var myChart = this.$echarts.init(document.getElementById("myid"),'temp')myid是我们要展示的echartsidtemp是我们的自定义的样式,同时官方提供了几个样式例子,可以node_modules\echarts\theme中找到。

2.4 安装element-ui

这里我们为了方便,使用了npm全量引用,后期为了精简项目可单个引用。
  • npm i element-ui -S
然后在main.js中添加3365c4499db18b88a4e5bb9987fda362.png

2.5 安装百度地图

一般vue使用百度地图有2种方式,
  • 一种是像官网那样去应用。如:BMap
  • 第二种是使用 vue-baidu-map
不管是哪一种都要去申请账号和密钥。申请地址为:百度地图密钥(ak)这里我使用了第二种。vue-baidu-map文档
  • npm i vue-baidu-map -S
然后在main.js中添加。d6cf090e5bf03be7e0a494b32a712486.pngxxxxxxxx这里填写自己申请的密钥。在页面中,参照文档,可使用标签来调用。

2.6 初始化样式

css样式初始化,简单来说就是为了各个浏览器能统一什么的。这里我使用的是 normalize.css下载下来后,在main.js中添加396b7d3c64ae0e333322ea932b60a2ca.png基本上的准备工作都做好了,接下来就是具体的代码了。

3 、项目搭建

3.1 router、vuex

我这里新建了一个router.jsstore.js,大致如下:f559852e4d7b771c7d2098c4dbe816a5.png哦哈,这里路由定义是为了方便看哈,具体还是根据业务来定义。这里的router.beforeEach路由卫士用于是否登录校验。然后我们在main.js中来引用。e7a00d9a7aa64c7bfb143e46f492b2ab.png更多请参考官方文档:Vue Router Vuex

3.2 Login页面

登录页面没啥,就是个form提交,由于路由中判断user.id。所以我们储存一下,然后跳转到Index页面就行。这里只是一种方式,也可以使用CookieSession

3.3 Index页面

分析页面分成了2个大部分
  • 第一部分是 头部
  • 第二部门是 主体
a335ad59d99ab55c2fbc7f51de5c55e9.png我们将头部当做一个组件进行复用。组件的复用可参考官方文档:https://cn.vuejs.org/v2/guide...

3.4 header页面

头部比较简单,除了一些显示外,还有一个显示当前时间。这里我们使用了setInterval,每隔1秒去获取一下当前时间赋值给你定义的v-model就行。同时在离开页面时,我们清理掉定时器。这里需要我们对Vue的生命周期有一定的了解。获取当前时间的方法可参考:data-module.js

3.5 主体页面

这里分析一下页面,主要分成了3块。
  1. 左边,包含了2个折线图。
  2. 中间,包含了数字和地图。
  3. 右边,包含了柱状图和表格。
接下来主要介绍一下,自己这2周摸索出来的一些Echarts配置,适合新手,大佬轻喷。这里需要经常翻阅 Echarts配置项 和 API 了

3.5.1 Echarts基本

这里列出基本的渲染写法,具体的图形和数据只要修改option就可以了。
    
export default { mounted(){ this.drawECharts() }, methods:{ drawECharts(){ // temp 是我们的自定义样式,上面安装Echarts时有介绍 var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp') var option = {} option = { // 吧啦吧啦 一堆配置 } // 执行渲染图形和数据的操作 if (option && typeof option === "object") { myChart.setOption(option, true) } } } } // 一定要设置大小,不然不出来,这玩意和canvas一样 .myecharts{ width : 500px; height : 300px; }
3.5.2 线形图
多多实践,就会发现每个配置和其参数的作用了。
option = {    // 提示框(就是鼠标放上去后出现的框)    tooltip : {        trigger: 'axis',        axisPointer: {            type: 'cross',            label: {                backgroundColor: '#6a7985'            }        }    },    //  右上角的组件,用于说明,也可进行点击筛选    legend: {        align : 'right',        x : 'right',        top : 25,        selectedMode : 'single',    //  我这里设置的单选模式        data:['好','坏']            //  显示的第一项和第二项,这里的颜色是根据自定义主题的颜色顺序来定的    },    //  x、y轴显示一些设置,比如刻度颜色显示什么的,可在自定义主题设置一部分    xAxis: {        type: 'category',        boundaryGap: false,        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    // 具体配置项,根据具体项目查看官网配置项说明    series: [        {            name : '好',            data: [150, 132, 201, 534, 290, 530, 820],            type: 'line',            smooth: true,   //  是否平滑曲线            areaStyle: {},        },        {             name : '坏',            data: [82, 93, 90, 93, 129, 333, 432],            type: 'line',            smooth: true,            areaStyle: {},        }    ]}// 查看Echarts的API,我们需要显示默认的一些数据,配置如下// 默认显示坏的数据myChart.dispatchAction({    type: 'legendSelect',    name: '坏',})//  默认显示第7个数据myChart.dispatchAction({    type: 'showTip',    seriesIndex: 1,    dataIndex: 6,})
预览:3800629b18953acea180fe7f4910ef50.png

3.5.3 柱状图

这里我们直接用双柱状图来演示。因为名字和数字需要提示和点击的功能,所以没有使用echartsy轴。不然formatter又要写一堆,虽然用了自定义的,但最开始是用的formatter。可以实现相同展示,但无法操作,如鼠标提示和鼠标点击。
名称:{{it.name}}
个数:{{it.num}}
{{ it.name.substring(0,4)+'...' }}
{{ it.num }}
名称:{{it.name}}
个数:{{it.num}}
{{ it.name.substring(0,4)+'...' }}
{{ it.num }}
css这里就不贴了,效果就是这2行文字刚好贴在2行柱状图前面。接下来是echarts配置。
option = { // 鼠标提示框 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // 右边显示 legend: { selectedMode:false, data: ['好', '坏'], top:5, right:8, }, // 两个图坐标的位置 grid: [ {left: '16%', top:'10%', width: '22%', height: '86%'}, {left: '65%', top:'10%', width: '22%', height: '86%'} ], // 两个图x轴的设置,这里的gridIndex就是个序号,用于区分 xAxis: [ {gridIndex : 0, show : false}, {gridIndex : 1, show : false}, ], // 两个图y轴的设置,注释的部分是用echarts本身的y轴来显示名称和数量的 yAxis: [ { gridIndex: 0, type: 'category', show : false, data : ['广东/12','杭州/13','北京北京/14','天津/16'], // axisLabel: { // formatter : function(value){ // let arr = value.split('/') // return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}'; // }, // rich: { // a: { // color : '#ffffff', // lineHeight : 19, // fontSize : 14, // align: 'right', // }, // b:{ // fontSize : 18, // lineHeight : 19, // fontWeight : 'bold', // align: 'right', // fontFamily : 'Digital', // } // } // } }, { gridIndex: 1, show : false, type: 'category', data : ['海南/12','三亚/13','哈尔滨/14','西双版纳/16'], // axisLabel: { // formatter : function(value){ // let arr = value.split('/') // return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}'; // }, // rich: { // a: { // color : '#ffffff', // lineHeight : 19, // fontSize : 14, // align: 'right', // }, // b:{ // fontSize : 18, // lineHeight : 19, // fontWeight : 'bold', // align: 'right', // fontFamily : 'Digital', // } // } // } }, ], // 渲染图形和数据,bar是柱状图 // barWidth 柱状的宽度 // 两类两套,所以有4组数据,使用xAxisIndex、yAxisIndex来区分。 series: [ { name: '好', type: 'bar', barWidth : 5, barMinHeight : 5, barGap : '100%', xAxisIndex: 0, yAxisIndex: 0, data: [0, 3489, 9022234, 922228], label: { normal: { position: 'right', show: true } }, }, { name: '坏', type: 'bar', barWidth : 5, barMinHeight : 5, xAxisIndex: 0, yAxisIndex: 0, data: [0, 2438, 3300, 1594], label: { normal: { position: 'right', show: true } }, }, { name: '好', type: 'bar', barWidth : 5, barMinHeight : 10, barGap : '100%', xAxisIndex: 1, yAxisIndex: 1, data: [8203, 3489, 9034, 222], label: { normal: { position: 'right', show: true } }, }, { name: '坏', type: 'bar', barWidth : 5, barMinHeight : 5, xAxisIndex: 1, yAxisIndex: 1, data: [445, 2438, 3300, 555], label: { normal: { position: 'right', show: true } }, }, ]}
预览:898ec29ee10cb9fb0bec393020056120.png

3.5.4 表格

table我这里使用了element-ui加上修改 UI 默认css 和 滚动条的 css。这里列出一项,其他写法相似。
 :data="tableData"  style="min-width: 100%;">  prop="date" min- header-align="center" label="时间">    
{{scope.row.date}}
{{ scope.row.date }}
UI 样式UI css的修改,这里我使用了自定义字体哦,完全copy是不起作用的。其他的设置项不做说明,F12打开,随便玩。
.el-table thead { color: #FFFFFF;}.el-table { color: #00A5F6; font-family: 'Regular'; background-color: rgba(0, 0, 0, 0.03); th { padding: 2px 0; background-color: #003260;  } th.is-leaf { border-bottom: 0px solid #EBEEF5; } tr { background-color: rgba(0, 0, 0, 0.03); } td { border-bottom: 1px solid #2c3547; padding: 2px 0; } .el-table::before { height: 0px; z-index: 0; background-color: #2c3547; }}
滚动条的样式随意改变看看效果就懂了,谷歌浏览器 😅
/* scrollbar */::-webkit-scrollbar { width: 8px; height: 1px; background-color:transparent;}::-webkit-scrollbar-thumb { border-radius: 10px; background: #adabab;}::-webkit-scrollbar-track { border-radius: 10px; background:#394d63;}
预览:2813579961a1441344df6098bcf5615a.png

3.5.5 百度地图

vue-baidu-map 文档
 :center="map.center" // 地图中心经纬 {lng: 114.023598, lat: 33.589299} :scroll-wheel-zoom="true" // 地图是否滚轮缩放 :zoom="map.zoom" // 默认地图尺寸 :mapStyle="mapStyle" // 地图样式 > // 地图宽高 // 标点  :key="it.id" :position="it.position" // 标点位置 @click="markclick(it,index)" // 标点点击事件 @mouseover="markover(it,index)" // 鼠标移动到标点上的事件 :icon="it.if? iocn:newincon" // 标点的样式 @mouseout="markout(it,index)"> // 鼠标从标点移走的事件  :show="it.show" // 标点提示框的显示true/false :position="it.position"> // 提示框坐标    
预览:a6d81a1b1a9f96ed9926600c43d0c958.png

3.5.6 矢量地图

Echarts矢量地图的类型有type:'scatter' 散点气泡图,可在地图中显示不用颜色程度的点type:'effectScatter' 有涟漪特效动画的散点图type:'map' 地理区域的数据可视化type:'lines' 地图航线、路线的可视化引入地图
require('echarts/map/js/china.js')require('echarts/map/js/province/beijing.js')
这里我有问题,我要引入全国的省份,就要多写30多个require,有没有大佬能给出更好的办法?找到一个全量引用的方法
const rjs = require.context('echarts/map/js/province')rjs.keys().forEach(rjs)
可以替代
require('echarts/map/js/province/beijing.js')require('echarts/map/js/province/shanxi.js')require('echarts/map/js/province/neimenggu.js')等等等。。。
地图配置:
option = { // 鼠标提示 tooltip : { trigger: 'item', formatter : function(params){ var val = params.data return '名称:'+val.name+',个数:'+val.value[2]+'
'+'总数:'+val.tol+',个数:'+val.un
}, }, // 不同颜色的点 visualMap: [ { min: 0, max: 1, show : false, inRange: { color: ['#01cae2', '#e63136',] }, dimension : 3, }, ], // 地图样式 geo: { map: 'china', // 地图样式,当为‘北京’时,会显示北京地图 roam : true, label: { emphasis: { show: true } }, zoom : 1.2, // 初始大小 scaleLimit : { min : 1.2, // 最小缩放 max : 6 // 最大缩放 }, regions : regions(data) // 省份样式方法 }, series : [ { name: '分布', type: 'scatter', coordinateSystem: 'geo', // 地图配置 data: convertData(data.sort(function (a, b) { // 数据方法 return b.value - a.value; })), encode: { value : 2 }, hoverAnimation: true, itemStyle: { normal: { // color: '#FF3030', shadowBlur: 1, } }, } ]};
当点击省份地图时,我们可以进入省份地图的矢量图
myChart.on('click',function(params){ option.geo.map = '北京' myChart.setOption(option, true);})
预览:f8b25337cbc2866b6aed6aa03381a58e.pngde979786a4d16e4658c5be245a5f864f.png

4 、后记

目前还没有接入后端数据,就是全前台的一个展示。很多都是全量引入,后续待成熟后,可慢慢精简。总结一下:Vue入门 + Echarts入门 ,希望能对你有用!!!😜😜😜感谢支持。若不足之处,欢迎大家指出,共勉。如果觉得不错,记得 点赞,谢谢大家 😂

3d5005f837844ec660f4bc3dee040703.png

近期精彩内容推荐:  

7bf99d3780dd277a909e9c254779c916.png 太真实了!有个程序员男友原来是这样的!

7bf99d3780dd277a909e9c254779c916.png 终于有人把 HTTPS 原理讲清楚了!

7bf99d3780dd277a909e9c254779c916.png 你真的会用 Postman 吗?

7bf99d3780dd277a909e9c254779c916.png Swift 5.3 路线图

596f2aa91459d21232f5a98169de380c.png

51a982f0210a67c27e681ff70359d087.png

在看点这里089af33596cd2ccf9f8bd4154193b975.gif好文分享给更多人↓↓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/446310.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

密码学专题 文本数据库

应用概述 文本数据库是跟OpenSSL的CA应用程序紧密结合在一起的,它以文本的方式记录CA已经签发的证书的状态和摘要信息。这些状态信息可以用于跟证书库相关的一些操作,比如使用ca指令生成CRL主要就是读取这个文本数据库的信息作为参考。文本数据库就是普…

Python学习13 异常处理机制

概括 常见的异常 异常处理机制 可以多个异常放在元组里面 一旦产生异常,try后面的语句不会继续执行,会做异常处理 异常使用场景1 close应该放在finally中 异常使用场景2 finally关键字 会执行except后面的,报错

java 布隆过滤器_牛逼哄哄的布隆过滤器,到底有什么用?

Java技术栈www.javastack.cn打开网站看更多优质文章作者:CodeBear的园子www.cnblogs.com/CodeBear/p/10911177.html本文是站在小白的角度去讨论布隆过滤器,如果你是科班出身,或者比较聪明,又或者真正想完全搞懂布隆过滤器的可以移…

Java web后端6 java Bean EL表达式

EL表达式和JSTL概述 java Bean规范 java中成员变量使用类Integer private Integer count; java Bean的创建 创建java Bean: BookTest.java package com.example.elandjstl.bean;public class BookTest {//java中成员变量使用类Integerprivate Integer count;private Boolean…

python根须系统斜杠_深入浅出Python中的os模块

「Author:Runsen」当初学Python的时候,把一些标准库和第三方开源库学的七零八落,不成系统,正好趁这个机会来系统的整理一下,先从Python常用的标准库os开始吧。osOS模块简单的来说它是一个Python的系统编程的操作模块&a…

Java web后端7JSTL

概括 下载jstl的jar包 官网&#xff1a;https://mvnrepository.com/ 网址1&#xff1a;https://search.maven.org/ 在pomxml中插入依赖&#xff1a; <dependency><groupId>taglibs</groupId><artifactId>standard</artifactId><version>1…

Python学习14 模块和包

模块 公共类、函数都可以放在独立的文件中&#xff0c;这样其他多个程序都可以使用&#xff0c;而不必把这些公共性的类、函数等在每个程序中复制一份&#xff0c;这样独立的文件就叫做模块&#xff0c;它们的扩展名为.py 标准库中的模块 使用help查看模块 代码&#xff1a; …

python语句分为_python以什么划分语句块

语句块是在条件为真&#xff08;条件语句&#xff09;时执行或者执行多次&#xff08;循环语句&#xff09;的一组语句&#xff1b;在代码前放置空格来缩进语句即可创建语句块&#xff0c;语句块中的每行必须是同样的缩进量&#xff1b;&#xff08;推荐学习&#xff1a;Python…

Python学习15 正则表达式1

网址 正则表达式测试网址&#xff1a;https://regex101.com/ 概述 正则表达式&#xff1a; 正则表达式(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"…

STL源码剖析 空间配置器 查漏补缺

ptrdiff_t含义 减去两个指针的结果的带符号整数类型ptrdiff_t (Type support) - C 中文开发手册 - 开发者手册 - 云社区 - 腾讯云 std::set_new_handler&#xff08;&#xff09;函数的理解 关于set_new_handler的理解_wck0617-CSDN博客new分配内存的时候 如果分配的空间不…

Python学习16 正则表达式2 re模块

re 模块 re 模块&#xff1a; Python的 re 模块实现了正则表达式处理的功能。 导入re模块后&#xff0c;使用findall、search函数可以进行匹配 查找&#xff1a;match和search 多个匹配上的&#xff0c;也只会返回第一个匹配上的 re.match()&#xff1a; 需要特别注意的是&…

STL源码剖析 内存基本处理工具 初始化空间的五个函数

初始化空间的五个函数构造函数 construct()析构函数 destroy()剩余三个底层函数 和 高层函数之间的对应关系如下uninitialized_copy() 对应 copy()uninitialized_fill() 对应 fill()uninitialized_fill_n() 对应 fill_n()使用<memory>使用上述三个底层函数 uninitiali…

单基因gsea_筛到5分的核心基因以后你可以怎么做?

这一次我们从一些已经发表的文章拆解&#xff0c;我们来看看&#xff0c;你找到了一个核心基因以后&#xff0c;你可以怎么做呢&#xff1f;我们就不说那么多废话了&#xff0c;直接用几篇文章的解读来带着大家领会一下如何去进行下一步的分析。Case1&#xff1a;预后标志物免疫…

STL源码剖析 迭代器的概念和traits编程技法

迭代器&#xff1a;依序巡防某个聚合物(容器)所含的各个元素&#xff0c;但是不需要暴露这个聚合物的内部表述方式核心思想&#xff1a;将容器和算法分开&#xff0c;彼此独立设计容器和算法的泛型化&#xff0c;均可以使用模板&#xff0c;使用迭代器连接容器和算法例子 templ…

STL源码剖析 5中迭代器型别

最常使用的5种迭代器的型别 为 value_type、difference_type、pointer、reference、iterator_category。如果想要自己开发的容器和STL进行适配&#xff0c;就需要定义上述5种类型 iteraor_traits 必须针对传入的型别为 pointer 或者 pointer-to-const设计偏特化版本 template &…

加载tf模型 正确率很低_深度学习模型训练全流程!

↑↑↑关注后"星标"Datawhale每日干货 & 每月组队学习&#xff0c;不错过Datawhale干货 作者&#xff1a;黄星源、奉现&#xff0c;Datawhale优秀学习者本文从构建数据验证集、模型训练、模型加载和模型调参四个部分对深度学习中模型训练的全流程进行讲解。一个成…

Python学习17 Turtle库绘图

学习网址&#xff1a;https://docs.python.org/zh-cn/3/library/turtle.html Turtle库 Turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff08;画布中心&#xff09;&#xff0c;(0,0)位置开…

android ros 节点编写_嵌入式的我们为什么要学ROS

前言本来是要写一篇STM32移植ROS的一个小lib库&#xff0c;ROS一般都是需要跑在Linux上的&#xff0c;STM32使用就是当成一个ROS通讯的小节点&#xff0c;但是写文章时间不够&#xff0c;所以就简单做一篇ROS的介绍文章&#xff0c;分享给嵌入式的小伙伴们。ROS现在在机器人领域…

STL源码剖析 __type_traits

traits编程 弥补了C本身的不足STL只对迭代器进行规范制定出了iterator_traits&#xff0c;SGI在此基础上进一步扩展&#xff0c;产生了__type_traits双下划线的含义是这个是SGI内部使用的东西&#xff0c;不属于STL标准iterator_traits 负责萃取迭代器的特性__type_traits负责萃…

STL源码剖析 序列式容器|Vector

容器的概观和分类 array 数组 、list 链表、tree树 、stack堆栈、queue队列、hash table散列表、set集合、map映射表根据数据在容器中的排列顺序&#xff0c;将上述数据结构分为序列式和关联式两种类型SGI STL使用内缩方式来表达基层和衍生层之间的关系衍生不是派生&#xff0…