vue使用datav+echarts

已于 2022-11-16 10:19:32 修改
阅读量2k 收藏 19
点赞数 7
文章标签： echarts vue.js javascript big data
于 2022-11-16 10:17:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53485256/article/details/127878499
版权

一.分别使用下面两句下载datav和echarts

npm install echarts --save
npm install @jiaminghi/data-view

二.在main.js文件中全局注册组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import dataV from '@jiaminghi/data-view'
// 引入 echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.use(dataV)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三.准备工作，因为没有对接后端所以只能使用静态文件

1.使用datav中的一些组件需要准备的文件，我们创建一个config.js,里面的config1~8都是为各datav各组件准备的不同的数据格式，每个组件需要的数据格式和写法不太一样，具体可以参考官方文档里的示例datav官网地址

const config1={} 
const config2={
    header: ['列1', '列2', '列3'],
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3']
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
    carousel: 'page'
}
const config3={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}
const config4={}
const config5={
  points: [
    {
      name: '郑州',
      coordinate: [0.48, 0.36],
      icon: {
        src: require('@/assets/mapCenterPoint.png'),
        width: 30,
        height: 30
      },
      text: {
        color: '#fb7293'
      }
    },
    {
      name: '新乡',
      coordinate: [0.52, 0.23]
    },
    {
      name: '焦作',
      coordinate: [0.43, 0.29]
    },
    {
      name: '开封',
      coordinate: [0.59, 0.35]
    },
    {
      name: '许昌',
      coordinate: [0.53, 0.47]
    },
    {
      name: '平顶山',
      coordinate: [0.45, 0.54]
    },
    {
      name: '洛阳',
      coordinate: [0.36, 0.38]
    },
    {
      name: '周口',
      coordinate: [0.62, 0.55]
    },
    {
      name: '漯河',
      coordinate: [0.56, 0.56]
    },
    {
      name: '南阳',
      coordinate: [0.37, 0.66]
    },
    {
      name: '信阳',
      coordinate: [0.55, 0.81]
    },
    {
      name: '驻马店',
      coordinate: [0.55, 0.67]
    },
    {
      name: '济源',
      coordinate: [0.37, 0.29]
    },
    {
      name: '三门峡',
      coordinate: [0.20, 0.36]
    },
    {
      name: '商丘',
      coordinate: [0.76, 0.41]
    },
    {
      name: '鹤壁',
      coordinate: [0.59, 0.18]
    },
    {
      name: '濮阳',
      coordinate: [0.68, 0.17]
    },
    {
      name: '安阳',
      coordinate: [0.59, 0.10]
    }
  ],
  lines: [
    {
      source: '新乡',
      target: '郑州'
    },
    {
      source: '焦作',
      target: '郑州'
    },
    {
      source: '开封',
      target: '郑州'
    },
    {
      source: '许昌',
      target: '郑州'
    },
    {
      source: '平顶山',
      target: '郑州'
    },
    {
      source: '洛阳',
      target: '郑州'
    },
    {
      source: '周口',
      target: '郑州'
    },
    {
      source: '漯河',
      target: '郑州'
    },
    {
      source: '南阳',
      target: '郑州'
    },
    {
      source: '信阳',
      target: '郑州'
    },
    {
      source: '驻马店',
      target: '郑州'
    },
    {
      source: '济源',
      target: '郑州'
    },
    {
      source: '三门峡',
      target: '郑州'
    },
    {
      source: '商丘',
      target: '郑州'
    },
    {
      source: '鹤壁',
      target: '郑州'
    },
    {
      source: '濮阳',
      target: '郑州'
    },
    {
      source: '安阳',
      target: '郑州'
    }
  ],
  icon: {
    show: true,
    src: require('@/assets/mapPoint.png')
  },
  text: {
    show: true,
  },
  bgImgSrc: require('@/assets/map.jpg')
}

const config6={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png')
  ],
  showValue: true
}

const config7={
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    },
  ],
  unit: 'ml'
}
const config8={
    data: [66]
}

export { config1,config2,config3,config4,config5,config6,config7,config8}

2.datav内置的图表很多，但有的时候我们还是需要使用echarts来丰富图表，在使用datav的同时，我们想要使用echarts里的图表时需要将其写成组件，在components文件夹下创建echarts文件夹在里面创建line.vue文件，文件内容如下

<template>
        <div id="echartsID">

        </div>
</template>

<script>
export default {
    mounted() {
        this.echarts()
    },
    methods: {
        echarts() {
            let myChart = this.$echarts.init(document.getElementById('echartsID'))
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['预测', '实际',],
                    bottom: 'auto',
                    textStyle: { //图例文字的样式
                        color: 'white',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7'],
                    axisLabel: {
                        rotate: 12,
                        textStyle: { //图例文字的样式
                            color: 'white',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: { //图例文字的样式
                            color: 'white',
                        },
                    },
                },
                series: [
                    {
                        name: '预测',
                        type: 'line',

                        smooth: true,
                        data: [120, 132, 200, 810, 390, 230, 210]
                    },
                    {
                        name: '实际',
                        type: 'line',

                        smooth: true,
                        data: [220, 182, 220, 930, 290, 330, 310]
                    }
                ]
            });
        }
    },
}
</script>

<style scoped>
#echartsID {
    width: 90%;
    height: 80%;
}
</style>

3.还有一些静态图片，在assets文件夹下放入图片文件“map.jpg”、“mapCenterPoint.png”、“mapPoint.png”,图片自取静态图片地址

四.准备工作做好了就可以开始写测试文件了，我是直接在HomeView.vue里写的

<template>
  <dv-full-screen-container class="container">
    <div class="content">
      <dv-border-box-11 title="中国河南省">
        <div class="container laoda">
          <div class="box left">
            <dv-border-box-1 class="border-box">
              <dv-water-level-pond :config="config8" class="charts" style="height:280px" />
            </dv-border-box-1>
            <dv-border-box-8 class="border-box">
              <dv-scroll-board :config="config2" class="charts" style="height:280px" />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
              <!-- <dv-scroll-ranking-board :config="config3" class="charts" style="height:280px" /> -->
              <eline class="charts"></eline>
            </dv-border-box-1>
          </div>
          <div class="box center">
            <dv-border-box-1 class="border-box">
                <dv-flyline-chart-enhanced :config="config5" :dev="true" class="charts" style="height:800px"/>
            </dv-border-box-1>
        </div>
        <div class="box right">
            <dv-border-box-1 class="border-box">
                <dv-scroll-ranking-board :config="config3" class="charts" style="height:280px" />
            </dv-border-box-1>
             <dv-border-box-8 :reverse="true" class="border-box">
                <dv-conical-column-chart :config="config6" class="charts" style="height:280px;" />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
                <dv-capsule-chart :config="config7" class="charts" style="height:280px" />
            </dv-border-box-1>
        </div>
        </div>
      </dv-border-box-11>
    </div>
  </dv-full-screen-container>
</template>
<script>
import eline from '../../src/components/echarts/line.vue'
import { config1, config2, config3, config4, config5, config6, config7, config8 } from "./config.js"
export default {
  components:{
      eline
		},
  name: "test1",
  data: function () {
    return {
      config1,
      config2,
      config3,
      config4,
      config5,
      config6,
      config7,
      config8
    }
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  background-color: #01132C;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 25%;
}
.center{
    width: 50%;
}
.charts {
  width: 90%;
  margin: 5%;
}

.laoda {
  margin: 5vh 2.5vw;
  width: 95vw;
  height: 92vh;
  display: flex;
  flex-direction: row;
  /* background-color: antiquewhite; */
}

.box {
  display: flex;
  flex-direction: column;
}
</style>

完成后的样子
在这里插入图片描述

这样差不多就完成了，可以在这个基础上去测试别的组件，准备好组件所需数据就行了。

旭寒ls
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
gin-vue-blog自建博客
2401_84435700的博客
04-26 430
front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。
数据大屏项目Vue+DataV+Echarts(附源码)
热门推荐
Mrkaizi的博客
01-05 2万+
一、项目描述 1 前端项目 1.1 项目简介 一个基于 Vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。 项目需要全屏展示（按 F11）。 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用按需引入。 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。 项目环境：vue-cli-3.0、webpack-4.0
vue3+Echarts+DataV可视化大屏显示
最新发布
weixin_52625246的博客
06-04 533
vue3+echarts+DataV制作可视化大屏显示
echarts、dataV 数据可视化大屏
CSSAJBQ_的博客
05-01 1万+
一、项目描述 （包含echarts中国地图、dataV科技炫酷边框等等） 一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件， 组件库基于Vue （React版） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用。 项目环境：Vue-cli、DataV、Echarts、node 友情链接： Vue 官 方文档 Vue CLI DataV 官方文档
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
商务合作/软件定制/学习交流
03-10 1万+
Vue3+TS+DataV+Echarts搭建数据大屏模板
echarts+DataV的用法
敲代码无敌小奶龙的博客
10-20 3838
echarts+DataV的使用
大屏可视化vue+dataV+echarts
06-03
大屏可视化vue+dataV+echarts
基于Vue.js与DataV+Echarts技术的大数据可视化屏幕源码
03-25
项目概述：本项目采用Vue.js结合DataV与Echarts技术，实现了一套大数据可视化展示屏幕的源码。主要编程语言为JavaScript，涉及的技术栈包括Vue、JavaScript和HTML。项目文件结构清晰，包含57个文件，其中Vue文件20个...
VUE+DataV+ECharts组合页面制作看板
06-30
在IT行业中，前端开发是一项关键任务，而"VUE+DataV+ECharts组合页面制作看板"的主题聚焦于使用这三种技术栈构建数据可视化界面。Vue.js是一个流行的JavaScript框架，ECharts是百度提供的一个强大的数据可视化库，...
vue+echarts+DataV，数据可视化系统.zip
06-09
综上所述，"vue+echarts+DataV，数据可视化系统.zip"是一个利用Vue.js作为前端框架，结合ECharts进行数据可视化，并借助DataV提升设计感和易用性的项目。开发者可以通过解压这个zip文件，了解并学习如何构建一个高效...
vue+echarts+DataV数据可视化系统源码.zip
06-08
在“vue+echarts+DataV数据可视化系统源码.zip”中，我们可以看到一个利用Vue.js、ECharts以及DataV进行数据可视化的项目实例。 ECharts 是百度推出的一个开源的JavaScript数据可视化库，它支持丰富的图表类型，如...
【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放
04-08
用了vue - echarts - datav-elementul大屏数据可视化方案，包含屏幕适配方案等比例缩放， 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写...
vue+echarts数据显示通用模板
05-31
【Vue+ECharts数据显示通用模板】是一个用于快速搭建数据可视化项目的框架，它集成了柱状图、饼图、地图和表格等多种数据展示方式，旨在帮助开发者实现数据展示功能时能够快速上手，节省开发时间。这个模板充分利用...
Big-Screen-Vue-Datav-Echarts:政务大屏-前端(VUE+DataV+Echarts)
05-11
一个基于 vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。 项目需要全屏展示...
超炫20套vue_react+echarts 大屏可视化数据平台实战项目分享 (附源码).zip
01-08
web 大数据可视化 使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、...项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
基于VUE + Echarts 实现可视化数据大屏智慧校园可视化
HTML网页设计
08-16 5897
🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.
datav+charts的使用-Vue 大屏数据展示组件库
wangcongcsdn的博客
06-09 1万+
datav官网http://datav.jiaminghi.com/ 先装这两个插件 然后在main.js中引用 import dataV from '@jiaminghi/data-view' Vue.use(dataV) 然后就可以在页面中使用了，chart和echart类似 <template> <div> 这是datav组件 <dv-border-box-10 class="panel_box" > <h2>柱形
vue中使用DataV做大屏展示
雨花石
11-01 1104
之前写过监控平台下面介绍一下，dataV在监控平台上的使用，直接上效果图：
vue-datav-echarts-elementul
08-02
vue-datav-echarts-elementui是一个基于Vue.js和ElementUI的数据可视化组件库。它结合了Vue框架、ElementUI组件和ECharts图表库，为开发者提供了一套方便快捷的数据可视化解决方案。 首先，通过vue-datav-echarts-elementui，我们可以方便地在Vue.js项目中使用ElementUI组件。ElementUI是一个非常流行的Vue组件库，提供了许多易于使用和美观的UI组件，如按钮、表格、表单等。通过集成ElementUI，我们可以快速构建出具有一致风格的数据可视化界面。 其次，vue-datav-echarts-elementui还集成了ECharts图表库。ECharts是一款功能强大、灵活且易于使用的数据可视化库，支持多种常见的图表类型，如折线图、柱状图、饼图等。通过将ECharts与Vue.js集成，我们可以轻松生成复杂的数据可视化图表，并自定义其外观和交互行为。 除了集成Vue框架、ElementUI和ECharts图表库，vue-datav-echarts-elementui还提供了许多便捷的功能和工具，帮助开发者更高效地进行数据可视化开发。它提供了丰富的配置选项和API接口，使得定制化开发变得简单易懂。此外，它还支持响应式设计，使得图表在不同屏幕尺寸下自适应调整。 总之，vue-datav-echarts-elementui是一个功能强大、易于使用的数据可视化组件库，通过集成Vue.js、ElementUI和ECharts，为开发者提供了一套全面的数据可视化解决方案。无论是简单的数据展示，还是复杂的数据分析，都可以借助这个组件库轻松实现。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭寒ls

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值