文章目录
0 前言1 介绍2 实现效果3 部分关键代码4 项目源码获取方式0 前言
Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自己的项目添加灵活的可视化动态效果!
今天要分享的是:基于大数据的医疗与疾病监控大数据可视化设计与实现
1 介绍
大数据大屏可视化系列:基于大数据的医疗与疾病监控大数据可视化设计与实现
可搭载任意自己想用的数据,动态效果不错
项目源码:/download/Seniors_DC/85662427
2 实现效果
整体实现效果如下,可以看到CSS优化相对漂亮的,而且动态效果也很好,适合搭载各种数据。
3 部分关键代码
function echarts_1() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('echart1'));option = {title: {text: '14%',x: 'center',y: 'center',textStyle: {fontWeight: 'normal',color: '#0580f2',fontSize: '24'}},color: ['rgba(176, 212, 251, .1)'], series: [{name: 'Line 1',type: 'pie',clockWise: true,radius: ['75%', '85%'],itemStyle: {normal: {label: {show: false},labelLine: {show: false},}},hoverAnimation: false, data: [{value: 14,name: '01',itemStyle: {normal: {color: {// 完成的圆环的颜色colorStops: [{offset: 0,color: '#00cefc' // 0% 处的颜色}, {offset: 1,color: '#367bec' // 100% 处的颜色}]},label: {show: false},labelLine: {show: false}} }}, {name: '86',value: 20}]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize",function(){myChart.resize();});}function echarts_2() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('echart2'));option = {title: {text: '22%',x: 'center',y: 'center',textStyle: {fontWeight: 'normal',color: '#0580f2',fontSize: '24'}},color: ['rgba(176, 212, 251, .1)'], series: [{name: 'Line 1',type: 'pie',clockWise: true,radius: ['75%', '85%'],itemStyle: {normal: {label: {show: false},labelLine: {show: false},}},hoverAnimation: false, data: [{value: 22,name: '01',itemStyle: {normal: {color: {// 完成的圆环的颜色colorStops: [{offset: 0,color: '#00cefc' // 0% 处的颜色}, {offset: 1,color: '#367bec' // 100% 处的颜色}]},label: {show: false},labelLine: {show: false}} }}, {name: '78',value: 20}]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize",function(){myChart.resize();});}function echarts_3() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('echart3'));option = {title: {text: '10%',x: 'center',y: 'center',textStyle: {fontWeight: 'normal',color: '#0580f2',fontSize: '24'}},color: ['rgba(176, 212, 251, .1)'], series: [{name: 'Line 1',type: 'pie',clockWise: true,radius: ['75%', '85%'],itemStyle: {normal: {label: {show: false},labelLine: {show: false},}},hoverAnimation: false, data: [{value: 10,name: '01',itemStyle: {normal: {color: {// 完成的圆环的颜色colorStops: [{offset: 0,color: '#00cefc' // 0% 处的颜色}, {offset: 1,color: '#367bec' // 100% 处的颜色}]},label: {show: false},labelLine: {show: false}} }}, {name: '02',value: 90}]}]}
篇幅有限仅展示关键代码
4 项目源码获取方式
项目源码下载:/download/Seniors_DC/85662427