Vue Echarts简易实现仪表盘

目录
  • 前言
  • 仪表盘的特点
  • 仪表盘的基本实现
  • 仪表盘的常见效果

前言

本篇来学习写仪表盘图

仪表盘的特点

可以更直观的表现出某个指标的进度或实际情况

仪表盘的基本实现

  • ECharts 最基本的代码结构
  • 准备数据, 设置给 series 下的 data
  • 在 series 下设置 type:gauge
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>仪表盘</title>
  <!-- cdn方式 引入echarts.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id='app' style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.getElementById("app"))
    var option = {
      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 95
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

效果

仪表盘的常见效果

  • 数值范围: max min
  • 多个指针: 增加data中数组的元素
  • 多个指针颜色的差异: itemStyle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仪表盘</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
    var mCharts = echarts.init(document.getElementById("app"))
    var option = {
        series: [
            {
                type: 'gauge',
                data: [
                    // 每一个对象就代表一个指针
                    {
                        name: 'mem',
                        value: 70,
                        itemStyle: { // 指针的样式
                            color: 'purple' // 指针的颜色
                        },
                        title: {
                            offsetCenter: ['-40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['-40%', '95%']
                        }
                    },
                    {
                        name: 'cpu',
                        value: 80,
                        itemStyle: {
                            color: 'blue'
                        },
                        title: {
                            offsetCenter: ['40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['40%', '95%']
                        }
                    },
                ],
                detail: {   // 数值文案样式
                    width: 40,
                    height: 14,
                    fontSize: 14,
                    color: '#fff',
                    backgroundColor: 'auto',
                    borderRadius: 3,
                    formatter: '{value}%'
                },
                title: {  // name 文字大小
                    fontSize: 20
                },
                progress: {  // 仪表盘数据样式
                    show: true,
                    overlap: true,
                    roundCap: true
                },
                max: 100,
                min: 20 // min max 控制仪表盘数值范围
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果

到此这篇关于Vue Echarts简易实现仪表盘的文章就介绍到这了,更多相关Vue Echarts仪表盘内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用Echarts实现大屏可视化布局示例详细讲解

    目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标

  • Vue ECharts简易实现雷达图

    目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • Vue echarts封装实现流程

    将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l

  • Vue使用Echarts画柱状图详解

    目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

  • Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解

    目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,

  • Vue ECharts设置主题实现方法介绍

    目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • Vue Echarts简易实现仪表盘

    目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • vue实现echarts中的仪表盘

    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实现仪表盘案例

    本文实例为大家分享了vue Echarts实现仪表盘案例的具体代码,供大家参考,具体内容如下 1.main.js 页面 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import echarts from "echarts";          Vue.config.productionTip = false;   

  • vue Echarts实现仪表盘案例

    本文实例为大家分享了vue Echarts实现仪表盘案例的具体代码,供大家参考,具体内容如下 1.main.js 页面 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import echarts from "echarts";          Vue.config.productionTip = false;   

  • Vue echarts实例项目商家销量统计图实现详解

    Vue echarts实例项目商家销量统计图实现详解

    目录 组件结构设计 发送请求获取对应的数据并进行相应操作 当窗口尺寸发生变化时的操作 总体效果如图 组件结构设计 SellerPage.vue <!--针对于/sellerpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle

  • Vue实现简易翻页效果源码分享

    Vue实现简易翻页效果源码分享

    源码如下: <html> <head> <meta charset="UTF-8"> <title>slidePage</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> *{ margin

  • Vue Echarts实现可视化世界地图代码实例

    Vue Echarts实现可视化世界地图代码实例

    Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js

  • vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）

    本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

随机推荐