VUEecharts图表之得分环

// main.js
import 'element-ui/lib/theme-chalk/index.css';
import 'echarts';

// 页面使用
<template><div><div :style="{ width: '700px', height: '500px' }" ref="yibiaoid"></div></div>
</template><script>
let echarts = require("echarts/lib/echarts");
export default {data() {return {}},mounted() {this.$nextTick(() => {this.fn1();});},methods: {fn1() {let myChart = echarts.init(this.$refs.yibiaoid);window.onresize = myChart.resize;const gaugeData = [{value: 20,name: 'Perfect',title: {offsetCenter: ['0%', '-30%']},detail: {valueAnimation: true,offsetCenter: ['0%', '-20%']}},{value: 40,name: 'Good',title: {offsetCenter: ['0%', '0%']},detail: {valueAnimation: true,offsetCenter: ['0%', '10%']}},{value: 60,name: 'Commonly',title: {offsetCenter: ['0%', '30%']},detail: {valueAnimation: true,offsetCenter: ['0%', '40%']}}];myChart.setOption({series: [{type: 'gauge',startAngle: 90,endAngle: -270,pointer: {show: false},progress: {show: true,overlap: false,roundCap: true,clip: false,itemStyle: {borderWidth: 1,borderColor: '#464646'}},axisLine: {lineStyle: {width: 40}},splitLine: {show: false,distance: 0,length: 10},axisTick: {show: false},axisLabel: {show: false,distance: 50},data: gaugeData,title: {fontSize: 14},detail: {width: 50,height: 14,fontSize: 14,color: 'auto',borderColor: 'auto',borderRadius: 20,borderWidth: 1,formatter: '{value}%'}}]}, true);setInterval(function () {gaugeData[0].value = +(Math.random() * 100).toFixed(2);gaugeData[1].value = +(Math.random() * 100).toFixed(2);gaugeData[2].value = +(Math.random() * 100).toFixed(2);myChart.setOption({series: [{data: gaugeData,pointer: {show: false}}]});}, 2000);}},
}
</script><style>
</style>

VUEecharts图表之得分环相关推荐

echarts得分环
echarts 得分环样式修改:由echarts的官方效果图1改为效果图2 效果图1: === 效果图2: var chartDom = document.getElementById('defenh ...
vue socketio 实现echarts图表动态显示
本文主要为续之前vue和flask使用socketio实现互连的文章,记一下我的Vue项目中使用echarts实现动态图表的方法. 如仍然不了解 socketio 的使用方法,可点击此看我之前写的关于 ...
图说可视化，报表也能做得如此酷炫！
1.数据可视化概述 1.1.数据可视化的作用数据可视化是指将数据通过图表的方式传递出来,让用户能够快速.准确地理解信息所要表达的内容,从而提高沟通效率.数据可视化的作用主要有: 1)传递更多的信息, ...
中国总部经济园市场发展策略分析及市场十四五前景展望报告2022-2028年版
中国总部经济园市场发展策略分析及市场十四五前景展望报告2022-2028年版 [报告目录]: 第1章:中国总部经济园建设背景1.1 国内总部经济的相关概述 1.1.1 总部经济的定义 1.1. ...
中国传感器行业应用规模与投资价值分析报告2022版
中国传感器行业应用规模与投资价值分析报告2022版 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年11月 [搜索鸿晟信合研究 ...
中国钢铁行业战略规划及项目建设动态分析报告2021-2027年
中国钢铁行业战略规划及项目建设动态分析报告2021-2027年 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年10月 [搜索 ...
帆软文件控件图标更换_【产品对比】赢在自我的战场：TABLEAU VS. 帆软（1）
最近很多人问TableauVS帆软的区别,此前一直没有深度用过帆软的产品,所以不能妄加判断:问的人多了,我想有必要努力公平客观的做一个对比.我对比不会狭隘地对比单个产品功能的好坏,我希望对比两家公司的 ...
数据分析师成长路径-第一阶段
第一阶段业务数据分析师第1部分 Excel必备常用工具使用与高级技巧第一章 Excel使用与高级技巧 1.1.EXCEL基础概念 1.2.数据处理01-导入外部数据 1.3 ...
Quick BI企业报表
Quick BI企业报表报表:用表格.图表等格式来显示数据.报表是商业智能(BI)的基础应用数据可视化:指将相对复杂的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律 ...

VUEecharts图表之得分环

VUEecharts图表之得分环相关推荐

最新文章

热门文章