Echarts 实现炫酷仪表盘

1.效果

2.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index7</title><style type="text/css">html,body {width: 100%;height: 100%;}#myChart {width: 80%;height: 70%;position: fixed;top: 15%;left: 10%;}</style><script src="../../js/echarts3.2.2/echarts.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<script>var option = {backgroundColor: 'black',title: {x: 'center',y: '63%',bottom: 50,text: '运营状况',subtext: 'General operation',textStyle: {fontWeight: 'bold',fontSize: 35,color: "#0095ff"},subtextStyle: {fontWeight: 'normal',fontSize: 20,color: "#0095ff"}},tooltip: {format: function (params) {console.log(params);}},graphic: {elements: [{type: 'image',style: {image: "../img/center.png",width: 190,height: 190},left: 'center',top: 'center'}]},series: [{splitNumber: 13, //刻度数量radius: '66%', //图表尺寸axisLine: {show: false,lineStyle: {width: 10,shadowBlur: 0,color: [[1, 'black']]}},splitLine: {length: 10,lineStyle: {color: "#0095ff"}}},{radius: '62%',splitNumber: '52',axisLine: {lineStyle: {color: [[1, '#0095ff']],width: 10}},splitLine: {length: 10,lineStyle: {color: 'black',width: 4}}},{radius: '56%',splitNumber: 0,axisLine: { // 坐标轴线lineStyle: {color: [[1, '#0095ff']], // 属性lineStyle控制线条样式width: 2}},splitLine: { // 分隔线show: false}},{splitNumber: '22',radius: '52%',axisLine: {lineStyle: {color: [[0, '#ff0090'], [1, '#631643']],width: 25}},splitLine: {length: 25,lineStyle: {color: 'black',width: 8}}},{radius: '42%',splitNumber: 0,axisLine: { // 坐标轴线lineStyle: {color: [[1, '#0095ff']], // 属性lineStyle控制线条样式width: 2}},splitLine: {show: false}},{radius: '38%',splitNumber: '22',axisLine: {lineStyle: {color: [[0, '#fcff00'], [1, '#626317']],width: 20}},splitLine: {length: 20,lineStyle: {color: 'black',width: 6}}}]};for (var i = 0; i < option.series.length; i++) {option.series[i].type = 'gauge';option.series[i].startAngle = 220;option.series[i].endAngle = -40;option.series[i].center = ['50%', '50%'];option.series[i].axisTick = {show: false};option.series[i].axisLabel = {show: false};option.series[i].pointer = {show: false};option.series[i].detail = {show: false};}var myChart = echarts.init(document.getElementById("myChart"));//get()方法作用：将jQuery对象转Dom对象myChart.setOption(option);var num1 = 0, num2 = 0;var myInterval = setInterval(function () {num1 += Math.round(Math.random()) === 0 ? 0.011 : 0.005;num2 += Math.round(Math.random()) === 0 ? 0.011 : 0.005;if (num1 >= 1) num1 = 0;if (num2 >= 1) num2 = 0;option.series[3].axisLine.lineStyle.color = [[num1, '#ff0090'], [1, '#631643']];option.series[5].axisLine.lineStyle.color = [[num2, '#fcff00'], [1, '#626317']];myChart.setOption(option);}, 50);
</script>
</body>
</html>

3.中心图片 center.png

Echarts 实现炫酷仪表盘相关推荐

如何将Excel数据快速生成炫酷仪表盘
在一个"颜值即正义"的时代,比起一堆杂乱无章的数字噪音,数据可视化的图表不仅能给用户带来惊艳的视觉效果,还可以降低用户的理解难度. 不妨让我们来对比感受下! 来自一堆数字的密集恐惧 ...
Echarts案例：整一个炫酷一点的仪表盘
故事发生在几天前公司要求做个仪表盘,大致UI是这样的这不是为难我胖虎嘛,于是找遍整个全网也没找到相似的,只能自己手写一个. 然而,最开始是准备用极坐标写的折腾了一上午发现极坐标做出的效果两头是3 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
超级超级炫酷的Echarts数据可视化
刚做完的一个Echarts数据可视化项目就问你看起来流不流弊炫不炫酷哈哈哈哈虽然看起来很流弊但是只要学了Echart都可以做出来 01-Echarts-介绍 ECharts,一个使用 Java ...
Linux炫酷终端仪表盘
最近发现了一个适合装逼的终端命令,会在终端显示一个炫酷的仪表盘(提示:终端全屏显示效果才好) 先上图首先安装三个软件 sudo apt-get install node nodejs-bin sud ...
echarts 3d地图_独占进博会800m2展厅！3D炫酷光影秀带你邂逅金山往事..._政务_澎湃新闻...
流水悠悠,青砖黛瓦记忆中的江南,是一种天然的古典韵味,好像只要身临其境,就能梦回江南的曲水流觞.炊烟袅袅...... 金山如画醉美枫泾如何把来参加进博会的观众直接带至枫泾? 答案一共 ...
python-pyecharts 数据分析原来可以这么炫酷
" pyecharts 数据分析原来可以这么炫酷" Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可.而 Python 是一 ...

Echarts 实现炫酷仪表盘

Echarts 实现炫酷仪表盘相关推荐

最新文章

热门文章