当前位置: 首页 > news >正文

echarts仪表盘vue

<div class="ybptx" ref="btryzb"></div>mounted() {this.getBtData();},getBtData() {var chart = this.$echarts.init(this.$refs.btryzb);var data_czzf= 88;var option = {series: [{name: '内层数据刻度',type: 'gauge',radius: '80%',min: 0,max: 100,center: ['50%', '50%'],pointer:{show:false//是否显示指针},axisLine: {lineStyle: {width: 30,color: [[data_czzf/100, new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: '#5185e5'}, {offset: 1,color: '#90b6fa'}])],[1, '#FFFFFF']],}},splitLine: {show: false,length: 15,lineStyle: {width: 2,color: '#ffffff'}},axisTick: {show: false,lineStyle: {width: 1,color: '#ffffff'}},axisLabel: {show: false,color: '#0089fa',distance: 20,fontSize: 12,},detail: {show: true,offsetCenter: ['0','0'],color: '#3469d1',fontSize:52,fontWeight: 'bold',formatter: function (value) {return value.toFixed(0);},},itemStyle: {normal: {color: 'rgb(0,191,255)'}},data: [{value: data_czzf,name:"成长总分数"}],silent: false,title:{offsetCenter : [0, '75%'],//设置在线率位置color:'#333333',fontSize: 20,fontWeight: 'bold'}},]};// 绘制图表chart.setOption(option);},

http://www.lryc.cn/news/191280.html

相关文章:

  • 管道和重定向分号-连接符
  • WSL VScode连接文件后无法修改(修改报错)
  • 迷你Ceph集群搭建(超低配设备)
  • Python数据挖掘项目实战——自动售货机销售数据分析
  • TortoiseGit使用教程
  • 如何测量GNSS信号和高斯噪声功率及载波比?
  • 动态壁纸软件iWall mac中文特色
  • xtrabackup全备 增备
  • 【广州华锐互动】灭火器使用VR教学系统应用于高校消防演练有什么好处?
  • Pymol做B因子图
  • EKF例程 matlab
  • 【C语言】atoi函数的模拟
  • JAXB 使用记录 bean转xml xml转bean 数组 继承 CDATA(转义问题)
  • Linux Centos安装Sql Server数据库,结合cpolar内网穿透实现公网访问
  • Vulnhub系列靶机---Raven: 2
  • 计算机视觉与深度学习 | 视觉惯性SLAM的基础理论
  • [电源选项]没有系统散热方式,没有被动散热选项
  • 房产中介租房小程序系统开发搭建
  • RS485电路设计
  • 分布式文件服务器——Windows环境MinIO的三种部署模式
  • 科技资讯|9月新能源汽车零售74.3万辆,充电桩迎来发展高峰
  • 【C++ Primer Plus学习记录】指针——小结
  • Android Studio for Platform (ASfP) 使用教程
  • 【安全】linux audit审计使用入门
  • 如何优雅的终止 Docker 容器
  • SXSSFWorkbook-MinIo-大数据-流式导出
  • 使用PyQt5创建图片查看器应用程序
  • 怎样制作一个展会场馆预约小程序
  • 呼叫中心系统信息发送功能的应用
  • Android笔记(三)多Activity活动的切换中的简化处理