echarts 仪表盘带进度条

echarts 仪表盘带进度条最终结果

思路：3个仪表盘叠加

代码：

echarts.min.js 下载放到同级文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="ECharts"><meta name="author" content="kener.linfeng@gmail.com"><title>ECharts · Example</title><script src="./echarts.min.js"></script></head><body><div id="chart" class="chart" style="height: 530px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts图表var myChart = echarts.init(document.getElementById('chart')); option = {backgroundColor: '#000643',toolbox: {feature: {restore: {},saveAsImage: {}}},series: [{name: '百分比100%',type: 'gauge',//半径radius: 150,          //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。startAngle: 180,//结束角度。endAngle: 0,center: ['50%', '50%'],//仪表盘轴线相关配置。axisLine: {            // 坐标轴线show:true,lineStyle: {       // 属性lineStyle控制线条样式width: 10,color:[[1, '#F2F4FF']],shadowColor: 'red',shadowBlur: 10,shadowOffsetX:2}},//分隔线样式。splitLine: {show: false,},//刻度样式axisTick: {show: false,},//刻度标签。axisLabel: {show:false,},//仪表盘指针。pointer: {//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！show: false,//指针长度length:'90%',width:0,},//仪表盘标题。title: {show: true,offsetCenter: [0, '-10%'], // x, y，单位pxtextStyle: {color: 'white',fontSize: 30}},//仪表盘详情，用于显示数据。detail: {show: true,offsetCenter: [0, '-40%'],formatter: '{value}%',textStyle: {fontSize: 30,color:'#F8F43C'}},data: [{ value:21,name:'完成率'},],zlevel:1},{name: '进度条',type: 'gauge',//半径radius: 150,            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。startAngle: 180,//结束角度。endAngle: 0,center: ['50%', '50%'],//仪表盘轴线相关配置。axisLine: {            // 坐标轴线show:true,lineStyle: {       // 属性lineStyle控制线条样式width: 10,color:[[0.2, '#F4F33C']]}},//分隔线样式。splitLine: {show:true,length:10,lineStyle:{color: 'white',width:3}},//刻度样式axisTick: {show: false,},//刻度标签。axisLabel: {show:false,},//仪表盘指针。pointer: {//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！show: false,},//仪表盘标题。title: {show: false},//仪表盘详情，用于显示数据。detail: {show: false,offsetCenter: [0, '-10%'],formatter: '',textStyle: {fontSize: 0}},data: [{name:'数量', value:'n'},],zlevel:2},{name: '外侧线条',type: 'gauge',//半径radius: 160,            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。startAngle: 180,//结束角度。endAngle: 0,center: ['50%', '50%'],//仪表盘轴线相关配置。axisLine: {            // 坐标轴线show:true,lineStyle: {       // 属性lineStyle控制线条样式width: 3,color:[[1, '#00F5F8']]}},//分隔线样式。splitLine: {show: false,},//刻度样式axisTick: {show: false,},//刻度标签。axisLabel: {show:false,},//仪表盘指针。pointer: {//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！show: false,},//仪表盘标题。title: {show: false},//仪表盘详情，用于显示数据。detail: {show: false,offsetCenter: [0, '-10%'],formatter: '',textStyle: {fontSize: 0}},data: [{name:'数量', value:'n'},],zlevel:3}]}; // 为echarts对象加载数据         myChart.setOption(option); </script>
</body>
</html>

echarts 仪表盘带进度条相关推荐

web app升级—带进度条的App自动更新
带进度条的App自动更新,效果如下图所示: 技术:vue.vant-ui.5+ 封装独立组件AppProgress.vue: <template><div><van- ...
带进度条的ASP无组件断点续传下载代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条atiUP设计java c# php 1. 设计要求 1 2. 原理and架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 ...
Android更新带进度条的通知栏
在网上查询了下,Android版本号更新通知栏带进度条,醉了,基本都是复制过来.有的代码不全,连源代码下载都没有,有下载也须要积分.还不能用.真黑心啊!! 之前自己也写过自己定义通知栏Notifica ...
用MediaPlayer做个带进度条可后台的音乐播放器
传送到github看源码下载apk试用密码:rukn 前言想在天朝听音乐还是有些难度的, 一般来说, 两三个app还是要的. 那何不尝试自己做个手机播放器, 听个爽呢?!今天就带大家先做个简单的 ...
[整理] C#调用SQLDMO.DLL时间数据库备份 / 还原。 (香神无涯) // C#实现SQLSERVER2000数据库备份还原的两种方法 (带进度条)...
/// <summary> /// 通过调用MSSQL的SQLDMO.DLL文件来实现备份数据库 /// 1.首先在在项目中引用SQLDMO.DLL文件. /// 2.在引用中的SQLDM ...
php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
自定义带进度条的WebView , 增加获取web标题和url 回掉
1.自定义ProgressWebView package com.app.android05; import android.content.Context; import android.graph ...
【MFC】带进度条的状态栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述状态栏多用于显示程序执 ...

echarts 仪表盘带进度条

echarts 仪表盘带进度条相关推荐

最新文章

热门文章