文章目录
0 前言1 介绍2 实现效果3 部分关键代码4 项目源码获取方式0 前言
Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！
今天要分享的是：水质情况实时监测预警可视化设计与实现
1 介绍
大数据大屏可视化系列：水质情况实时监测预警可视化设计与实现
可搭载任意自己想用的数据，动态效果不错
项目源码：/download/Seniors_DC/85662098
2 实现效果
整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。
3 部分关键代码
function leidatu(){// var imgPath = ['http://bmob-cdn-15355.//12/01/bee4341c4089af7980b87074a77479ad.png']var myChart = echarts.init(document.getElementById('leida'));option = {color: ['#00c2ff', '#f9cf67', '#e92b77'],legend: {show: true,// icon: 'circle',//图例形状bottom: 0,center: 0,itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。textStyle: {fontSize: 12,color: '#ade3ff'},data: ['', '', ''],},radar: [{indicator: [{text: '重庆市',max: 100},{text: '北京市',max: 100},{text: '上海市',max: 100},{text: '广东省',max: 100},{text: '浙江省',max: 100}],textStyle: {color: 'red'},center: ['50%', '50%'],radius: 60,startAngle: 90,splitNumber: 3,orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.// shape: 'circle',// backgroundColor: {//image:imgPath[0]// },name: {formatter: '{value}',textStyle: {fontSize: 12, //外圈标签字体大小color: '#5b81cb' //外圈标签字体颜色}},splitArea: {// 坐标轴在 grid 区域中的分隔区域，默认不显示。show: true,areaStyle: {// 分隔区域的样式设置。color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。}},// axisLabel:{//展示刻度//show: true// },axisLine: {//指向外圈文本的分隔线样式lineStyle: {color: '#153269'}},splitLine: {lineStyle: {color: '#113865', // 分隔线颜色width: 1, // 分隔线线宽}}}, ],series: [{name: '雷达图',type: 'radar',itemStyle: {emphasis: {lineStyle: {width: 4}}},data: [{name: '',value: [85, 65, 55, 90, 82],areaStyle: {normal: {// 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#00c2ff'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#00c2ff'}],globalCoord: false},opacity: 1 // 区域透明度}},symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。label: {// 单个拐点文本的样式设置normal: {show: true, // 单个拐点文本的样式设置。[ default: false ]position: 'top', // 标签的位置。[ default: top ]distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]color: '#6692e2',// 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]fontSize: 14, // 文字的字体大小formatter:function(params) {return params.value;}}},itemStyle: {normal: {//图形悬浮效果borderColor: '#00c2ff',borderWidth: 2.5}},// lineStyle: {//normal: {// opacity: 0.5// 图形透明度//}// }}, {name: '',value: [50, 20, 45, 30, 75],symbolSize: 2.5,itemStyle: {normal: {borderColor: '#f9cf67',borderWidth: 2.5,}},areaStyle: {normal: {// 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#f9cf67'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#f9cf67'}],globalCoord: false},opacity: 1 // 区域透明度}},// lineStyle: {//normal: {// opacity: 0.5// 图形透明度//}// }}, {name: '',value: [37, 80, 12, 50, 25],symbolSize: 2.5,itemStyle: {normal: {borderColor: '#e92b77',borderWidth: 2.5,}},areaStyle: {normal: {// 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#e92b77'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#e92b77'}],globalCoord: false},opacity: 1 // 区域透明度}}}]}, ]};myChart.setOption(option);}
篇幅有限仅展示关键代码
4 项目源码获取方式
项目源码下载：/download/Seniors_DC/85662098
