Vue联动Echarts实现数据大屏展示

目录
  • 1.安装echarts.js
  • 2.新建vue界面
  • 3.引入 ECharts
  • 4.创建Vue方法和图表信息
  • 5.效果样式
  • 6.通过官网查找自己喜欢的样式
  • 7.组件重复使用
    • 1.组件重复使用定义
    • 2.当前页面数据传递子组件中

1.安装echarts.js

npm install echarts --save

2.新建vue界面

<template>
<!-- 定义echarts需要控制的dom元素 -->
  <div  :style="{height:height,width:width}" />
</template>

3.引入 ECharts

<script>
import echarts from 'echarts'
require('echarts/theme/dark') // echarts主题
//....后面就是配置vue的方法和图标样式,我打算拿出开单独讲解
</script>

4.创建Vue方法和图表信息

创建一个export default模块

export default{
	//方法和变量
}

在以上基础添加data()

  data() {
    return {
      chart: null,// echarts实例
      chartData: '',// 图表数据
      height: '250px',//设置默认高度
      width: '50%',//设置默认宽度
    }
  },

watch监听

  watch: {//监听数据变化
    chartData: {
      deep: true,//深度监听
      handler(val) {
        this.setOptions(val)//重新绘制图表数据
      }
    }
  },

mounted创建echarts实例

  mounted() {
    // dom元素加载完成后执行
    this.$nextTick(() => {
      // 初始化echarts实例
      this.initEcharts()
    })
  },

methods的方法有initEchartssetOptions

methods: {
	initEcharts(){},
	setOptions({expectedData,actualData}){},
}

initEcharts方法创建实例对象

    initEcharts() {
      // 定义一个图表数据
      this.chartData={
        expectedData:[190, 100, 10, 9, 170, 110, 160],
        actualData:[120, 200, 150, 80, 70, 110, 130]
      }
      //参数一:this.$el指向当前组件template模板中的根标签(在mounted生命周期中才有效)
      //参数二:echarts主题颜色
      this.chart = echarts.init(this.$el, "dark")
      this.setOptions(this.chartData)
    },

关于图标样式需要注意的是,需要引入了echarts主题否则无效.可以看官方的主题样式点击跳转,也可以根据自己的喜好进行定制化主题并且下载本地,引入项目中

setOptions方法渲染图表数据

setOptions({expectedData,actualData}) {
      var option={//setOption方法可以接受一个对象作为参数更多配置参数可以参考官网
        title: {//标题组件
          text: 'ECharts 入门示例'
        },
        tooltip: {//提示框组件
          trigger: 'axis'//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用,还有'item','none'
        },
        legend: {//图例组件
          data: ['预期', '实际']
        },
        grid: {//直角坐标系内绘图网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {//工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
          feature: {
            saveAsImage: {},//保存为图片。
            dataView: {},//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
          }
        },
        xAxis: {//直角坐标系 grid 中的 x 轴
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {//直角坐标系 grid 中的 y 轴
          type: 'value'
        },
        series: [//图表类型
          {
            name: '预期',
            type: 'line',
            stack: '总量',
            data:  expectedData,//对象内,解析出来的参数
          },
          {
            name: '实际',
            type: 'line',
            stack: '总量',
            data: actualData,//对象内,解析出来的参数
          }
        ]
      }
      this.chart.setOption(option)
    }

更多配置项可以点击查看官网

可能你会对setOptions方法中{expectedData,actualData}产生疑问,为此打算单独拆分讲解下
在initEcharts()方法中我们调用了setOptions方法并且传递了一个对象信息,而{}内的元素就是解析对象里面对应的元素信息,接下来我用控制台展示下

这下应该明白了吧

5.效果样式

设置了tooltip参数类型是’axis’所以移动到坐标轴触发,主要在柱状图,折线图等

6.通过官网查找自己喜欢的样式

我们也可以通过官网查看自己需要的示例粘贴到项目中点击直达

找到自己需要的然后点击进去复制代码

把option进行替换成官网的代码就可以了

可以看出效果已经出来了,我们也可以对里面显示的数据进行替换

是不是很简单,但是有的时候我们在其他界面也需要使用到类似的样式,我们就应该使用这个模板然后替换里面的数据做展示,而不是重新创建新页面然后复制代码,你们懂我意思吧

7.组件重复使用

我现在需要在主页面使用前面的模板,操作也很简单跟着步骤一起来吧

1.组件重复使用定义

1.在需要引用的界面导入该模块

<script>
    //引入模板
	import TestTemplate from "./dashboard/TestTemplate"
<script>

2.添加模板到组件中

export default {
  components: {
    //添加模板到组件
    TestTemplate
  },
  data() {
    return {
    }
  },
}

3.添加组件标签

<test-template></test-template>

你可能在想引用的组件标签为什么叫这个,因为我们导入组件的名称是TestTemplate那么标签使用的kebab-case(短横线命名)为什么用这个呢而不是使用驼峰命名,由于HTML的特性不识别大小写所以要使用短横线命名,首字母小写,遇到大写字母需要加短横并且改成小写,如TestTemplate改成短横test-template

此时可以看出首页已经可以展示我们前面写的组件了,简单来说就三个步骤哦!

2.当前页面数据传递子组件中

但是还没达到我们的要求,不同的页面应该展示不同的数据才对,所以我们需要把当前页面的数据传递到组件中去,简单来讲就是父的数据传递到子里面。

父界面改造

1.在父界面data()中添加需要传递的数据对象

2.在标签中添加创建的数据

 <test-template :chart-data="LineChartData"></test-template>

子界面改造(重复使用的组件)

1.子界面定义props用于接收父组件传递的数据

  //接收父组件传递的参数
  props: {
    chartData: {//接收父组件传递的参数名称
      type: Object,//父组件传递的数据类型
      required: true //表示必须传递
    }
  },

2.需要把原本页面定义的数据进行注释,因为我们可以直接使用父传递过来的chartData数据

可以看出数据已经使用的是父页面传递的数据了

我们还可以在同个页面添加多个一样的组件

通过不同数据展示不同数据信息

如图展示

以上就是Vue联动Echarts实现数据大屏展示的详细内容,更多关于Vue Echarts数据大屏的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue实现echarts中的仪表盘

    本文实例为大家分享了vue实现echarts中的仪表盘的具体代码,供大家参考,具体内容如下 最终结果 一.安装 1. 首先需要安装echarts依赖包 npm install echarts -S 2. 或者使用国内的淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 二.创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.proto

  • vue + echarts实现中国省份地图点击联动

    引入echarts npm下载 npm install echarts cdn引入 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" ></script> 引入中国地图china.js <script type="text/javascript" src="https:/

  • vue使用echarts实现地图的方法详解

    目录 全局安装echarts 将echarts绑定在原型上(main.js文件中) 准备画布 地图配置option 中国地图包(china.json) 总结 全局安装echarts npm i echarts --save 将echarts绑定在原型上(main.js文件中) import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts; 准备画布 <template> <div ref="openin

  • vue+echarts实现数据实时更新

    本文实例为大家分享了vue+echarts实现数据实时更新的具体代码,供大家参考,具体内容如下 今天在管理后台新增一个图表,用了echarts,记录一下 根据数据实时更新 安装 npm install echarts --save 然后在main.js中配置一下 import echarts from 'echarts' Vue.prototype.$echarts = echarts 可以了,接下来就是在你需要用的页面写了 // html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题 <d

  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    目录 实现效果 完整代码+详细注释 要点小结 实现效果 完整代码+详细注释 <template> <div class="echart"> <div class="content"> <div id="map_cn"></div> </div> </div> </template> <script> import echarts from

  • Vue联动Echarts实现数据大屏展示

    目录 1.安装echarts.js 2.新建vue界面 3.引入 ECharts 4.创建Vue方法和图表信息 5.效果样式 6.通过官网查找自己喜欢的样式 7.组件重复使用 1.组件重复使用定义 2.当前页面数据传递子组件中 1.安装echarts.js npm install echarts --save 2.新建vue界面 <template> <!-- 定义echarts需要控制的dom元素 --> <div :style="{height:height,w

  • 基于vue+echarts数据可视化大屏展示的实现

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • 基于vue+echarts 数据可视化大屏展示的方法示例

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • vue大屏展示适配的方法

    本文实例为大家分享了vue大屏展示适配的具体代码,供大家参考,具体内容如下 1.utils文件夹建一个文件cv以下代码 export function useIndex (appRef) { // * appRef指向最外层容器 // * 定时函数 let timer = null // * 默认缩放值 const scale = { width: '1', height: '1' } // * 设计稿尺寸(px) const baseWidth = 1920 const baseHeight

  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算过程. 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !

  • python中的PywebIO模块制作一个数据大屏

    目录 一.PywebIO介绍 二.PywebIO和Pyecharts的组合 三.PywebIO和Bokeh的组合 四.基于浏览器的GUI应用 一.PywebIO介绍 Python当中的PywebIO模块可以帮助开发者在不具备HTML和JavaScript的情况下也能够迅速构建Web应用或者是基于浏览器的GUI应用,PywebIO还可以和一些常用的可视化模块联用,制作成一个可视化大屏, 我们先来安装好需要用到的模块 pip install pywebio pip install cutechart

  • vue使用Echarts设置数据无效问题记录及解决方法

    目录 场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e

  • Vue通过echarts实现数据图表化显示

    目录 一.项目引入echarts 二.创建容器 三.配置图表 一.项目引入echarts ecahrts官网 官网有许多图表案例,并且可以直接复制对应的配置代码. vue项目中引入: 安装 npm install echarts --save 引入echarts 全部一次性引入: import * as echarts from 'echarts'; 按需引入: // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口. import * as echarts fr

  • Vue使用Echarts实现数据可视化的方法详解

    目录 一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Echarts 2.3 使用模板 2.4实例 2.4.1柱状图(折线图变换) 2.4.2极坐标柱状图标签 总结 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项

  • python可视化大屏库big_screen示例详解

    目录 big_screen 特点 安装环境 输入数据 本地运行 在线部署 对于从事数据领域的小伙伴来说,当需要阐述自己观点.展示项目成果时,我们需要在最短时间内让别人知道你的想法.我相信单调乏味的语言很难让别人快速理解.最直接有效的方式就是将数据如上图所示这样,进行可视化展现. 具体如下: big_screen 特点 便利性工具, 结构简单, 你只需传数据就可以实现数据大屏展示. 安装环境 pip install -i https://pypi.tuna.tsinghua.edu.cn/simp

随机推荐