数据大屏项目

2022-12-02 vue 0 2,181

这是一个基于 Vue3、TypeScript、DataV、ECharts 框架的 ” 数据大屏项目 “,使用 ‘.vue’ 和 ‘.tsx’ 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。

启动项目

需要提前安装好 nodejs 与 yarn,下载项目后在项目主目录下运行 yarn 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后最好是手动全屏查看(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。

如果安装完依赖 @jiaminghi 报错 <template v-for> key should be placed on the <template> tag 类似的bug,我已经做了修复,大家把此工程目录下的 other_modules/@jiaminghi.rar 解压并替换掉 node_modules 里面的同名文件(或者手动修改,只需要把 v-for 移动到下方标签里,并删除 template 即可)

TSX与封装组件的使用

项目引入了 babel-plugin-jsx 依赖,可以直接使用 tsx 编写代码。 src/views/chart 下的文件使用了此方式编码,这里的文件专门处理数据内容,不涉及到任何的样式,并且返回的结构较为简单。

项目全局注册了 echart 组件,使用的时候大体方式如下:

setup(props) {
    // ....此处省略n行代码
    return () => {
        const height = "xxx"
        const width = "xxx"
        return <div>
          <echart ref={chartRef} height={height} width={width} />
        </div>
    }
}

复用图表组件

复用图表组件案例为中间部分的 任务通过率与任务达标率 模块,两个图表类似,区别在于颜色和主要渲染数据。只需要传入对应样式,然后在复用的组件 views/center/chart/draw.tsx 里进行接收并在对应位置赋值即可。

如:在调用处 views/center.vue 里去定义好数据并传入组件

//组件调用
<span>今日任务通过率</span>
<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>今日任务达标率</span>
<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import Chart from '../center/chart/draw'
components: {
  Chart
}
setup() {
    // ...
    const rate = reactive([ 
        {
            id: "centerRate1",
            tips: 60,
            ...
        },
            {
            id: "centerRate2",
            tips: 40,
            colorData: {
            ...
        }
        }
    ])
    return {rate, ....}
}

更换边框和图表

边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官网查看 如:

<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>

数据大屏项目

资源下载
免费资源
文件1地址点击下载
客服QQ:2405474279
付费资源
此资源仅限注册用户下载,请先
2405474279
收藏 (0) 点赞 (0) 资源下载

资源下载

资源名称: 数据大屏项目

资源简介:这是一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 ",使用 '.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。

其他信息:111

立即下载

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务