Vue3+vite+Echarts案例大屏可视化--千峰（推荐）
https://www.bilibili.com/video/BV14u411D7qK?p=33&spm_id_from=pageDriver&vd_source=e2cfe74d93fb5b3f60bd7487ede60218
主题展示
Vue3.2中
<template> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3中 id=‘’ 变更 ref=--> <div ref="chart" style="width:100%;height:200px;"></div> </template> <script setup > import {onMounted, reactive, ref} from "vue"; // 局部引入echarts核心模块 import * as echarts from 'echarts' // const props = defineProps({ // 宏接收：父传参 // 结构优化 const {chartType,chartData}= defineProps({ // 宏接收：父传参 chartType:{ type: String }, chartData: { type: Array } }) const chart =ref(); // 创建DOM引用 // 第二种方法：初始化方法 const option = reactive({ // 指定图表的配置项和数据 title: { // 标题 // left: 'center', // 居中 text: 'ECharts 入门示例', left: 'center', textStyle: { color: '#f60', fontSize: 20, } }, color: '#f00', // 系列柱的颜色 tooltip: {}, // 提示 legend: { // 图例 data: ['销量'], top: '5%', left: 'right', textStyle: { // 文字样式 color: '#f68', } }, xAxis: { // x轴 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], axisLine: { // 设置轴 lineStyle: { // 样式 color:'#000' // 颜色 } }, axisLabel:{ interval: 0, formatter: value => value.split('').join('\n') //报红：取消lang='ts' } }, yAxis: { // y轴 axisLine: { // 设置轴 lineStyle: { // 样式 color:'#000' // 颜色 } }, axisLabel:{ // formatter: '{value} 件' formatter: function(value,index){ // 报红：取消lang='ts' return value %2 == 0 ? value + '件' : value // 可写各种逻辑判断： 奇偶数 } } }, series: [ // data数据 { name: '销量', // type: 'bar', // 图样类型 // type: props.chartType, // 父传参：自定义 type:chartType, // 结构优化 // data: [5, 20, 36, 10, 10, 20], // 图标数据 // data: props.chartData, data: chartData, label: { show: true, position: 'top' }, } ] }) // 使用生命钩子 onMounted(() => { // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // init(); // vue3.2没有this // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() }) }) </script> <style scoped> </style>
自定义主题
在About.vue组件中引用assets/index.js文件
地图展示
Json.api地址拷贝后，浏览器地址栏打开
数据拷贝文档中起名 XXX.js
1.引用XXX.js地图数据
import {XXX} from "../assets/XXX.js"
// 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入地图文件 import chinaMap from '../../assets/china1.json'
2.注册地图：Vue3.2
// 使用生命钩子 onMounted(() => { // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 注册可用的地图 echarts.registerMap('china',chinaMap); // init(); // vue3.2没有this // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
3.地图中的设定
如何获取地图经纬度：百度地图开放平台
map.baidu.com
点击后右上方
const option = reactive({// 指定图表的配置项和数据 geo: { // 地理坐标组件 type:"map", map: "china", roam:true, // 地图可拖拽、平移 zoom: 5, // 缩放大小 center: [116.387803,39.940361], // 地图中心点：经纬度 },
省份地图展示和优化
1.阿里云DataV.GeoAtlas地理小工具系列 (aliyun.com)，获取地图省份信息
2.特效展示
option中 geo 和 series 功能相同，需注意处理：注意:echarts绘制地图提示框不出现。echarts绘制地图有两种方式，一种是geo对象，一种是series数组，geo对象生成的地图没有提示框，只有series数组生成的地图有提示框
地图标记设置与效果
option中series:常用重要属性设置
series: [{ // 地图不需XY轴
type: 'map', // 图表类型:散点图scatter：用到坐标系设置
map: 'china', // 地图类型
roam: true, // 地图可拖拽、平移
data: mapData, // 使用动态Api接口文档数据
/*[ // 展示数据项的名字，经纬度，数据量
{name:'河南省',value:32300,4000},
{name: '山东省',value: 21203},
{name: '四川省',value: 41203},
{name: '青海省',value: 31203},
],*/
coordinateSystem: "geo", // 当前坐标系设置：经纬度定位
完整代码
<template> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3中 id=‘’ 变更 ref=--> <div ref="chart" style="width:650px;height:650px;"></div> </template> <script setup > import {onMounted, reactive, ref} from "vue"; // 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入地图文件 import chinaMap from '../../assets/china1.json' // 引入动态数据axios,二次封装 import axios from "../../http/request"; // const mapData = await fetch(`/api/post/1`).then(r => r.json()) // 根据接口文档：实际参数获取数据 const mapData = await axios.get('student_location').then(res => res.data.result) const chart =ref(); // 创建DOM引用 // 第二种方法：初始化方法 const option = reactive({// 指定图表的配置项和数据 geo: { // 地理坐标组件，series type:"map", map: "china", roam:true, // 地图可拖拽、平移 zoom: 5, // 缩放大小 center: [116.387803,39.940361], // 地图中心点：经纬度 label: { show: true, // // 标签：地图中的标签、文字 color: "" } }, // option中 geo 和 series 功能相同， // 需注意处理：注意:echarts绘制地图提示框不出现。 // echarts绘制地图有两种方式，一种是geo对象，一种是series数组， // geo对象生成的地图没有提示框，只有series数组生成的地图有提示框 series: [{ // 地图不需XY轴 type: 'map', // 图表类型:散点图scatter：用到坐标系设置 map: 'china', // 地图类型 roam: true, // 地图可拖拽、平移 // data: mapData, // 使用动态Api接口文档数据 /*[ // 展示数据项的名字，经纬度，数据量 {name:'河南省',value:[32300,4000]}, {name: '山东省',value: 21203}, {name: '四川省',value: 41203}, {name: '青海省',value: 31203}, ],*/ data: [// 展示数据项的名字，经纬度，数据量 { name:'河南省',value:[32300,4000] }, ], coordinateSystem: "geo", // 当前坐标系设置：经纬度定位 symbolSize: 30, // 大小 label: { // 标签：地图中的标签、文字 show: true, // 开启地图中的标签、文字等，(必须开启) color: '#fff', fontSize:11, }, itemStyle:{ // 修改地图区域标签样式 areaColor: '#219edb', // 区域颜色 borderColor: '#fff', // 区域边框价格 }, emphasis: { // 地图高亮状态的多边形和标签样式 label:{ color: '#000', fontSize: 12, }, itemStyle: { areaColor: '#f60', borderColor: '#329edb' } }, }, { type: "effectScatter", // 涟漪(lianyi)效果 coordinateSystem: "geo", data: [ { name: "郑州", value:[ 108.95, 34.26 ] } ] } ], // 设置涟漪效果的相关配置 rippleEffect: { number: 2, // 波纹数量 scale: 4, // 波纹大小 }, itemStyle: { color: "red", } visualMap: { min: 800, max: 50000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] }, textStyle: { color:'#000' } }, }) // 使用生命钩子 onMounted(() => { // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入init() Vue3.2没有this var myChart = echarts.init(chart.value) // 注册可用的地图 echarts.registerMap('china',chinaMap); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() }) }) </script> <style scoped> </style>
图表自适应大小
页面加载完后，监听页面大小的改变
// 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() })
加载动画效果
加载等待效果
1. 全局下载：数据模拟数据 json-server
npm install -g json-server
2. 新建Src/Mock文件夹存放模拟数据，新建data.js文件
将data[ ]数组中的数据，拷贝出来，data,js中建立一个对象
// 拷贝数据：注意key要加双引号 “ ” // 创建一个 key "one":[ ]数组 { "one":[ { "value": 67, "name": "美食", "itemStyle":{ "normal": { "color": "rgb(1,175,80)" } } }, { "value": 85, "name": "日化", "itemStyle":{ "normal": { "color": "rgb(255.175.80)" } } }, { "value": 45, "name": "数码", "itemStyle":{ "normal": { "color": "rgb(1,0,80)" } } }, { "value": 98, "name": "家电", "itemStyle":{ "normal": { "color": "rgb(30,50,70)" } } } ] }
3.启动json-server
注意点 ： 启动目录 Mock路径下
// 运行 监听 json文件 端口 json-server --watch data.json --port 8888
地址栏：输入查看请求数据
axios安装
npm install --save axios
axios:Url:localhost:9999对应着 json-server启动时的IP端口
Vue3.2写法
// 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入地图文件 import chinaMap from '../../assets/china1.json' // 引入动态数据axios,二次封装 import axios from "../../http/request"; // const mapData = await fetch(`/api/post/1`).then(r => r.json()) // 根据接口文档：实际参数获取数据 const mapData = await axios.get('http://localhost:9999').then(res => res.data.result)
案列完整代码：
<template> <div ref="myChart" id="myChart"></div> </template> <script> import * as echarts from "echarts"; import axios from "axios"; // import {mapData} from "../assets/mapData.js" export default { data() { return { echartsData: {}, }; }, methods: { // 获取json-server数据 async linkData() { let mapnum = await axios({ url: "http://localhost:3000/one" }); console.log(mapnum.data); this.echartsData = mapnum.data; }, }, mounted() { // 1.初始化 let myChart = echarts.init(this.$refs.myChart); // 设置开始等待 myChart.showLoading(); // 调用数据请求方法 this.linkData().then(() => { myChart.hideLoading(); // 2.设置echarts数据 let option = { title: { text: "饼状图", subtext: "基本设置", left: "center", //设置位置居中 }, tooltip: { trigger: "item", //触发类型item数据项图形触发 }, 千锋大前端教研院 39.图表动画配置 legend: { orient: "vertical", //图例列表的布局朝向vertical纵向 left: "left", }, series: [ { name: "销售量", type: "pie", // 设置环形图 radius: ["40%", "70%"], //饼图的半径。数组的第一项是内半径，第二项是外半径。 // 设置环形图 label: { //饼图图形上的文本标签 show: true, position: "inside", //outside饼图扇区外侧inside饼图扇区内部center在饼图 中心位置 color: "yellow", }, labelLine: { //标签的视觉引导线配置 show: false, }, roseType: "area", //是否展示成南丁格尔图，通过半径区分数据大小 itemStyle: { //设置内容样式 color: "#c23531", shadowBlur: 200, shadowColor: "rgba(0, 0, 0, 0.5)", }, data: this.echartsData, }, ], }; // 4.设置图表绘制图表 myChart.setOption(option); }); }, }; </script> <style> #myChart { width: 500px; height: 500px; border: 1px solid red; } </style>
千锋Echarts+Vue3.0数据可视化项目
1.电脑上安装node.js
网址：https://nodejs.org/zh-cn/
下载自己对应操作系统版本 安装即可
2.全局下载项目脚手架
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
一.安装vue-cli
1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。
注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g
2、 全局安装vue-cli，在cmd中输入命令:npm install --global vue-cli
3、安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
打开cmd 输入
npm install -g @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli建项目
把cmd的路径切换到指定路径下
vue create 项目名
(3-1)选择项目配置模板 选择第三项自主选择你项目所需的配置
输入命令后，会跳出几个选项让你回答：
-Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错_Sorry, name can no longer contain capital letters_），
Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
Author ()： ----作者，输入你的大名
接下来会让用户选择：
Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any
Vue-specificHTML) are ONLY allowed in .vue files - render functions
are required elsewhere 仅运行时，已经有推荐了就选择第一个了
Install vue-router (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
_Use ESLint to lint your code (Y/n)
是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。 接下来也是选择题_Pick an
ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup unit tests with Karma + Mocha (Y/n) 是否安装单元测试，我选择安装y回车
Setup e2e tests with Nightwatch(Y/n) 是否安装e2e测试 ，我选择安装y回车
回答完毕后上图就开始构建项目了。
2、配置完成后，可以看到目录下多出了一个项目文件夹baoge，然后cd进入这个文件夹：
安装依赖：npm install
一、vite环境搭建，构建vite-vue-ts项目
1、快捷建立Vite+Vue3
npm init vite@latest
# npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest myapp -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template vue
2：更改http://localhost:3000/到8080与Network路由访问
在vite.config.ts里面加入：（server对象为新增，其他均是原有代码）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host:'0.0.0.0',//解决vite use--host to expose
port:8080,
open:true
}
})
3：配置vite别名（npm install @types/node --save-dev）
在vite.config.ts里面加入：（resolve对象为新增)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host:'0.0.0.0',//解决vite use--host to expose
port:8080,
open:true
},
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src') // 优化： '@': resolve(__dirname,'src')
}
]
}
})
4：路由（npm install vue-router@4）
src下新建目录router→index.ts
import {createRouter,createMemoryHistory,RouteRecordRaw} from 'vue-router'
import Layout from '@/components/HelloWorld.vue' // 路径报红： @ 变更 。。
const routes:Array<RouteRecordRaw> =[
{
path:'/',
name:'home',
component:Layout
}
]
// 创建
const router = createRouter({
history:createMemoryHistory(),
routes
})
// 暴露接口
export default router
在main.ts下 import router from './router/index' 引入路由
在main.ts下 app.use(router)注册路由
5：vuex(npm install vuex@next --save)或者Pinia(npm install pinia@next --save)
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5
https://pinia.web3doc.top/getting-started.html#%E5%AE%89%E8%A3%85
yarn add pinia
# 或者使用 npm
npm install pinia
设置为全局对象，在main.js中引用
import { createPinia } from "pinia";// 创建pinia实例const pinia = createPinia()app.use(pinia)
创建
pinia创建
// stores/todo.js import { defineStore } from 'pinia' export const useTodoStore = defineStore({ id: 'todo', state: () => ({ count: 0, title: "Cook noodles", done:false }) })
src下新建目录store→index.ts
打开vuex官网（Vuex 是什么？ | Vuex）找到TypeScript支持下的“简化 useStore 用法”直接复制所有代码就可以
在App.vue下<router-view></router-view>
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
export interface State {
count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
state: {
count: 0
},
mutations:{
setCount(state:State,i:number){
state.count = i
}
},
getters:{
getCount(state:State){
return state.count
}
}
})
// 定义自己的 `useStore` 组合式函数
export function useStore () {
return baseUseStore(key)
}
在main.ts下 import {store,key} from './store/index' 引入vuex
在main.ts下 app.use(store,key)注册路由
（如有疑问可参考官网TypeScript支持下的“useStore 组合式函数类型声明”）
pinia在vue3中的写法和用法
store/index.ts共享组件
import {ref} from 'vue'
// 共享组件
import {defineStore} from "pinia";
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})
// store.js import { defineStore } from "pinia" // defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({ // id: 必须的，在所有 Store 中唯一 id: "myGlobalState", // state: 返回对象的函数 state: () => ({ a: 1, }), getters: {}, actions: { setXXX(number) { this.a = number; }, }, });
// 在vue3中使用 <template> <div> {{number}} <button @click="clickHandle">按钮</button> </div> </template>
<script> import {GlobalStore} from "@/store/store.js" export default { setup(){ let store = GlobalStore(); //如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的) let number = computed(()=>store.a) const clickHandle = () => { store.setXXX("100") } return{number,clickHandle} }
} </script>
6：Eslint（可选）（npm install --save-dev eslint eslint-plugin-vue）
根目录新建文件.eslintrc.js
module.exports = { root: true, parserOptions: { sourceType: 'module' }, parser: 'vue-eslint-parser', extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly- recommended', 'plugin:vue/ vue3-recommended'], env: { browser: true, node: true, es6: true }, rules: { 'no-console': 'off', 'comma-dangle': [2, 'never'] //禁止使用拖尾逗号 } } } }
7：less/sass（可选）（npm install -D sass sass-loader）
二.项目初始化？
1.删除src文件夹下的cpmponents文件夹下的Helloword.vue文件
2.删除vuews下的两个.vue文件
3.在views中新建我们的页面文件 homePage.vue文件
<template> <div> 我是页面 </div> </template> <script> export default { name: "homePage" } </script> <style scoped> </style>
4.修改router下的index.ts配置路由文件
import {createRouter, createMemoryHistory, RouteRecordRaw,} from "vue-router";
const routes:Array<RouteRecordRaw> = [
{
path:'/page',
name:'page',
component: () => import('@/views/homePage.vue')
},
{ // 路由重定向配置：注意点
path:"/",
redirect:"/page",
}
]
// 创建
const router = createRouter({
history:createMemoryHistory(),
routes
})
// 暴露接口
export default router
5。修改根组件App.vue默认显示内容与初始化项目样式
<template> <!--router/index已设定路由--> <router-view/> </template> <script setup lang="ts"> </script> <style scoped> * { /* 清除样式 */ margin:0px; padding: 0px; box-sizing: border-box; /*盒子大小：包含border-box*/ } </style>
三、项目分辨率响应式分析与实施
项目基本结构
整体轮廓分为上下结构：红框
下框内分为：左中右
技术栈
1. vue3.0+vue-router4.0+axios
2. flex布局：npm install lib-flexible --save
3. LESS : npm install less less-loader -D
4. rem屏幕适配
5. echarts5.0 ：npm install echarts --save
6.Element-plus ：npm install element-plus --save
7.node.js-express后端
四.项目分辨率响应式创建
我们的项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用
我们可以使用 第三方插件flexible.js帮助我们修改html根节点的font-size大小 从而控制当前页面的
rem(会根据页面的html根节点font-size大小改变而改变)样式改变
flexible.js
flexible.js web自适应方案 阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容
自适应问题。
1.下载
npm i -S lib-flexible
2.在main.中进行配置
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from "./router/index";
// import store from "vuex";
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引用
import 'lib-flexible/flexible.js'
createApp(App).use(ElementPlus).use(router).mount('#app')
3.修改flexible配置
因为默认情况下只会在540px分辨率一下生效 所以我们需要根据我们的项目分辨率进行调整
在node_module/lib-flexible/flexible.js中修改代码如下
function refreshRem(){ var width = docEl.getBoundingClientRect().width; // 元数据：大小 /*if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10;*/ // 修改：最小400px，最大适配2560px if (width / dpr < 400) { width = 400 * dpr; }else if (width / dpr > 2560){ width = 2560 * dpr } // 设置成24份，1920Px设计稿 1rem 就是80px (1920/24=80) var rem = width / 24; // 原10 docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设
置一个font-size
cssrem插件
我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以
在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便
配置方式
在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置
修改Root Font Size（基准font-size） 配置项为80即可
测试与使用
在写css的时候就会出现相应的rem转换结果
五.项目顶部信息条创建
1.设置背景图
把图片方法assets文件夹中 在app.vue中设置背景图
body { background: url("./assets/xinguan.jpg") no-repeat fixed center; background-size: cover; }
2.设置标题文字
<template>
<!--上部：标题-->
<el-row class="top">
<el-col :span="24" >
<div class="grid-content ep-bg-purple-dark" >
<h1>大数据座舱</h1>
</div>
</el-col>
</el-row>
<!--下部：左中右-->
<el-row class="main">
<el-col :span="8" class="itemLeft">
<div class="grid-content ep-bg-purple" >Aside</div>
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" >Main</div>
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" >Aside</div>
</el-col>
</el-row>
</template>
<script setup>
</script>
<style lang="scss">
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.top {
height: 1rem; // 1rem=80px
width: 100%;
background-color: rgba(0,0,255,0.1); // 色度 0.2透明度
// 标题的文字样式
h1{
font-size: 0.375rem;
color: #fff;
text-align: center; // 居中方式
line-height: 1rem; // 1rem=80px
}
}
</style>
六.页面主体创建
大容器
1.创建一个大容器来容纳绿色 红色 黄色三个区域
在homepage.vue页面中创建一个大容器：使用element-plus样式布局
后面容器样式可以跳过
<!--下部：左中右-->
<el-row class="main">
<el-col :span="8" class="itemLeft">
<div class="grid-content ep-bg-purple" >Aside</div>
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" >Main</div>
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" >Aside</div>
</el-col>
</el-row>
创建容器样式
<style lang="less"> header{ height: 1rem; width: 100%; /* 设置一个半透明淡蓝色 */ background-color: rgba(0, 0, 255, .2); /* 把标题文字样式设置 */ h1{ font-size: .375rem; color:#fff; text-align: center; line-height: 1rem; } } // 主体容器样式 .container{ // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了 min-width: 1200px; max-width: 2048px; margin: 0 auto; // 盒子上10px 左右10px 下0的外边距 padding: .125rem .125rem 0; // 测试完成看到样式就删除掉 height: 500px; background-color: gray; } </style
左中右
接下来我们可以创建左中右这三个部分。那么他们的占比分别是3 5 3 这个时候我们可以使用flex布局来
分割他们所占的区块大小
左右图表展示区块容器样式
大家会发现我们要展示的4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即
可。并且在其中放置slot槽口 后期方便向容器内插入图表
创建容器组件
在components文件夹下创建 itemPage.vue
<!--共享容器组件--> <template> <div class="item "> <!--设置插槽--> <slot></slot> </div> </template> <script setup> </script> <style scoped lang="less"> .item { height: 5.125rem; border: 1px solid blue; //外边距20px margin:.25rem; background-color: rgba(13,130,255,0.851); } </style>
在views下的homePage中引用调用使用
<template> <!--上部：标题--> <el-row class="top"> <el-col :span="24" > <div class="grid-content ep-bg-purple-dark" > <h1>蓝尔海--大数据座舱</h1> </div> </el-col> </el-row> <!--下部：左中右,justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。--> <el-row class="row-bg" justify="space-evenly"> <el-col :span="6" class="itemLeft"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemOne> </ItemOne> </ItemPage> <ItemPage> <ItemTwo> </ItemTwo> </ItemPage> </div> </el-col> <el-col :span="12" class="itemCenter"> <div class="grid-content ep-bg-purple-light" > <h2>地图展示</h2> </div> </el-col> <el-col :span="6"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemTree> </ItemTree> </ItemPage> <ItemPage> <ItemFour> </ItemFour> </ItemPage> </div> </el-col> </el-row> </template> <script setup> // 引入组件 import ItemPage from "../components/itemPage.vue" import ItemOne from "../components/itemOne.vue" import ItemTwo from "../components/itemTwo.vue" import ItemTree from "../components/itemThree.vue" import ItemFour from "../components/itemFour.vue" </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; // 边框圆角° margin: 0 auto; } .grid-content { border-radius: 4px; min-height: 36px; } .top { height: 1rem; // 1rem=80px width: 100%; background-color: rgba(0,0,255,0.1); // 色度 0.2透明度 // 标题的文字样式 h1{ font-size: 0.375rem; color: #fff; text-align: center; // 居中方式 line-height: 1rem; // 1rem=80px } } // 大容器的样式 /*.container { // 最大最小的宽度 !*min-width: 1200px; max-width: 2048px;*! !*margin: 0 auto; // 上容器边距 padding: .125rem 0.125rem 0; // 上下右边距*! !*height: 500px; background-color: gray;*! }*/ .itemCenter{ border: 1px solid blue; border-radius: 4px; } </style>
运行之后大家会发现左右区块就展现出4个容器
左右每个区块内容插入容器槽口
我们一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且 分别显示
1.创建4个组件 在components下 itemOne.vue等等 一共4个
然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）
<template> <div> <h2>图表1</h2> <div class="chart"> 图表的容器 </div> </div> </template> <script setup> </script> <style scoped> </style>
在homePage.vue中引用调用使用这4个组件
<template> <!--上部：标题--> <el-row class="top"> <el-col :span="24" > <div class="grid-content ep-bg-purple-dark" > <h1>蓝尔海--大数据座舱</h1> </div> </el-col> </el-row> <!--下部：左中右,justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。--> <el-row class="row-bg" justify="space-evenly"> <el-col :span="6" class="itemLeft"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemOne> </ItemOne> </ItemPage> <ItemPage> <ItemTwo> </ItemTwo> </ItemPage> </div> </el-col> <el-col :span="12" class="itemCenter"> <div class="grid-content ep-bg-purple-light" > <h2>地图展示</h2> </div> </el-col> <el-col :span="6"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemTree> </ItemTree> </ItemPage> <ItemPage> <ItemFour> </ItemFour> </ItemPage> </div> </el-col> </el-row> </template> <script setup> // 引入组件 import ItemPage from "../components/itemPage.vue" import ItemOne from "../components/itemOne.vue" import ItemTwo from "../components/itemTwo.vue" import ItemTree from "../components/itemThree.vue" import ItemFour from "../components/itemFour.vue" </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; // 边框圆角° margin: 0 auto; } .grid-content { border-radius: 4px; min-height: 36px; } .top { height: 1rem; // 1rem=80px width: 100%; background-color: rgba(0,0,255,0.1); // 色度 0.2透明度 // 标题的文字样式 h1{ font-size: 0.375rem; color: #fff; text-align: center; // 居中方式 line-height: 1rem; // 1rem=80px } } // 大容器的样式 /*.container { // 最大最小的宽度 !*min-width: 1200px; max-width: 2048px;*! !*margin: 0 auto; // 上容器边距 padding: .125rem 0.125rem 0; // 上下右边距*! !*height: 500px; background-color: gray;*! }*/ .itemCenter{ border: 1px solid blue; border-radius: 4px; } </style>
<template> <!--上部：标题--> <el-row class="top"> <el-col :span="24" > <div class="grid-content ep-bg-purple-dark" > <h1>蓝尔海--大数据座舱</h1> </div> </el-col> </el-row> <!--下部：左中右,justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。--> <el-row class="row-bg" justify="space-evenly"> <el-col :span="6" class="itemLeft"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemOne> </ItemOne> </ItemPage> <ItemPage> <ItemTwo> </ItemTwo> </ItemPage> </div> </el-col> <el-col :span="12" class="itemCenter"> <div class="grid-content ep-bg-purple-light" > <h2>地图展示</h2> </div> </el-col> <el-col :span="6"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemTree> </ItemTree> </ItemPage> <ItemPage> <ItemFour> </ItemFour> </ItemPage> </div> </el-col> </el-row> </template> <script setup> // 引入组件 import ItemPage from "../components/itemPage.vue" import ItemOne from "../components/itemOne.vue" import ItemTwo from "../components/itemTwo.vue" import ItemTree from "../components/itemThree.vue" import ItemFour from "../components/itemFour.vue" </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; // 边框圆角° margin: 0 auto; } .grid-content { border-radius: 4px; min-height: 36px; } .top { height: 1rem; // 1rem=80px width: 100%; background-color: rgba(0,0,255,0.1); // 色度 0.2透明度 // 标题的文字样式 h1{ font-size: 0.375rem; color: #fff; text-align: center; // 居中方式 line-height: 1rem; // 1rem=80px } } // 大容器的样式 /*.container { // 最大最小的宽度 !*min-width: 1200px; max-width: 2048px;*! !*margin: 0 auto; // 上容器边距 padding: .125rem 0.125rem 0; // 上下右边距*! !*height: 500px; background-color: gray;*! }*/ .itemCenter{ border: 1px solid blue; border-radius: 4px; } </style>
中间地图区域容器样式
在views文件夹下的 homePage。vue 中设置中间区域容器样式
.itemCenter{
// 高度840px
height: 10.5rem;
border: 1px solid blue;
// 内边距10px
padding: 0.125rem;
// 外边距20px
margin: 0.25rem;
}
七.图表前期准备
全局设置Echarts与axios
Charts 全局引用
1.下载
npm install --save echarts
2.0的写法
在vue2.0中使用如下写法吧echarts挂载在vue实例上 但是这招在3.0行不通了
在main.js中进行引用和调用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'
// 引用echarts
import * as echarts from "echarts"
Vue.prototype.$echarts=echarts;
createApp(App).use(store).use(router).mount('#app')
vue3中使用Provide/Inject依赖注入，将替代vue2中在原型链上挂载一些属性
在app.vue中使用provider来给后代们提供数据
<script> // 1.引用proivde import {provide} from "vue" // 2.引用echarts import * as echarts from "echarts" export default { setup() { provide("echarts",echarts)//第一个参数是名字 第二个参数是你传递的内容 }, } </script>
在想使用的组件中使用inject来接受
在views下的homePage.vue测试
// 引用inject import {inject} from 'vue' export default { components:{ ItemPage,itemOne,itemTwo,itemThree,itemFour }, setup(){ // 测试使用echarts let $echarts= inject("echarts") console.log($echarts) } }
大家在console中可以看到可以正常使用了
axios全局引用
axios使用于上面相同方式
1.下载 npm install --save axios
2.在app.vue中使用provider来给后代们提供数据
<script> // 1.引用proivde import {provide} from "vue" // 2.引用echarts import * as echarts from "echarts" // 引用axios import axios from 'axios' export default { setup() { provide("echarts",echarts)//第一个参数是名字 第二个参数是你传递的内容 provide("axios",axios)//第一个参数是名字 第二个参数是你传递的内容 }, } </script>
在想使用的组件中使用inject来接受
在views下的homePage.vue测试
// 引用inject import {inject} from 'vue' export default { components:{ ItemPage,itemOne,itemTwo,itemThree,itemFour }, setup(){ // 测试使用echarts let $echarts= inject("echarts") let $http= inject("axios") console.log($echarts) console.log($http) } }
Vue3.2中homePage.vue 完整代码：
<template> <!--上部：标题--> <el-row class="top"> <el-col :span="24" > <div class="grid-content ep-bg-purple-dark" > <h1>豫教云网卫士--大数据座舱</h1> </div> </el-col> </el-row> <!--下部：左中右,justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。--> <el-row class="row-bg" justify="space-evenly"> <el-col :span="6" class="itemLeft"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemOne> </ItemOne> </ItemPage> <ItemPage> <ItemTwo> </ItemTwo> </ItemPage> </div> </el-col> <el-col :span="12" class="itemCenter"> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3.2中 id=‘’ 变更 ref=--> <div class="grid-content ep-bg-purple-light" ref="chart" style="width:100%;height:700px;"> <h2>地图展示</h2> </div> </el-col> <el-col :span="6"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemTree> </ItemTree> </ItemPage> <ItemPage> <ItemFour> </ItemFour> </ItemPage> </div> </el-col> </el-row> </template> <script setup > import {ref,reactive,onMounted} from 'vue' // 引入组件 import ItemPage from "../components/itemPage.vue" import ItemOne from "../components/itemOne.vue" import ItemTwo from "../components/itemTwo.vue" import ItemTree from "../components/itemThree.vue" import ItemFour from "../components/itemFour.vue" // 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入地图文件 import chinaMap from '../assets/china1.json' // 引入动态数据axios,二次封装 import axios from "../../http/request"; const chart =ref(); // 创建DOM引用 // 第二种方法：初始化方法 const option = reactive({// 指定图表的配置项和数据 series: [{ // 地图不需XY轴 type: 'map', // 图表类型:散点图scatter：用到坐标系设置 map: 'china', // 地图类型 roam: true, // 地图可拖拽、平移 // data: mapData, // 使用动态Api接口文档数据 /*[ // 展示数据项的名字，经纬度，数据量 {name:'河南省',value:[32300,4000]}, {name: '山东省',value: 21203}, {name: '四川省',value: 41203}, {name: '青海省',value: 31203}, ],*/ data: [// 展示数据项的名字，经纬度，数据量 {name: '河南省', value: [32300, 4000],}, {name: '山东省', value: 21203}, {name: '四川省', value: 41203}, {name: '青海省', value: 31203}, ], label: { // 标签：地图中的标签、文字 show: true, // 开启地图中的标签、文字等，(必须开启) color: '#fff', fontSize: 11, }, itemStyle: { // 修改地图区域标签样式 areaColor: '#219edb', // 区域颜色 borderColor: '#fff', // 区域边框价格 }, emphasis: { // 地图高亮状态的多边形和标签样式 label: { color: '#000', fontSize: 12, }, itemStyle: { areaColor: '#f60', borderColor: '#329edb' }, }, }], coordinateSystem: "geo", // 当前坐标系设置：经纬度定位 symbolSize: 30, // 大小 }) // 使用生命钩子 onMounted(() => { // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 注册可用的地图 echarts.registerMap('china',chinaMap); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() }) }) </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; // 边框圆角° margin: 0 auto; } .grid-content { border-radius: 4px; min-height: 36px; } .top { height: 1rem; // 1rem=80px width: 100%; background-color: rgba(0,0,255,0.1); // 色度 0.2透明度 // 标题的文字样式 h1{ font-size: 0.375rem; color: #fff; text-align: center; // 居中方式 line-height: 1rem; // 1rem=80px } } // 大容器的样式 /*.container { // 最大最小的宽度 !*min-width: 1200px; max-width: 2048px;*! !*margin: 0 auto; // 上容器边距 padding: .125rem 0.125rem 0; // 上下右边距*! !*height: 500px; background-color: gray;*! }*/ /*.itemCenter{ border: 1px solid blue; border-radius: 4px; }*/ </style>
八.后台接口创建express介绍
node.js平台Web开发框架安装：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (expressjs.com.cn)
npm install express --save
九.后台路由创建
1.创建一个文件夹 server 在其中创建index.js与router文件夹容来容纳代码
2.在router下创建4个文件分别容纳 对应的接口
// 路由：4个图表需要获取后台数据 // 定义引入express let express = require("express") // 定义路由 let router = express.Router() // 设置当前路由:get('路由名',回调函数(请求request,响应response) router.get("/data",(req,res)=>{ // 响应内容 res.send({mag:"One的地址"}) }) // 暴露路由接口 module .exports=router // vue3.0 // export default router // vue3.2
3.在index.js下引用使用刚才创建的内容
var express=require("express"); var app=express(); // 引用路由文件 var chartOne=require("./router/one.js"); var chartTwo=require("./router/two.js"); var chartThree=require("./router/three.js"); var chartFour=require("./router/four.js"); // 中间件中使用路由 app.use("/one",chartOne) app.use("/two",chartTwo) app.use("/three",chartThree) app.use("/four",chartFour) // 请求是localhost:3000/user/路由文件中的地址 app.listen(3000)
完整代码
// 合并4个图表路由 // import {Express, Request, Response, Router} from "express"; // {类型} //引用express let express=require("express") // vue3.0 // import express,{Express} from "express"; // vue3.2 // axios import axios from "axios"; // 接口函数: 前端交互 let app = express(); // 引用路由文件 let chartOne = require("./router/one"); let chartTwo = require("./router/two"); let chartTree = require("./router/three"); let chartFour = require("./router/four"); // 使用中间件来配置路由 app.use('/one',chartOne) app.use('/two',chartTwo) app.use('/three',chartTree) app.use('/four',chartFour) /*// 解决vite-demo中跨域问题 app.use('*',(req,res,next) =>{// 允许跨域 res.header('Access-Control-Allow-Origin','*'); // '*‘可以指定IP next(); })*/ /*// 路由去分模块，避免所有路由都写在入口文件中 const router:Router = express.Router() // 中间件注册，路由注册 app.use('/api',router) // 路由请求:req接收前端，resp响应返给前端 router.get('/list', async (req:Request,res:Response)=>{ const result = await axios.post('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh5Shelf') res.json({ // 响应返给前端 ...result.data.data }) })*/ // 开启服务： 端口3333,接收回调 app.listen(3333,()=>{ console.log('success server http://localhost:3333') })
十.api接口数据创建
1.在server文件夹下创建mock文件夹用来容纳数据(数据可以从代码中获取)
2.引用并且把数据返回给前台
var express=require("express"); var router=express.Router() // 引用数据 let data=require("../mock/one.json") router.get("/data",function(req,res){ // 数据返回给前台 res.send({msg:"第1个接口",data}) }) module.exports=router
router/ One.js\two.js\three.js\four.js
// 路由：4个图表需要获取后台数据 // 定义引入express let express = require("express") // 定义路由 let router = express.Router() // 引用json let oneData = require('../Mock/one.json') // 设置当前路由:get('路由名',回调函数(请求request,响应response) router.get("/data",(req,res)=>{ // 响应内容:返回oneData.json数据 res.send({mag:"One的地址",chartOne:oneData}) }) // 暴露路由接口 module .exports=router // vue3.0 // export default router // vue3.2
10-1.解决跨域
var express=require("express"); var app=express(); app.use(function(req,res,next){ res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS'); // 千万不要网%%￥￥￥### // 千万不要网 // 千万不要网 next(); })
Vue3.2中完整代码写法
node/index.ts
// 合并4个图表路由 // import {Express, Request, Response, Router} from "express"; // {类型} //引用express let express=require("express") // vue3.0 // import express,{Express} from "express"; // vue3.2 // axios import axios from "axios"; // 接口函数: 前端交互 let app = express(); // 引用路由文件 let chartOne = require("./router/one"); let chartTwo = require("./router/two"); let chartThree = require("./router/three"); let chartFour = require("./router/four"); // 使用中间件来配置路由 app.use('/one',chartOne) app.use('/two',chartTwo) app.use('/three',chartThree) app.use('/four',chartFour) // 解决vite-demo中跨域问题 app.use('*',(req:any,res:any,next:any) =>{// 允许跨域 res.header('Access-Control-Allow-Origin','*'); // '*‘可以指定IP res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length,Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET,DELETE,OPTIONS'); next(); }) /*// 路由去分模块，避免所有路由都写在入口文件中 const router:Router = express.Router() // 中间件注册，路由注册 app.use('/api',router) // 路由请求:req接收前端，resp响应返给前端 router.get('/list', async (req:Request,res:Response)=>{ const result = await axios.post('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh5Shelf') res.json({ // 响应返给前端 ...result.data.data }) })*/ // 开启服务： 端口3333,接收回调 app.listen(3333,()=>{ console.log('success server http://localhost:3333') })
11.图表1基本设置销售总量
1.在components文件夹下的 itemOne.vue中 设置图表1：注意 跨域问题
<template> <div ref="chart"> <h2>图表1</h2> <div > 图表的容器 </div> </div> </template> <script setup> // 引用echarts核心模块 import * as echarts from 'echarts' import {onMounted, ref} from "vue"; import axios from "axios"; const chart =ref(); // 创建DOM引用 // 函数：异步 async function getState(){ // 对应node服务器中端口:get请求 // 需要后端解决跨域问题：node/index.ts中可以理解为:/api等于https://127.0.0.1:3333 const oneData = await axios({url:"/api/one/data"}) console.log(oneData) } onMounted(()=>{ // 调用函数请求 getState(); // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 使用刚指定的配置项和数据显示图表。 // 第三种写法： 钩子内 myChart.setOption({ xAxis: { type: "value", }, yAxis: { type: "category" }, series: [ { type:"bar", } ] }); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener("resize",()=>{ myChart.resize() }) }) </script> <style scoped> </style>
解决跨域问题点
vite.config.ts中
express服务器端node/index.ts中
// 解决vite-demo中跨域问题 app.use('*', function(req:any, res:any, next:any) { res.header("Access-Control-Allow-Origin", "*"); /*res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8");*/ next(); });
express node/index.ts解决跨域
下面是vite的代理
server: {
proxy: {
'/api': {
target: 'https://baidu.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
配置后/api就是代理了target配置的地址（ http://127.0.0.1:3333）后端服务器IP和端口
可以理解为: /api 等于https://127.0.0.1:3333
所以不需要配置axios的baseUrl了，切记。
2.验证接口
axios.get("/api/one/data").then(res => {
console.log("one====>",res);
});
// const mapData = await fetch(`/api/post/1`).then(r => r.json())
// 根据接口文档：实际参数获取数据
const mapData = await axios.get('/api/one/data').then(res => res.data.chartData)
此时，get请求路径不在是https://localhost:5173而是/api/one/data
到此就可以跨域了。
验证：
11.图表1基本设置销售总量
1.在components文件夹下的 itemOne.vue中 设置图表1
<template> <div > <div ref="chart" class="oneChart"> 图表的容器 </div> </div> </template> <script setup> // 引用echarts核心模块 import * as echarts from 'echarts' import {onMounted, reactive, ref} from "vue"; import axios from "axios"; // var chartDom = document.getElementsById('main') // vue3创建Dom const chart =ref(); // Vue3.2创建DOM引用 let oneData = reactive({}); let xData = reactive([]); let yData = reactive([]); // 2.处理异步请求过来的数据 function setData(){// 将oneData请求来的数据处理:数组对象 // 将数组map()获取title赋值给xData xData = oneData.data.chartOne.chartData.map(v => v.title); yData = oneData.data.chartOne.chartData.map(v => v.num); console.log("xData",xData) console.log('yData',yData) } // 1.函数：异步请求 async function getState(){ // 对应node服务器中端口:get请求 // 需要后端解决跨域问题：node/index.ts中可以理解为:/api等于https://127.0.0.1:3333 oneData = await axios({url:"/api/one/data"}) // console.log(oneData.data.chartOne.chartData) } onMounted(()=>{ // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 调用函数请求 // getState(); //3.使用then(()=>{})回调函数进行数据处理 getState().then(()=>{ setData() // 使用刚指定的配置项和数据显示图表。 // 第三种写法： 钩子内 myChart.setOption({ title: { // 标题 text: '地区销售', textStyle: { color: '#fff', fontSize: 18, },
top: 20px, // 上边距 left: 'center', // 标题居中 }, tooltip:{ trigger: 'axis', axisPointer: { type:'shadow' } }, legend: {// 图例 data: ['销量'], top: '5%', left: 'right', textStyle: { // 文字样式 color: '#f68', } }, // 调整图标：位置 grid: { // 上下左右 // top: '3%', left: '3%', // right: '6%', bottom:'15%', containLabel: true, // 包含坐标轴文字 }, xAxis: { type: "value", // boundaryGap: [0,0.01], axisLine:{// x轴线的颜色以及宽度 lineStyle: { color: '#fff', /*width: 0, type: 'solid',*/ } }, axisLabel: { // x轴文字的配置 show:true, textStyle: { color: '#fff', }, /*splitLine: { // 分割线配置 show:false, lineStyle: { color: '#fff', }, }*/ } }, yAxis: { type: "category", data: xData, inverse: true, // Y 轴从下往上是从小到大的排列 axisLine:{// x轴线的颜色以及宽度 lineStyle: { color: '#fff' } } }, series: [ { name: '地区', type:"bar", data: yData, realtimeSort: true, // 动态排序 itemStyle: { // 样式 normal: { // 数据圆角:[左上，右上，右下，左下] BorderRadius: [0,20,20,0], // 修改线性渐变色方式 :(0,0,0,0,[{数组对象：每个阶段相关颜色}]) color: new echarts.graphic.LinearGradient(0,0,1,0,[ { // 0 起始颜色 offset: 0, color: '#005eaa', }, { // 0.5 中间颜色 offset: 0.5, color: '#339ca8', }, { // 1 结束颜色 offset: 1, color: '#cda819' } ]) } } } ] }); }) // 单图表响应式: 跟随浏览器大小改变 window.addEventListener("resize",()=>{ myChart.resize() }) }) </script> <style scoped> .oneChart{ height: 360px; } </style>
问题：出现图表无法自适应
itemPage.vue中
14.图表2 地图展示
地图数据来自阿里dataV可视化平台：DataV.GeoAtlas地理小工具系列 (aliyun.com)
由于数据实在我们本地 所以 我们在启动项目的时候可以直接在浏览器上输入
http://localhost:5173/assets/china1.json即可看到数据
我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的
homePage.vue中引用调用并且在页面中间的div中使用
<template> <!--上部：标题--> <el-row class="top"> <el-col :span="24" > <div class="grid-content ep-bg-purple-dark" > <h1>豫教云网卫士--大数据座舱</h1> </div> </el-col> </el-row> <!--下部：左中右,justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。--> <el-row class="row-bg" justify="space-evenly"> <el-col :span="6" class="itemLeft"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemOne> </ItemOne> </ItemPage> <ItemPage> <ItemTwo> </ItemTwo> </ItemPage> </div> </el-col> <el-col :span="12" class="itemCenter"> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3.2中 id=‘’ 变更 ref=--> <div class="grid-content ep-bg-purple-light" ref="chart" style="width:100%;height:100%;"> <!--<h2>地图展示</h2>--> <MapPage/> </div> </el-col> <el-col :span="6"> <div class="grid-content ep-bg-purple" > <ItemPage> <ItemTree> </ItemTree> </ItemPage> <ItemPage> <ItemFour> </ItemFour> </ItemPage> </div> </el-col> </el-row> </template> <script setup > // 引入组件 import ItemPage from "../components/itemPage.vue" import ItemOne from "../components/itemOne.vue" import ItemTwo from "../components/itemTwo.vue" import ItemTree from "../components/itemThree.vue" import ItemFour from "../components/itemFour.vue" import MapPage from "../components/mapPage.vue" </script> <style lang="scss"> .el-row { margin-bottom: 20px; } .el-row:last-child { margin-bottom: 0; } .el-col { border-radius: 4px; // 边框圆角° margin: 0 auto; } .grid-content { border-radius: 4px; min-height: 36px; } .top { height: 1rem; // 1rem=80px width: 100%; background-color: rgba(0,0,255,0.1); // 色度 0.2透明度 // 标题的文字样式 h1{ font-size: 28px; color: #fff; text-align: center; // 居中方式 line-height: 80px; // 1rem=80px } } // 大容器的样式 /*.container { // 最大最小的宽度 !*min-width: 1200px; max-width: 2048px;*! !*margin: 0 auto; // 上容器边距 padding: .125rem 0.125rem 0; // 上下右边距*! !*height: 500px; background-color: gray;*! }*/ /*.itemCenter{ border: 1px solid blue; border-radius: 4px; }*/ </style>
mapPage.vue完整代码
<template> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3.2中 id=‘’ 变更 ref=--> <div class="grid-content ep-bg-purple-light" ref="chart" style="width:100%;height:100%;"> </div> </template> <script setup> import {ref,reactive,onMounted} from 'vue' // 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入本地地图文件 import chinaMap from '../assets/china1.json' // 引入动态数据axios,二次封装 // import axios from 'axios' const chart =ref(); // 创建DOM引用 // 第二种方法：初始化方法 const option = reactive({// 指定图表的配置项和数据 tooltip: { // 提示框组件 trigger: "item", }, title: { text: '城市销量', left: 'center', // 距离位置 textStyle: { // 文字设置 color: "#fff", fontSize:20, textShadowBlur: 20, // 阴影 textShadowColor:"#33ffff", //阴影颜色 } }, geo: { // 地理坐标系 tooltip: { show: true }, map: 'china', // 地图类型 itemStyle: { // 修改地图区域标签样式 areaColor: '#219edb', // 区域颜色 borderColor: '#00ffff', // 区域边框颜色 shadowColor: 'rgba(230,130,70,0.5)', // 阴影颜色 shadowBlur: 30, // 阴影模糊度 }, label: { // 标签：地图中的标签、文字 show: true, // 开启地图中的标签、文字等，(必须开启) color: '#fff', fontSize: 11, }, emphasis: { // 地图高亮状态的多边形和标签样式 // focus:'self', // 当前高亮，其他淡出 label: { color: '#000', fontSize: 12, }, itemStyle: { areaColor: '#f60', borderColor: '#329edb' }, }, roam: true, // 地图可拖拽、平移 }, visualMap: { // 视觉映射效果：热度点、热度柱 type: 'continuous', // 必要设置：连续类型 min: 100, // 必要设置：最小 max: 10000, // 必要设置：最大 text: ['High', 'Low'], realtime: false, calculable: true, // 滑动效果 inRange: { // 热度过渡：颜色设置 color: ['lightskyblue', 'yellow', 'orangered'] }, textStyle: { color: '#fff' }, }, series: [{ // 系列：地图不需XY轴 type: 'effectScatter', // 图表类型:散点图scatter：用到坐标系设置 coordinateSystem: 'geo', geoIndex: 0, symbolSize:function (params){ // 气泡点特效 return (params[2] / 1000) * 1 + 5; // 1000越大越小,+5越大越大 }, itemStyle: { color:"#b02a02", }, encode: { tooltip: 2, }, data: [ // 展示数据项的名字，经纬度，数据量 {name: '北京', value: [116.46,39.92,4367]}, {name: '上海', value: [121.48,31.22,8675]}, {name: '深圳', value: [114.07,22.62,2461]}, {name: '广州', value: [113.23,23.16,187]}, {name: '西安', value: [108.45,34,375]}, ], /*[ // 展示数据项的名字，经纬度，数据量 {name:'河南省',value:[32300,4000]}, {name: '山东省',value: 21203}, {name: '四川省',value: 41203}, {name: '青海省',value: 31203}, ],*/ }, ] /*coordinateSystem: "geo", // 当前坐标系设置：经纬度定位 symbolSize: 30, // 大小*/ }) // 使用生命钩子 onMounted(() => { // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 注册可用的地图 echarts.registerMap('china',chinaMap); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() }) }) </script> <style scoped> </style>
15.图表3 产品统计分析图
获取数据:Vue3.2优化
vite.config.ts中
对应后端express-node/router/three.js
前端在components下的itemThree.vue
完整代码：
<template> <div> <!--<h2>图表3</h2>--> <div ref="chart" style="height: 340px;"> </div> </div> </template> <script setup> import {onMounted, reactive, ref} from "vue" import * as echarts from 'echarts' import axios from "axios"; let chart = ref();// 创建Mod引用 let threeData = reactive({}) // 优化Vue3.2 // 使用顶级await:父组件必须使用<suspense>包裹组件 async function getState(){ threeData = await axios.get("/api/three/data") } onMounted(()=>{ // 调用函数请求 // getState(); //3.使用then(()=>{})回调函数进行数据处理 getState().then(()=>{ console.log("饼状图",threeData) // 基于加载完后的DOM，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 使用刚指定的配置项和数据显示图表。 myChart.setOption({ title: { // 标题 text: '统计分析', textStyle: { color: '#fff', fontSize: 18, }, top: '20px', left: 'center', // 标题居中 }, legend: { // 设置图例 top: 'bottom', // 放到最下面 width: '60%', // 自适应 height: 'auto', textStyle: { color: "#fff" } }, tooltip:{ show:true, //显示 }, // 调整图标：位置 grid: { // 上下左右 // top: '3%', // left: '3%', // right: '6%', bottom:'15%', containLabel: true, // 包含坐标轴文字 }, series: [ { type: 'pie', // 饼图 data: threeData.data.chartThree.chartData, radius: [10,90], // 饼图的半径数组的第一项是内半径，第二项是外半径 center: 'center', // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。 roseType: "area", // 玫瑰类型 itemStyle: { borderRadius: 10 // 圆角：用于指定饼图扇形区域块的内外圆角半径 }, }, ], }); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener("resize",()=>{ myChart.resize() }) }) }) </script> <style scoped> </style>
16.图表4 产品月销图
数据获取
在components文件夹下的itemTwo.vue中进行设置
<template>
<div>
<!--<h2>图表2</h2>-->
<div ref="chart" style="height: 340px">
</div>
</div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import axios from "axios";
import * as echarts from "echarts";
let chart = ref(); // 创建Mod容器
let twoData = reactive({})
async function getState(){
twoData = await axios.get("/api/two/data")
}
onMounted(()=>{
getState().then(()=>{
console.log("查看折线图数据",twoData.data.chartTwo.chartData)
// 基于加载完后的DOM，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
title: { // 标题
text: '地区销售',
textStyle: {
color: '#fff',
fontSize: 18,
},
top: '20px',
left: 'center', // 标题居中
},
tooltip:{ // 提示框组件
trigger: 'axis', // 触发类型：坐标轴类型触发
axisPointer: { // 坐标轴指示器配置项
type:'cross',// 指示器类型：十字准星式，如类型：shadow
label: { // 坐标轴指示器的文本标签样式：提示文本
backgroundColor: "#e6b600", // 文本标签的背景颜色就是XY轴上的内容
}
},
},
legend:{// 图例组件:展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
data: ["郑州","新乡","安阳","商丘","洛阳"],
top: "15%", // 距离容器上侧的距离
textStyle:{ // 文字样式
color: "#fff"
},
},
/*toolbox: { // 下载
feature: {
saveAsImage: {
},
},
},*/
grid: {// 组件离容器的距离
top: "30%",
left: "1%",
right:"6%",
bottom:"5%",
containLabel: true, // grid区域是否包含坐标轴的刻度标签
},
xAxis: {
axisLine: {
lineStyle: {
color: "#fff",
}
},
type: "category", // 类目轴：横向和竖向
boundaryGap:false, // 间隙
data: twoData.data.chartTwo.chartData.day, // 获取日期
},
yAxis: {
type: "value", // 数值轴
axisLine: {
lineStyle: {
color: "#fff",
}
},
},
series: [
{
name:"郑州",
type: "line", // 线性
data: twoData.data.chartTwo.chartData.num.Chemicals,
smooth: true, // 折线图平滑效果，变成曲线图
showSymbol:false, // 隐藏所有数据点
stack: "Total",//数据堆叠
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series",// 只显示选中的内容高亮
},
areaStyle: { // 设置填充区域的样式
opacity: 0.8, // 透明度
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{// 设置渐变:起始
offset: 0,
color: "rgb(128,255,165)",
},
/*{// 设置渐变：中间
offset: 0.5,
color: "rgb(1,191,236)",
},*/
{// 设置渐变：结束
offset: 1,
color: "rgb(1,191,236)",
},
]),
},
},
{
name:"新乡",
type: "line", // 线性
data: twoData.data.chartTwo.chartData.num.Clothes,
smooth: true, // 折线图平滑效果，变成曲线图
showSymbol:false, // 隐藏所有数据点
stack: "Total",//数据堆叠
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series",// 只显示选中的内容高亮
},
areaStyle: { // 设置填充区域的样式
opacity: 0.8, // 透明度
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{// 设置渐变:起始
offset: 0,
color: "rgb(0,221,255)",
},
/*{// 设置渐变：中间
offset: 0.5,
color: "rgb(77,119,255)",
},*/
{// 设置渐变：结束
offset: 1,
color: "rgb(77,119,255)",
},
]),
},
},
{
name:"安阳",
type: "line", // 线性
data: twoData.data.chartTwo.chartData.num.Electrical,
smooth: true, // 折线图平滑效果，变成曲线图
showSymbol:false, // 隐藏所有数据点
stack: "Total",//数据堆叠
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series",// 只显示选中的内容高亮
},
areaStyle: { // 设置填充区域的样式
opacity: 0.8, // 透明度
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{// 设置渐变:起始
offset: 0,
color: "rgb(55,162,255)",
},
/*{// 设置渐变：中间
offset: 0.5,
color: "rgb(1,191,236)",
},*/
{// 设置渐变：结束
offset: 1,
color: "rgb(116,21,219)",
},
]),
},
},
{
name:"商丘",
type: "line", // 线性
data: twoData.data.chartTwo.chartData.num.digit,
smooth: true, // 折线图平滑效果，变成曲线图
showSymbol:false, // 隐藏所有数据点
stack: "Total",//数据堆叠
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series",// 只显示选中的内容高亮
},
areaStyle: { // 设置填充区域的样式
opacity: 0.8, // 透明度
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{// 设置渐变:起始
offset: 0,
color: "rgb(255,0,135)",
},
/*{// 设置渐变：中间
offset: 0.5,
color: "rgb(1,191,236)",
},*/
{// 设置渐变：结束
offset: 1,
color: "rgb(135,0,157)",
},
]),
},
},
{
name:"洛阳",
type: "line", // 线性
data: twoData.data.chartTwo.chartData.num.gear,
smooth: true, // 折线图平滑效果，变成曲线图
showSymbol:false, // 隐藏所有数据点
stack: "Total",//数据堆叠
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series",// 只显示选中的内容高亮
},
areaStyle: { // 设置填充区域的样式
opacity: 0.8, // 透明度
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{// 设置渐变:起始
offset: 0,
color: "rgb(255,191,0)",
},
{// 设置渐变：中间
offset: 0.5,
color: "rgb(224,62,76)",
},
{// 设置渐变：结束
offset: 1,
color: "rgb(1,191,236)",
},
]),
},
},
],
});
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize",()=>{
myChart.resize()
})
})
})
</script>
<style scoped>
</style>
17.图表5统计图
components中的itemFour.vue完整代码
<template>
<div>
<!--<h2>图表4</h2>-->
<div ref="chart" style="height: 340px">
图表的容器
</div>
</div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue"
import * as echarts from "echarts"
import axios from "axios";
let chart = ref();// 创建MOD
let fourData = reactive({}); // let作用域内，const定义常量
async function getState(){
fourData = await axios.get("/api/four/data")
}
onMounted(()=>{
// 调用函数请求
// getState();
//3.使用then(()=>{})回调函数进行数据处理
getState().then(()=>{
console.log("查看柱状图数据",fourData.data.chartFour.chartData)
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value)
// 使用刚指定的配置项和数据显示图表。
// 第三种写法： 钩子内
myChart.setOption({
title: { // 标题
text: '周回款统计',
textStyle: {
color: '#fff',
fontSize: 18,
},
top: '20px',
left: 'center', // 标题居中
},
tooltip: { // 提示框组件
trigger: "axis", // 触发类型
axisPinter:{ // 坐标轴指示器配置项
type: "shadow",
}
},
legend: {
top: "15%", // 距离容器上侧的距离
textStyle:{ // 文字样式
color: "#fff"
},
},
grid: {// 组件离容器的距离
top: "30%",
left: "1%",
right:"6%",
bottom:"5%",
containLabel: true, // grid区域是否包含坐标轴的刻度标签
},
xAxis:{
type:"category", // 类目轴
// boundaryGap:false, // X轴上ABC间隙
data: fourData.data.chartFour.chartData.day,
axisLine:{
lineStyle: {
color: "#fff",
}
},
},
yAxis: {
type: "value", // 数值轴
axisLine:{
lineStyle: {
color: "#fff",
}
},
},
series: [
{
name: "卫滨",
type: "bar",
data: fourData.data.chartFour.chartData.num.WeiBin,
stack: "total",// 数据堆叠
// barWidth: "50%",
label: { // 文本标签
show: true, // 开启：文本显示，总计合计
// position: 'top', // 标签位置
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series", // 只显示选中的内容高亮
}
},
{
name: "红旗",
type: "bar",
data: fourData.data.chartFour.chartData.num.HongQi,
stack: "total",// 数据堆叠
label: { // 文本标签
show: true, // 开启：文本显示，总计合计
// position: 'top', // 标签位置
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series", // 只显示选中的内容高亮
}
},
{
name: "牧野",
type: "bar",
data: fourData.data.chartFour.chartData.num.MuYe,
stack: "total",// 数据堆叠
label: { // 文本标签
show: true, // 开启：文本显示，总计合计
// position: 'top', // 标签位置
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series", // 只显示选中的内容高亮
}
},
{
name: "凤泉",
type: "bar",
data: fourData.data.chartFour.chartData.num.FengQuan,
stack: "total",// 数据堆叠
label: { // 文本标签
show: true, // 开启：文本显示，总计合计
// position: 'top', // 标签位置
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series", // 只显示选中的内容高亮
}
},
{
name: "辉县",
type: "bar",
data: fourData.data.chartFour.chartData.num.HuiXian,
stack: "total",// 数据堆叠
label: { // 文本标签
show: true, // 开启：文本显示，总计合计
// position: 'top', // 标签位置
},
emphasis: { // 设置高亮的图形样式和标签样式
focus: "series", // 只显示选中的内容高亮
}
},
],
});
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener("resize",()=>{
myChart.resize()
})
})
})
</script>
<style scoped>
</style>
完成图例
17.项目打包
由于使用Vue/cli脚手架，浏览器解析后缀.vue文件无法识别
但是 我们所写的项目今后是需要上公网让用户访问的 所以我们需要把项目放在性能更好的服务器上运行
还有就是 我们所写的是.vue文件 浏览器不认识 没有办法直接解析
所以我们就绪要对当前项目 进行打包 就是把项目编译成 html css js 方便我们把项目放到服务器上也方
便浏览器解析
打包流程
查看package.json中的命令
1.npm run build命令打包 但是会发现打包之后资源路径有问题
npm run build
成功后出现dist文件夹
2.修改静态资源路径 publicPath
静态资源路径出现问题：需新建项目中src/vue.config.js文件
module.exports = { lintOnSave:false, // 关闭检查 // 配置静态资源路径 : process判断当前环境 publicPath: process.env.NODE_ENV = "production" ? "./" : "/" }
node中全局变量process表示当前进程.env表示当前环境信息.NODE_ENV自定义变量 = 三元判断 是生产模式还是开发模式。
重新项目打包： npm run build
发现页面中内容为空问题
1、打开路由文件夹 router/index.ts
3.修改路由模式为hash
修改为hash模式
// 1.需要引入 import { createRouter, createWebHistory, createWebHashHistory } from 'vuerouter' // 2.修改配置 const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), routes })
再次npm run build打包
地图配置与打包
将地图数据放入后台接口中
在项目后端express中router文件夹下新建：map.js放置地图内容
1.需要要将前端assets中的China1.json.拷贝到后端Mock数据文件夹中
2.编写map.js
// 定义引入express// 定义引入express let express = require("express"); // 定义路由 let router = express.Router(); // 引入data.json let mapData = require("../Mock/china1.json"); // 设置当前路由:get('路由名',回调函数(请求request,响应response) router.get("/data",(req,res)=>{ // 响应内容 res.send({msg:"我是地图的路由地址",chinaData:mapData}) }) module.exports = router; // export default router;
3.引用路由文件map.js，注册路由
修改前端请求：
components/mapPage.vue中
注意：/api/map/data = "http://localhost:3333/map/data, 可以查看Vite.config.ts中设置
页面不显示 地图数据
mapPage.vue完整代码：
<template> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!--vue3.2中 id=‘’ 变更 ref=--> <div class="grid-content ep-bg-purple-light" ref="chart" style="width:100%;height:100%;"> </div> </template> <script setup> import {ref,reactive,onMounted} from 'vue' // 引入echarts核心模块 import * as echarts from 'echarts' // 还需引入本地地图文件 // import chinaMap from '../assets/china1.json' // 引入动态数据axios,二次封装 import axios from 'axios' let chart =ref(); // 创建DOM引用 let mapData = reactive({}); async function getState(){ mapData = await axios.get("/api/map/data") } // 使用生命钩子 onMounted(() => { getState().then(()=>{ console.log("map",mapData) // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('main')); // Vue3中： 需要引入 var myChart = echarts.init(chart.value) // 注册可用的地图 echarts.registerMap('china',mapData.data.chinaData); // 使用刚指定的配置项和数据显示图表。 myChart.setOption({ tooltip: { // 提示框组件 trigger: "item", }, title: { text: '国内城市', left: 'center', // 距离位置 textStyle: { // 文字设置 color: "#fff", fontSize:20, textShadowBlur: 20, // 阴影 textShadowColor:"#33ffff", //阴影颜色 } }, geo: { // 地理坐标系 tooltip: { show: true }, map: 'china', // 地图类型 itemStyle: { // 修改地图区域标签样式 areaColor: '#219edb', // 区域颜色 borderColor: '#00ffff', // 区域边框颜色 shadowColor: 'rgba(230,130,70,0.5)', // 阴影颜色 shadowBlur: 30, // 阴影模糊度 }, label: { // 标签：地图中的标签、文字 show: true, // 开启地图中的标签、文字等，(必须开启) color: '#fff', fontSize: 11, }, emphasis: { // 地图高亮状态的多边形和标签样式 focus:'self', // 当前高亮，其他淡出 label: { color: '#000', fontSize: 12, }, itemStyle: { areaColor: '#f60', borderColor: '#329edb', }, }, roam: true, // 地图可拖拽、平移 }, visualMap: { // 视觉映射效果：热度点、热度柱 type: 'continuous', // 必要设置：连续类型 min: 100, // 必要设置：最小 max: 10000, // 必要设置：最大 text: ['High', 'Low'], realtime: false, calculable: true, // 滑动效果 inRange: { // 热度过渡：颜色设置 color: ['lightskyblue', 'yellow', 'orangered'] }, textStyle: { color: '#fff' }, }, series: [{ // 系列：地图不需XY轴 type: 'effectScatter', // 图表类型:散点图scatter：用到坐标系设置 /*coordinateSystem: "geo", // 当前坐标系设置：经纬度定位 symbolSize: 30, // 大小*/ coordinateSystem: 'geo', // 当前坐标系设置：经纬度定位 geoIndex: 0, symbolSize:function (params){ // 气泡点特效 return (params[2] / 1000) * 1 + 5; // 1000越大越小,+5越大越大 }, itemStyle: { color:"#b02a02", }, encode: { tooltip: 2, }, data: [ // 展示数据项的名字，经纬度，数据量,热力量 {name: '北京', value: [116.46,39.92,4367]}, {name: '上海', value: [121.48,31.22,8675]}, {name: '深圳', value: [114.07,22.62,2461]}, {name: '广州', value: [113.23,23.16,187]}, {name: '西安', value: [108.45,34,375]}, ], /*[ // 展示数据项的名字，经纬度，数据量 {name:'河南省',value:[32300,4000]}, {name: '山东省',value: 21203}, {name: '四川省',value: 41203}, {name: '青海省',value: 31203}, ],*/ }, ], }); // 单图表响应式: 跟随浏览器大小改变 window.addEventListener('resize',()=>{ myChart.resize() }) }) }) </script> <style scoped> </style>
检查无误后：npm run build 打包项目
此处提醒：项目是vite还是vue/cli，打包有区别
打包报错问题：
语法检查问题: 要么<scripts steup lang="ts">,要么vite.config.ts中删除下面
再次检查和新建vue.config.js文件
运行测试：
npm run preview
配置vite打包入口
vite的配置都在根目录下面的vite.config.ts里面，在没有对其进行打包配置时，默认的打包的入口就是根目录的【index.html】。这时候我们直接运行 npm run build就会打包相应的文件：
（ps：为什么默认是.html文件那？因为vue是单页面应用也就是最后打包的html只有一个。vite也提供多入口，但我不再本文继续描述了）
但是如果我们的目录结构改变了 ，比如：
在此时打包就会报错：
原因就是默认的打包入口 根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：
build.rollupOptions.input即为打包的指定入口。
关于项目vite打包之后直接进入dist文件夹访问index.html时出现空白的问题，网上查找了很多也没有查找到相关资料解决，但是如果你用FTP上传到服务器上是可以正常访问的，所以也就没有管了。如果是用vue-cli创建的vue3项目，打包之后是可以正常访问的。
10月重点更新了rollupOptions分包配置，混淆器设置为minify: "terser"。但运行build时，打包速度很慢，要打包十几分钟才能打包好，不知道有设置过分包的朋友遇到过没
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 8月更新-自动导入ElementPlus组件，除了图标需要单独引用外，其他的都可以直接在页面上使用组件，会自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const isProduction = process.env.NODE_ENV === "production"
export default defineConfig({
base: "./", // 类似publicPath，'./'避免打包访问后空白页面，要加上，不然线上也访问不了
// 8月更新
productionSourceMap: !isProduction, //关闭生产环境下的SourceMap映射文件
// 8月更新-自动导入ElementPlus
// 需安装 npm install -D unplugin-vue-components unplugin-auto-import
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
// 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
"@": path.resolve(__dirname, "src"),
"@assets": path.resolve(__dirname, "src/assets"),
"@components": path.resolve(__dirname, "src/components"),
"@images": path.resolve(__dirname, "src/assets/images"),
"@views": path.resolve(__dirname, "src/views"),
"@store": path.resolve(__dirname, "src/store"),
},
},
// 8月更新，全局引入less
css: {
sourceMap: !isProduction, // css sourceMap 配置
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
},
javascriptEnabled: true,
},
},
},
build: {
outDir: "dist",
// 9月更新
assetsDir: "assets", //指定静态资源存放路径
sourcemap: false, //是否构建source map 文件
// 10月更新
minify: "terser", // 混淆器，terser 构建后文件体积更小，'terser' | 'esbuild'
chunkSizeWarningLimit: 1500, //chunk 大小警告的限制，默认500KB
rollupOptions: {
output: {
// 最小化拆分包
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
chunkFileNames: 'js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名，[name]表示文件名,[hash]表示该文件内容hash值
}
},
terserOptions: {
// 生产环境移除console
compress: {
drop_console: true,
drop_debugger: true,
},
// 10月更新
output: {
comments: true, // 去掉注释内容
},
},
},
server: {
https: false, // 是否开启 https
open: false, // 是否自动在浏览器打开
cors: true, // 允许跨域 8月更新
port: 3000, // 端口号
host: "0.0.0.0",
proxy: {
"/api": {
target: "", // 后台接口
changeOrigin: true,
secure: false, // 如果是https接口，需要配置这个参数
// ws: true, //websocket支持
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
// 引入第三方的配置
optimizeDeps: {
include: [],
},
});
项目中Vite.config完整代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 8月更新-自动导入ElementPlus组件，除了图标需要单独引用外，其他的都可以直接在页面上使用组件，会自动导入
// import AutoImport from 'unplugin-auto-import/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
const isProduction = process.env.NODE_ENV === "production"
// https://vitejs.dev/config/
export default defineConfig({
// 类似publicPath，'./'避免打包访问后空白页面，要加上，不然线上也访问不了
base:'./',// 配置公共路径：默认base: '/',绝对路径,
// @ts-ignore
productionSourceMap: !isProduction, //关闭生产环境下的SourceMap映射文件
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
// 跨域
server: { // 增：服务器设置
https: false, // 是否开启 https
open: false, // 是否自动在浏览器打开
cors: true, // 允许跨域 8月更新
// port: 3000, // 端口号
host: "0.0.0.0",
proxy: { // 自定义代理规则
'/api': {//代理标识，一般是每个接口前的相同部分
// 可以理解为:/api等于https://127.0.0.1:3333
target: 'http://localhost:3333',// 这里写的是访问后端IP接口的域名和端口号
// secure: true,
changeOrigin: true,// 允许跨域请求
secure: false, // 如果是https接口，需要配置这个参数
// 重写路径，替换请求地址中的指定路径
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
// 引入第三方的配置
/*optimizeDeps: {
include: [],
},*/
resolve: {
//配置根路径别名： import('@/pages/login/login.vue')
alias: {
// '@': fileURLToPath(new URL('./src', import.meta.url))
"@": path.resolve(__dirname, "src"),
// 配置图片要这样引用
"/img": "./src/assets",
}
},
build: { // 打包设置
// Template for index.html 入口配置
/*rollupOptions:{
// 原因就是默认的打包入口 根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：
input: 'src/pages/default/index.html'
},*/
// 混淆器，terser 构建后文件体积更小，'terser' | 'esbuild'
minify: 'terser', // 必须启用：terserOptions配置才会有效
chunkSizeWarningLimit: 1500, //chunk 大小警告的限制，默认500KB
rollupOptions: {
output: {
// 最小化拆分包
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
chunkFileNames: 'js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名，[name]表示文件名,[hash]表示该文件内容hash值
}
},
terserOptions: {
compress: {
// 生产环境时移除console.log调试代码
drop_console:true,
drop_debugger: true,
},
// 10月更新
output: {
comments: true, // 去掉注释内容
},
}
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${path.resolve('src/assets/lessVar.less')}";`
},
javascriptEnabled: true
}
}
}
})
18.服务器购买与连接
在购买ECS服务器后，系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通
过电脑上自带的终端工具访问云服务器，进行应用部署和环境搭建。
1. 在ECS实例列表页面，选择实例的所属地域。
2. 找到目标实例，然后在操作列选择【更多】> 【密码/密钥】 > 【重置实例密码】，然后在弹出的对
话框设置ECS实例的登录密码
3. 在弹出的页面，单击【立即重启】使新密码生效。
4. 在ECS实例列表页面，复制ECS实例的公网IP地址。
5. 连接远程桌面
（1）方式1 浏览器直接访问
即可连接
（2）远程桌面方式
在电脑的开始中搜索远程桌面
19.nginx服务器使用
Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。
代理服务器
代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。
注意
我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了
使用
1.解压出nginx得到如下内容
将dist文件夹放入nginx根目录下
2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字（名字随便起） 这个文件就是nginx的配置文件
修改新建的XXX.conf文件
3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动
// XXX自定义的文件名 ./nginx.exe -c ./conf/XXX.conf
4.打开浏览器输入localhost:80即可启动
查看阿里云的公网IP
使用小扩展
记得如果修改服务器内容了 要停止之后在重新启动
打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止
20. 项目运行
1.把我们打包好的dist放到根路径下
2.修改我们的.conf文件
3.配置端口
4.在电脑浏览器尝试使用 你的公网ip加端口访问
如不行 重新启动（不要忘了先关闭nginx） 运行浏览器即可看见
21.后端上线
安装nodejs
后端目录中启动nodejs
// 启动nodejs node index.js
如果前端设置了基准路径，修改公网IP
重新打包，将打包内容放置服务器dist目录下
关闭和启动nginx
// 关闭nginx: demo自定义 ./nginx.exe -c ./conf/demo.conf -s stop // 开启nginx ./nginx.exe -c ./conf/demo.conf
测试：浏览器输入公网IP
https://www.bilibili.com/video/BV14u411D7qK?p=69&spm_id_from=pageDriver&vd_source=e2cfe74d93fb5b3f60bd7487ede60218
完结撒花！~~
浙公网安备 33010602011771号