vue+echarts实现多个仪表盘图表

vue+echarts实现多个仪表盘图表

根据echarts官网单个仪表盘修改成多个仪表盘，代码如下：

<template><div class="app-container homeIndex"><div class="mineEcharts"><div ref="mineEcharts" style="height: 200px" /></div>
</template><script>
import echarts from "echarts";export default {name: "index",data() {return {mineEcharts: null,};},mounted() {this.getList();},methods: {getList() {var chartDom = this.$refs.mineEcharts;var myChart = echarts.init(chartDom);var option;option = {//鼠标悬停文字提示tooltip: {formatter: "{b} : {c}份",},series: [{name: "",type: "gauge",radius: "50%",center: ["15%", "55%"], //第一个仪表盘的位置min: 0,  //显示的最小值和最大值max: 1000,axisLabel: {  //仪表盘刻度show: false,},axisLine: {  //仪表盘宽度lineStyle: {width: 10,},},pointer: {  //仪表盘的指针长度及宽度show: true,length: "70%",width: 4,},title: {  //仪表盘的文字样式show: true,offsetCenter: [0, "100%"],textStyle: {color: "#667EFF",fontSize: 20,},},detail: {formatter: "{value}份",textStyle: {fontSize: 14,color: "#00FF99",},},splitLine: {  //仪表盘的刻度线显示show: false,},data: [{value: 216,name: "网盘",},],},{name: "",type: "gauge",radius: "70%",center: ["50%", "48%"],min: 0,max: 1000,axisLabel: {show: false,},axisLine: {lineStyle: {width: 10,},},pointer: {show: true,length: "70%",width: 4,// 0,},splitLine: {show: false,},title: {show: true,offsetCenter: [0, "92%"],textStyle: {color: "#667EFF",fontSize: 20,},},detail: {formatter: "{value}份",textStyle: {fontSize: 14,color: "#00FF99",},},data: [{value: 168,name: "备课",},],},{name: "",type: "gauge",radius: "50%",center: ["85%", "55%"],min: 0,max: 1000,axisLabel: {show: false,},axisLine: {lineStyle: {width: 10,},},pointer: {show: true,length: "70%",width: 4,},splitLine: {show: false,},title: {show: true,offsetCenter: [0, "100%"],textStyle: {color: "#667EFF",fontSize: 20,},},detail: {formatter: "{value}份",textStyle: {fontSize: 14,color: "#00FF99",},},data: [{value: 999,name: "资源",},],},],};option && myChart.setOption(option);},},
};
</script><style scoped lang="scss"></style>

如图所示：

The only failure there is is the failure to try.

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

简单介绍Vue使用echarts定制特殊的仪表盘
这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue使用echarts定制特殊 ...
开发笔记——vue echarts图表在切换页面大小时缩成一团
开发笔记--vue echarts图表在切换页面大小时缩成一团添加this.$nextTick() this.$nextTick(()=>{this.getjkechertsdata(); / ...
汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
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实现多个仪表盘图表相关推荐

最新文章

热门文章