DataV+Echarts

最新推荐文章于 2024-05-09 12:05:56 发布
最新推荐文章于 2024-05-09 12:05:56 发布
阅读量1.5k 收藏 6
点赞数 1
文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64129060/article/details/129784132
版权

1. 安装 vue3

也就是安装了一下vue3，但是 dataV 和 Echarts 的学习并没有使用vue的脚手架去创建一个项目。
原因有两点：

  1. dataV 目前对 vue3 的支持并不是很友好，主要还是基于 vue2 框架的一个组件库。
  2. 脚手架创建 vue 项目确实会使开发更加的有逻辑性，方便和快捷，也有着其特定的功能（下面会将关于 vue 开发的结构）。但是，首先，我不是一个前端工程师，我只需要将我想要展示的东西搞出来就好，更专业的事情应该交给更专业的人来做；再次，实在不想装一些我不经常用的东西（纯属个人强迫症）。

当然，你们如果想用 vue 脚手架来构建项目 完全可以，和导入 vue.js 来做开发的方法大致都是差不多的，只是 vue 项目有其自己的结构和写法，自行百度或者问 chatGPT。

1.1 关于node.js版本的升级

由于我是用的是Ubuntu20.04
Ubuntu 20.04的官方仓库中提供了一个相对较旧的Node.js版本，如果需要升级Node.js到最新版本，可以进行下面的操作
注意：
在升级Node.js之前，建议备份重要的项目文件和数据，以免升级过程中出现意外情况导致数据丢失

  1. 确认已安装curl和gnupg2工具，如果没有安装，可以使用以下命令安装：
sudo apt update
sudo apt install curl gnupg2
  1. 添加Node.js官方PPA（Personal Package Archive）软件源，并更新软件包列表：
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt update
# 这里使用的是Node.js 16.x版本
# 如果需要升级到18版本，可以将上述命令中的setup_16.x替换成setup_18.x
  1. 安装Node.js和npm：
sudo apt install nodejs
# 安装 nodejs 会自己附带npm的安装
  1. 验证Node.js和npm是否安装成功：
node -v
npm -v
# 如果输出了Node.js和npm的版本号，则说明安装成功

2. dataV

简单说就是 vue 的一个组件，对 vue 组件有了解的话，应该就会对 dataV 会有一个很好的理解，当然，肯定就会用啦！

2.1 vue 组件

官方文档链接

2.1.1 vue 组件的由来

前端开发中经常会遇到代码复用，比如一个京东购物网站的导航栏（顶部）在每一个页面都存在（也有不存在的，不要杠。。。），就可以理解为是一种代码复用的结果（当然，我也不知道京东用了什么技术，也不要抬杠，就是举个例子），就是通过复用导航栏的那一部分的代码，比如 html、css、js 等，来达到每个页面具有相同结构的目的。
然而有时代码复用，可能由于代码很长，致使阅读代码很困难等等，是一个又耗时又费力的操作，两种解决方案：

  1. css 和 js 的模块化管理（主要是 js）
  2. vue 组件化编程

这里可能涉及一个单页应用和多页应用的概念，目前还不怎么理解

2.1.2 vue 组件

简单理解就是：
用来实现局部（特定）功能效果的代码集合

组件的组织

上面的图来自 vue 官方，简单理解就是：

  1. 其中根节点是一个Vue实例
  2. 其子节点就是一个个的组件
  3. 子节点之间存在父子关系，也就是说vue组件也存在父子关系

2.1.3 非单页面组件

非单页面组件：一个文件中可以包含有n个组件
单文件组件：一个文件中只包含有1个组件（这种通常在使用vue脚手架创建的vue项目中使用）
…
这里我们使用非单页面来创建组件，这个懂了，单文件组件就很简单了

几个注意点：

  1. 关于组件名：
    一个单词：
    第一种写法（全小写）：test
    第二种写法（首字母大写）：Test
    多个单词组成时：
    第一种写法（全小写）：mytest
    第二种写法（kebab-case命名）：my-test
    第三种写法（CamelCase命名）：MyTest（需要Vue脚手架支持）
    注：可以使用 name 配置项指定组件在开发者工具中呈现的名字，一般在大项目中会使用
  2. 关于组件标签：
    第一种写法：<test> </test>
    第二种写法：<test/>
    注：不使用脚手架时，test/ 会导致后续组件不能渲染
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入 vue.js -->
    <script src="./js/vue@2.7.14.js"></script>

</head>

<body>
    <div id="root">

        <test></test>
        <!-- <test inline-template>
            <div>
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
            </div>
        </test> -->
    </div>





</body>
<script type="text/javascript">

    /*
    VueComponent：
        1. test组件的本质就是名为 VueComponent 的构造函数，即 test 组件是 VueComponent 的实例对象
        2. Vue官方给的构建组件的方式为：

            // 定义一个名为 button-counter 的新组件
            Vue.component('button-counter', {
                data: function () {
                    return {
                        count: 0
                    }
                },
                template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
            })

            <div id="components-demo">
            <button-counter></button-counter>
            </div>

    关于 this 的指向
        (1) 组件配置（也就是说VueComponent的实例对象）中的 this
            data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是【VueComponent实例对象】
        (2) new Vue(options)配置中：
            data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是【Vue实例对象】
    */


    // 注册、声明一个组件
    const test = Vue.extend({

        // 定义组件在Vue开发者工具中的显示名称
        // 但是在 html 中使用时 还是vue实例中注册的组件名称
        name: 'mytest',

        // 组件中的 html 模板
        template: `
            <div>
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
            </div>
        `,

        // data必须是一个函数
        // data: function () {}
        data() {
            return {
                name: ' xiaoming',
                age: 20
            }
        }
    })

    /*
    组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
    例如 data、computed、watch、methods 以及生命周期钩子等。
    仅有的例外是像 el 这样根实例特有的选项。
    */

    // 全局注册
    // Vue.component('test', test)

    var vm = new Vue({
        el: '#root',

        // 注册组件 （局部注册）
        components: {

            // 组件名称: 声明的组件
            // html 文件中引用组件的方式就是 <组件名称></组件名称>
            // 一般情况下 组件名称和我们想绑定的组件名称是一样的
            test: test
            // xxx: test    可以更换 test 组件的名称
            // test         组件名称也可以不写，相当与 test: test
        }
    })
</script>

</html>

2.1.4 组件模板的引用（或者说写法）

2.1.5 组件的嵌套

注意：在组件被嵌套前一定是要先被创建好。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入 vue.js -->
    <script src="./js/vue@2.7.14.js"></script>

</head>

<body>
    <div id="root">

        <test></test>
    </div>
</body>

<script type="text/javascript">

    const test1 = Vue.extend({
        template: `
            <div>
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
            </div>
        `,
        data() {
            return {
                name: ' xiaohong',
                age: 20
            }
        }
    })

    // 注册、声明一个组件
    const test = Vue.extend({
        template: `
            <div>
                <p>姓名：{{name}}</p>
                <p>年龄：{{age}}</p>
                <test1></test1>
            </div>
        `,
        data() {
            return {
                name: ' xiaoming',
                age: 20
            }
        },

        // A 嵌套 B 就在 A 的组件配置中注册 B
        // 并且在 A 的 template 中使用 B
        components: {
            test1
        }
    })

    var vm = new Vue({
        el: '#root',

        // 注册组件 （局部注册）
        components: {
            test
        }
    })
</script>

</html>

2.1.6 单文件组件

单文件组件是由 .vue 类型文件，他不是 js 文件 浏览器没办法去解析这个文件。
两种方法：

  1. Vue CLI，基于 webpack
  2. Vite 前端工具链

（1）文件结构

# 构建 vue 实例
main.js
# 组件的 leader
App.vue
# 单个组件文件
test1.vue
test2.vue
# html 文件作为容器
index.html
......

（2）文件中的内容

下面只是简单表明一下 单文件组件怎么写，没有创建 vue 工程 代码是跑不成功的

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <!-- 使用App组件 -->
        <App></App>
    </div>

    <script src="text/javascript" src="./main.js"></script>
</body>

</html>
<!-- --------------------------------------------------------------- -->
<!-- 组件1.vue -->

<template>
    <div class="demo1">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="showName">点我显示姓名</button>
    </div>

</template>

<script>
    // 暴露
    // 有三种暴露方式，下面的额是默认方式
    // 不同的暴露方式导入方式也有所不同
    export default ({
        name: 'test1',
        data() {
            return {
                name: ' xiaoming',
                age: 20
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        }
    })
</script>

<style>
    .demo {
        background-color: blueviolet;
    }
</style>
<!-- --------------------------------------------------------------- -->
<!-- App.vue -->

<template>
    <div class="demo1">
    <test1></test1>
    </div>

</template>

<script>
    import test1 from './test1.vue'

    export default ({
        name: 'App',
        components: {
            test1
        }
    })
</script>
<!-- --------------------------------------------------------------- -->
<!-- main.js -->

import App from './App.vue'
 
new Vue ({
    el:'#root',
    components:{App}
})

2.2 Vue 大屏数据展示组件库 dataV

2.2.1 CSS中的flex布局

大屏可视化的一个重点就是 页面布局 ，此次基于dataV的大屏可视化项目就是采用flex对页面进行的整体布局
布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。
2009年，W3C提出了一种新的方案—flex布局，可以简便、完整、响应式地实现各种页面布局。

flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

  1. 任何一个容器都可以指定为flex布局：display: flex;
  2. 行内元素也可以使用Flex布局：display: inline-flex;

参考文档

2.2.2 flex容器的6个属性

(1) flex-direction

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

/* 它可能有4个值。*/
/* row（默认值）：主轴为水平方向，起点在左端。 */
/* row-reverse：主轴为水平方向，起点在右端。 */
/* column：主轴为垂直方向，起点在上沿。 */
/* column-reverse：主轴为垂直方向，起点在下沿。 */

(2) flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

/* 它可能取三个值。 */
/* （1）nowrap（默认）：不换行。 */
/* （2）wrap：换行，第一行在上方。 */
/* （3）wrap-reverse：换行，第一行在下方。 */

(3) flex-flow

.box {
    flex-flow: <flex-direction> <flex-wrap>;
}

/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */

(4) justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

/* 它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 */
/* flex-start（默认值）：左对齐 */
/* flex-end：右对齐 */
/* center： 居中 */
/* space-between：两端对齐，项目之间的间隔都相等。 */
/* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */

(5) align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

/* 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。 */
/* flex-start：交叉轴的起点对齐。 */
/* flex-end：交叉轴的终点对齐。 */
/* center：交叉轴的中点对齐。 */
/* baseline: 项目的第一行文字的基线对齐。 */
/* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */

(6) align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}


/* 该属性可能取6个值。 */
/* flex-start：与交叉轴的起点对齐。 */
/* flex-end：与交叉轴的终点对齐。 */
/* center：与交叉轴的中点对齐。 */
/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */
/* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
/* stretch（默认值）：轴线占满整个交叉轴。 */

2.2.3 flex项目上的6个属性

也就是说在具体应用时，有下面6个属性
order、flex-grow、 flex-shrink、 flex-basis、 flex、 align-self

.item {
    order: <integer>;
}

/* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */


.item {
    flex-grow: <number>; /* default 0 */
}

  /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
  /* 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。 */
  /* 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 */

.item {
    flex-shrink: <number>; /* default 1 */
}

/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */
/* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。 */
/* 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 */
/* 负值对该属性无效。 */

.item {
    flex-basis: <length> | auto; /* default auto */
}

/* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。 */
/* 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 */
/* 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 */

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
/* 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 */
/* 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 */

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

/* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 */
/* 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
/* 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 */

2.2.4 flex布局在本项目中的应用

注意点：

  1. 使用百分比的形式设置特定参数的值
  2. flex容器的无法实现多层嵌套，要实现多层嵌套需要设置盒子模型为flex容器（不太好理解，可以看下面 class="middle" 中的代码）
  3. dataV 边框样式官方参考文档
<!-- .top {
	width: 100%;
	height: 6%;
	margin-top: 10px;
	display: flex;
	/* 两端对齐 */
	justify-content: space-between;
	} -->
<div id="root">

    <dv-full-screen-container>

        <div class="top">
            <!-- 
                style="flex:0 1 30%"
                这是一个CSS的样式属性，表示一个元素的伸缩性，具体解释如下：
                flex-grow: 0：该元素不会被拉伸。
                flex-shrink: 1：该元素可以被收缩。
                flex-basis: 30%：该元素的初始大小为其父容器的30%。

                综合起来，这个样式属性的作用是，将该元素的初始大小设置为其父容器宽度的30%，
                同时如果该元素在布局时需要被收缩，它会尽可能地收缩以适应父容器的大小。
                -->
            <div style="flex:0 1 30%">
                <dv-decoration-8 style="width:100%;height:50%;" />
            </div>
            <!-- 
                margin（外边距）是指元素周围的空白区域，用于控制元素与其他元素之间的距离。

                margin的使用方式如下：
                margin: 上 右 下 左;
                上、右、下、左指定了元素的四个方向上的外边距，可以用长度值（如px、em等）或百分比来指定。

                设置元素的上下外边距和左右外边距：
                margin: 上下 左右;

                分别设置元素的四个方向上的外边距：
                margin-top: 上;
                margin-right: 右;
                margin-bottom: 下;
                margin-left: 左;
            -->
            <div style="flex:0 1 40%; margin-top: 20px;">
                <dv-decoration-5 style="width:100%;height:100%;" />
            </div>

            <div style="flex:0 1 30%">
                <dv-decoration-8 :reverse="true" style="width:100%;height:50%;" />
            </div>

            <div class="center-title">
                额河数据可视化平台
            </div>

        </div>

        <!-- .middle {
            width: 100%;
            height: 90%;
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            /* 居中对齐 */
            justify-content: space-between;
        } -->
        <div class="middle">

            <div style="flex:0 1 25%;">
                <dv-border-box-3 style="width: 100%; height: 100%;">
                    dv-border-box-3
                </dv-border-box-3>
            </div>

            <div style="flex:0 1 75%; display: flex; flex-direction: column;">

                <div style="flex:0 1 65%; display: flex; flex-direction: row;">

                    <div style="flex:0 1 65%;">
                        <dv-border-box-3 style="width: 100%; height: 100%;">
                            dv-border-box-3
                        </dv-border-box-3>
                    </div>

                    <div style="flex:0 1 35%; display: flex; flex-direction: column;">
                        <div style="flex:0 1 50%">
                            <dv-border-box-3 style="width: 100%; height: 100%;">
                                dv-border-box-3
                            </dv-border-box-3>
                        </div>
                        <div style="flex:0 1 50%">
                            <dv-border-box-4 :reverse="true" style="width: 100%; height: 100%;">
                                dv-border-box-4
                            </dv-border-box-4>
                        </div>
                    </div>

                </div>

                <div style="flex:0 1 35%;">
                    <dv-border-box-4 style="width: 100%; height: 100%;">
                        dv-border-box-4
                    </dv-border-box-4>
                </div>

            </div>
        </div>

    </dv-full-screen-container>

</div>

下面是布局后的效果图：

在这里插入图片描述

dataV中的飞线图

原理与相关说明：

  1. 背景是一张图片，飞线的起点和终点是图片中的相对坐标（默认）
  2. 组件提供了dev模式 ，可以帮助快速确定飞线点位置
  3. 官方参考文档

dataV中的图表

官方：图表组件基于 Charts 封装，其也提供了许多常用的图表样式，用法和 echarts 差不多，但是在访问其js文件时，出现了404错误。。。所以还是使用 echarts 吧
官方链接

3. dataV结合Echarts的使用

echarts官网
echarts官方文档
echarts的js文件

3.1 vue项目中或者TS环境下的使用

由于本次项目并没有在此环境下进行开发，所以不做介绍，官方文档 写的很清楚。

3.2 在原生js环境下的使用

需要注意的一点就是，echarts 的 js 需要在 vue 实例构建完成之后，也就是说，其要放在 vue 实例构建 之后，否则可能会导致渲染失败。

<!-- 这里的尺寸之所以采用百分比的形式来表示
	是因为其在一个 flex 容器下设置的 echarts 图表
	可以使用 px -->
<div id="main" style="width: 100%;height:100%;"></div>
<div id="main1" style="width: 50%;height:100%;"></div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'dark');
    var myChart1 = echarts.init(document.getElementById('main1'), 'dark');

    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '',
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
            }
        ]
    };
    var option1 = {
        backgroundColor: '',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
    
</script>

效果如下图黄色圈起来的部分

在这里插入图片描述

3.3 使用vue非单页面组件的方式使用

<!-- 一般情况下 应该给组件一个盒子或者容器 -->
<div style="width: 25%;height:90%;">
	<test></test>
</div>

<script>
const test = Vue.extend({
    template: `
    <div id="main3" style="width: 100%;height:100%;"></div>
    `,

    // data 应以函数的形式返回值
    data() {
        return {
            option: {
                backgroundColor: '',
                title: {
                    text: 'Nightingale Chart',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Area Mode',
                        type: 'pie',
                        radius: [20, 140],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: [
                            { value: 30, name: 'rose 1' },
                            { value: 28, name: 'rose 2' },
                            { value: 26, name: 'rose 3' },
                            { value: 24, name: 'rose 4' },
                            { value: 22, name: 'rose 5' },
                            { value: 20, name: 'rose 6' },
                            { value: 18, name: 'rose 7' },
                            { value: 16, name: 'rose 8' }
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        // 在生命周期中挂载图表
        var myChart = echarts.init(document.getElementById('main3'), 'dark');
        myChart.setOption(this.option)
    }
})

var vm = new Vue({
    el: '#root',
    // 注册组件
    components: {
        test,
    }
})
</script>

在这里插入图片描述

努力不被AI代替的小杨
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
大屏可视化vue+dataV+echarts
06-03
大屏可视化vue+dataV+echarts
VUE+DataV+ECharts组合页面制作看板
06-30
VUE+DataV+ECharts组合页面制作看板
echarts+DataV的用法
敲代码无敌小奶龙的博客
10-20 3750
echarts+DataV的使用
ECharts与DataV：数据可视化的得力助手
letterljhx的博客
11-24 1318
ECharts与DataV：数据可视化的得力助手
前端炫酷大屏VUE+DataV+Echarts【已完结】_datav大屏 vue界面demo(1)
最新发布
2401_84617533的博客
05-09 1062
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。技术是没有终点的，也是学不完的，最重要的是活着、不秃。
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
商务合作/软件定制/学习交流
03-10 1万+
Vue3+TS+DataV+Echarts搭建数据大屏模板
33.大数据可视化技术--datav、echarts
零零天
01-21 5915
可视化概述 Echarts 上一篇 32.python爬虫入门
基于 Vue、Datav、Echart 框架的 “ 数据大屏项目 “，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换
lchmyhua88的博客
12-03 534
基于 Vue、Datav、Echart 框架的 "数据大屏项目"，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改
vue+echarts+DataV，数据可视化系统.zip
06-09
vue+echarts+DataV，数据可视化系统.zip
基于Vue.js与DataV+Echarts技术的大数据可视化屏幕源码
03-25
项目概述：本项目采用Vue.js结合DataV与Echarts技术，实现了一套大数据可视化展示屏幕的源码。主要编程语言为JavaScript，涉及的技术栈包括Vue、JavaScript和HTML。项目文件结构清晰，包含57个文件，其中Vue文件20个...
echarts+echarts-gl实现带有散点、路径的3d地球
07-22
该资源主要是使用echarts+echarts-gl实现带有散点、路径的3d地球的简单示例代码 效果可见本人的一篇文章 https://blog.csdn.net/weixin_45669156/article/details/125932601?spm=1001.2014.3001.5502 文章提到的...
【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放
04-08
用了vue - echarts - datav-elementul大屏数据可视化方案，包含屏幕适配方案等比例缩放， 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写css定死，通过屏幕大小改变对应等比例缩放，达到屏幕适配效果 为了让大家直观的看到所有的代码，所以结构方法等就不分各个组件引入了，会很麻烦要找哪是哪，我直接把所有的图都写在了一个vue组件内。并配上注释，相信大家可以很容易找到哪里对应哪里区域
Vue3/ECharts5数据可视化大屏展示项目案例源码.zip
05-22
Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引入的方式，在实际运用中请使用可以按需引入。Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引入的方式，在实际运用中请使用可以按需引入。 Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引
dataV:数据可视化展示系统，使用vue，iview，vue-echarts，echarts，vue-video-player开发，具有各种基本图表，地图展示，视频监控等功能
03-11
datav大数据可视化系统 iview版本2 第一版请看分支 这一版本主要使用开发同样采用vue，vue-echarts，echarts开发，增加了vue-video-player播放视频流，增加了视频监控。 如何使用 git clone https://github.com/fuyi501/dataV.git npm install npm run serve 效果图 后面增加。。。 :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy: 开发工具 主要采用echarts开发， echarts开发起来很方便，文档也很全，可以直接使用vue+echarts开发。 不过vue中更新数据之后需要图表及时更新，我们使用echarts的话，需要自己的封装组件实现动态刷新vue-echarts使用vue-echarts可以直接实现目的，所以整个系统主要采用vue-echarts开发。 但是里面还有一个问题是地图的使用， vue-echa
echarts map data（中国省市+世界）
07-02
echarts map data（中国省市+世界），取自echarts github，官网已经禁用下载地图，这个数据应该是旧版的，最低分分享。
可视化大屏Vue3基于Vue3、Typescript、DataV、ECharts5框架的大数据可视化（大屏展示）项目
10-21
可视化大屏Vue3版本终于发布啦~这是一个基于Vue3、Typescript、DataV、ECharts5框架的大数据可视化（大屏展示）项目。
react+datav+echarts实现可视化数据大屏
热门推荐
m0_58002043的博客
12-14 2万+
最近有点闲，就学习了下react，没想到就把react学完了，觉得还不错，就打算出一把react+datav的简易版可视化数据大屏供大家做个参考。 📓 datav框架 📓 echarts 2，路由设计 📓在路由上，我是绑定一个index的路由作为组件，然后在index添加自适应的全局容器，当容器设置完成后，就在就在将其他的小的模块给一个个导入进来，
基于VUE + Echarts 实现可视化数据大屏环保可视化
qq_365392777
10-23 1974
前言???? 基于 vue、datav、Echart 框架的大数据可视化(大屏展示)源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，EChart...
datav+echart
07-27
Datav是一个数据可视化工具，而ECharts是其所基于的一种可视化库。Datav提供了丰富的图表组件和交互功能，使用户能够灵活地创建各种类型的数据可视化展示。而ECharts则是Datav使用的底层可视化库，它提供了强大的图表绘制功能和丰富的图表类型，包括折线图、柱状图、饼图等。通过Datav和ECharts的结合使用，用户可以方便地进行数据可视化的设计和展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值