代码拉取完成,页面将自动刷新
一个 Vue 3+ECharts 的 Demo, 效果如下:
> npm create vite@latest
安装方式如下:
> npm install echarts
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
创建 index.css
文件
@tailwind base;
@tailwind components;
@tailwind utilities;
在 main.js
中进行引用
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
normalize.css
> npm install --save normalize.css
> npm install vue-router@4
<template>
<div ref="mychart" style="width: 450px; height: 350px;">
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 引入 Echarts
import * as echarts from 'echarts'
//导入 option 数据
import pie from '@/assets/data/pie'
//获取 Dom 元素
const mychart = ref(null)
onMounted(() => {
// 基于准备好的dom,初始化echarts实例
let mycharts = echarts.init(mychart.value)
// 绘制图表
mycharts.setOption(pie)
})
</script>
<style lang="less" scoped>
</style>
其中 option
数据可单独包存在一个 js 文件中,也可以直接插入到组件代码中,如下:
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
/* 通过 ref 获取 Dom 元素: 【通过 ref 获取 DOM元素【Vue3 Composition API】】
https://www.bilibili.com/video/BV1Uq4y1L7oj/?share_source=copy_web&vd_source=11797d2715355519fb920653c1a14e31 */
const mychart = ref(null);
onMounted(() => {
console.log(mychart.value);
let mycharts = echarts.init(mychart.value);
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
series: [
{
type: "gauge",
axisLine: {
lineStyle: {
width: 30,
color: [
[0.3, "#67e0e3"],
[0.7, "#37a2da"],
[1, "#fd666d"],
],
},
},
pointer: {
itemStyle: {
color: "inherit",
},
},
axisTick: {
distance: -30,
length: 8,
lineStyle: {
color: "#fff",
width: 2,
},
},
splitLine: {
distance: -30,
length: 30,
lineStyle: {
color: "#fff",
width: 4,
},
},
axisLabel: {
color: "inherit",
distance: 40,
fontSize: 10,
},
detail: {
valueAnimation: true,
formatter: "{value} km/h",
color: "inherit",
},
data: [
{
name: "Speed",
value: 70,
detail: {
fontWeight: "normal",
fontSize: 22,
},
},
],
},
],
};
setInterval(function () {
mycharts.setOption({
series: [
{
data: [
{
name: "Speed",
value: +(Math.random() * 100).toFixed(2),
detail: {
fontWeight: "normal",
fontSize: 22,
},
},
],
},
],
});
}, 2000);
mycharts.setOption(option);
// 图表大小自适应
window.addEventListener("resize", function () {
mycharts.resize();
});
});
</script>
输入用户名 admin 与密码 1234 将跳转至主界面
增加了 Side Menu,新的 demo 如下:
文件上传:
<n-upload
action="/api/upload"
list-type="image"
v-model:file-list="fileList"
show-download-button
:create-thumbnail-url="createThumbnailUrl"
@download="handleDownload"
>
<n-button>上传文件</n-button>
</n-upload>
文件下载:
function handleDownload(file) {
console.log(file.name);
downloadFile(file.name).then((res) => {
if (res.status == 200) {
// 文件下载功能
const blob = new Blob([res.data]);
const downloadElement = document.createElement("a");
const href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = file.name;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
message.success(`下载成功:${file.name}`);
}
});
}
App.vue
文件如以下格式:
<script setup>
</script>
<template>
<n-dialog-provider>
<n-message-provider>
<router-view></router-view>
</n-message-provider>
</n-dialog-provider>
<!-- <router-view></router-view>7 -->
</template>
<style scoped>
</style>
其中最终要的是在 代码中添加 <n-dialog-provider></n-dialog-provider>
标签与 <n-message-provider></n-message-provider>
标签
<!-- 新功能探索界面 -->
<template>
<n-button @click="handleConfirm">
警告
</n-button>
</template>
<script setup>
import { useDialog, useMessage } from 'naive-ui'
const dialog = useDialog();
const message = useMessage();
function handleConfirm() {
dialog.warning({
title: "警告",
content: "你确定?",
positiveText: "确定",
negativeText: "不确定",
onPositiveClick: () => {
message.success("确定");
},
onNegativeClick: () => {
message.error("不确定");
}
});
}
</script>
<style lang="scss" scoped></style>
听说用主要是后台的原因,修改decodeURI()
可以解决mock/index.js
代码如下:
let uploading = multer({
dest: "./mock/upload",
// 设定限制,每次最多上传1个文件,文件大小不超过1MB
limits: { fileSize: 10000000, files: 1 },
fileFilter(req, file, callback) {
// 解决中文名乱码的问题
// latin1 是一种编码格式
file.originalname = Buffer.from(file.originalname, "latin1").toString(
"utf8"
);
callback(null, true);
},
})
当然也可以直接下载压缩包
git clone git@gitee.com:code_from_qh/vue3-echarts-demo.git
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
package-lock.json
文件与node_modules
文件夹删除(根目录下和/mock/目录下都有)cnpm install
npm run dev
cnpm 的安装方式:
npm install cnpm -g --registry=https://registry.npm.taobao.org
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。