vue+echarts实现仪表盘

API文档：请点击

仪表盘实例地址：请点击

目标样式：

实现代码：

//html部分
<div id="dashboardHumidity" style="width: 200px; height: 200px"></div>

//js部分
//仪表盘drawDev() {let myChart = this.$echarts.init(document.getElementById("dashboardHumidity"));// 绘制图表myChart.setOption({tooltip: {formatter: "{a} <br/>{b} : {c}%",},toolbox: {show: false,feature: {restore: {},saveAsImage: {},},},// 配置series: [{name: "温度",type: "gauge",axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100,height: 100},axisLine: {lineStyle: {width: 10 // 修改仪表盘宽度的属性}},title: {offsetCenter: [0, '85%'], color: 'red'},detail: { formatter: "{value}℃",offsetCenter: [0, '65%'],fontStyle: "oblique",fontSize: 18},pointer: {width: 8}, data: [{ value: 50, name: "温度" }]},],});}

细节说明：

1、tooltip：控制仪表板显示的格式问题

2、toolbox：控制右上角工具栏，这里我并不需要展示，所以给了false。如：

3、series这个最核心的配置部分，他可以更改样式，设置字体的位置，以及仪表盘的宽度，坐标轴文字的样式，类型等。

4、axisLine：修改仪表盘的宽度

5、title：文字说明的样式和文职。offsetCenter是控制显示的位置的，这里的[0,'85%']。偏移的位置是0

6、detail: 就是仪表盘代表的是什么数据了，这里是温度，大多数是百分数

7、pointer: 仪表盘的指针设置

8、data: 数据源及其结构

vue+echarts实现仪表盘相关推荐

vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘,代码如下: <template><div class="app-containe ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
前言三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...
Vue+Echarts实现饼图统计通过率
Vue+Echarts实现一个饼状图 1:在项目里面安装echarts 2:在需要用图表的地方引入 1:在项目里面安装echarts // 在项目中安装echarts 插件 cnpm install ...
vue + echarts 之饼形图
目录 vue + echarts 之饼形图1 vue + echarts 之饼形图1 安装:yarn add echarts 卸载:npm uninstall echarts 指定版本:npm ins ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
vue + echarts 之世界地图
目录 vue + echarts 之世界地图 world.vue 组件世界地图的数据 vue + echarts 之世界地图 world.vue 组件世界地图的英文名称链接: link. < ...

vue+echarts实现仪表盘

vue+echarts实现仪表盘相关推荐

最新文章

热门文章