展示屏 云图大数据展示 vue+echarts5
作者：互联网
一.先上效果图 （点击进入演示网址）
二.展示效果说明 ：
1.点击 当日 当季 当年 切换时间数据
2.点击地图任意地区可切换 地区数据
3 . 地图轮播 ， 左右两边数据表跟着地图地区刷新
4 . 点击 地图任意地区 ，高亮显示 ，停止轮播 ，若干时间无人操作 ，继续轮播
三 .代码过程
页面布局概况 ：
整个界面分为左 中 右 三个组件模块 ， 其中左边需要 放置按钮 ，控制全局接口 分当日/当季/当年 不同状态 ，所以放在了HomeLeft 外面 ，与其他组件平级 ， 点击按钮 ，父组件给子组件传递状态参数（dataFor）
详细过程：
1.创建vue项目
2. 引入echarts 5
装包 yarn add echarts npm install echarts
在需要使用Echarts 的界面中 导入
3.左边组件的布局 （右边类似） <div id="echarts-01" class="Echart"></div> 这是一个echarts盒子 ，放置canvas图表
4.项目中折线图 ， 饼图 ， 柱状图都是 这三步就完成了引入 其中 第二步的option配置 可去echarts官网上查看实例 ，并修改 拿到代码CV即可 ， 注意：myEcharts_01方法在mounted中执行
.
5.再图标显示成功后 主要的就是图标的option配置了 其中一些配置在实例上并无体现，需要自己去查官网文档 （只显示一些主要的修改 类比官网实例）
左 1 折线图主要配置 ：
折线图 有两种 并覆盖颜色 ； echarts图y轴显示不全 ； canvas图上下调整 ； echarts y轴显示特定数据 ； 折线图不留白 ，左右显示完全（解决方法请看图 例）
左2 ， 饼图主要配置 ：
左3：柱状图主要配置 ：
echarts x 轴字体太长显示不完全 ； 设置柱状图颜色渐变 ；设置柱状的宽度 ，数据太少 ，柱不美观（解决方法请看图 例）
6 .echarts 地理地图的创建 ，以及设置地域轮播 ，样式设置
官网有案例
地图JSON 接口 dataV 有提供 但需要money
点击下载你需要的地图JSON 数据 然后创建json文件 引入到你的页面中
第一步 ： 完成 echarts 的引入 本地某个市级地图的引入
第二步 ：把官网option ， CV到你的页面中 ，并做修改
设置自动轮播：
点击地区 后 停止轮播 ，过一段时间后 重新轮播
就介绍到这吧 ， 有什么问题 、想法，可以留言 我再往上面加内容
标签：vue,轮播,展示,地图,点击,echarts5,折线图,官网,echarts 来源： https://blog.csdn.net/qq_30071431/article/details/112389782