效果图
大屏可视化配置
运行环境：VScode
一、可视化适配
大屏下显示一般都是16:9尺寸 1920*1080 ，做适配也就是在这个比例的基础上进行的
1、打开VScode，新建一个文件夹，任意命一个名称，例如：bigscreen。
2、右键【bigscrean】文件夹，选择【在集成终端中打开】，页面下方弹出终端窗口。
3、在终端输入【vue create big-screan】 ,即创建一个名为big-screan的文件夹。
vue create big-screan
4、输入cd .\big-screan\ 后，回车。
cd .\big-screan\
再输入npm i lib-flexible 然后回车。
npm i lib-flexible
文件目录自动生成一系列文件。介绍一下生成的Vue的文件结构
5、打开文件目录中的【node_modules】文件夹；然后，找到小L开头的【lib-flexible】文件夹并打开，再打开【flexible.js】文件夹
【设置适配】修改flexible.js文件里的源码
修改第71行、72行、74行代码，源代码文件lefxible设计稿默认按540计算，这里我们需要把设计稿宽度改成 1920。
改之前
改之后
开发的时候使用单位：rem，即可；切记 1rem = 80px哦（1920 / 24 == 80px），其它源码部分 千万不要乱修改哦。
6、配置插件
①点击1处， ②在2处搜索【px to rem & rpx & vw(cssrem)】 ③点击插件右下角的安装(下图圈③处)
安装完插件后，插件右下角会有一个圆形齿轮，点击【齿轮】——>点击【Extension Settings扩展设置】
鼠标向下滑动找到Cssrem:Root Font Size选项,将值改成80（如下图）
7、vue中使用echarts
右键点击【big-screan】文件夹，点击【在集成终端中打开】；
在终端下载echarts，在终端输入npm i echarts，并按回车。
npm i echarts
二、源文件
想拿到源文件直接运行，请移步至gzh【李桥桉】，s❤【可视化】。
首先按照上文配置好环境。
建议拿到源文件后。直接把以下框起来的几个文件，替换掉你按照上文配置过程中，系统自动生成的对应的文件。
对比下图框里的文件，把你那里没有的文件复制进去，已有的就直接替换掉。
三、运行
右键点击【big-screan】文件夹，点击【在集成终端中打开】；
在终端输入nmp run serve运行项目，并按回车。
nmp run serve
等待加载结束，会生成如下两个蓝色地址，单击并按住Ctrl键，即可打开项目。
运行调试相关文章 [请查看此文《vue运行方式》](https://blog.csdn.net/wodegeCSDN/article/details/131187765?spm=1001.2014.3001.5501)
想拿到源文件直接运行，扫描下方二维码，关注公主号【李桥桉】，后台私信【可视化】即可获取。
附：常见的echarts，可任意替换本项目中的echarts图
更改TestView.vue中的echart表格代码，可以更改任意图表，下面是一些其他图的代码
```css
折线图
option = {
xAxis: { // echarts配置x轴
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x轴显示数据
},
yAxis: { // y轴配置
type: 'value'
},
series: [ // 配置数据
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line' // 数据的显示方式 line折线
}
]
};
```
```css
柱形图
{
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["张三", "李四", "王五", "赵六", "田七", "孙八", "钱九"],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "成交量",
type: "bar",
barWidth: "60%",
data: [10, 52, 20, 33, 39, 33, 22],
},
],
}
```
```css
饼图
{
legend: {
top: "bottom",
textStyle: {
color: "#fff",
},
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [20, 150],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 40, name: "成华区" },
{ value: 38, name: "金牛区" },
{ value: 32, name: "武侯区" },
{ value: 30, name: "青羊区" },
{ value: 28, name: "双流区" },
{ value: 26, name: "锦江区" },
],
},
],
}
```
echarts关键属性
title 配置标题
legend 图示配置
textStyle 对象是配置颜色的
xAxis 折线图配置x轴
yAxis 折线图配置y轴
tooltip 鼠标悬停 显示图表信息
series 数据信息
color 图标颜色
