前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML五、更多干货一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html><html style="height: 100%"><head><meta charset="utf-8"><title>饼图百分比</title></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div>.<script type="text/javascript" src="js/echarts.min.js"></script><script type="text/javascript" src="js/echarts-liquidfill.min.js"></script><script type="text/javascript">var value = 0.3;var data = [value, value, value, ];var dom = document.getElementById("container");// dom.style.height=window.innerHeight+'px';var myChart = echarts.init(dom);var app = {};option = null;option = {backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{offset: 0,color: '#431ab8'}, {offset: 1,color: '#471bba'}]),title: {text: (value * 100).toFixed(0) + '{a|%}',textStyle: {fontSize: 50,fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#bcb8fb',rich: {a: {fontSize: 28,}}},x: 'center',y: '35%'},graphic: [{type: 'group',left: 'center',top: '60%',children: [{type: 'text',z: 100,left: '10',top: 'middle',style: {fill: '#aab2fa',text: '流量统计',font: '20px Microsoft YaHei'}}]}],series: [{type: 'liquidFill',radius: '80%',center: ['50%', '50%'],// shape: 'roundRect',data: data,backgroundStyle: {color: {type: 'linear',x: 1,y: 0,x2: 0.5,y2: 1,colorStops: [{offset: 1,color: 'rgba(68, 145, 253, 0)'}, {offset: 0.5,color: 'rgba(68, 145, 253, .25)'}, {offset: 0,color: 'rgba(68, 145, 253, 1)'}],globalCoord: false},},outline: {borderDistance: 0,itemStyle: {borderWidth: 20,borderColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(69, 73, 240, 0)'}, {offset: 0.5,color: 'rgba(69, 73, 240, .25)'}, {offset: 1,color: 'rgba(69, 73, 240, 1)'}],globalCoord: false},shadowBlur: 10,shadowColor: '#000',}},color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: 'rgba(58, 71, 212, 0)'}, {offset: 0.5,color: 'rgba(31, 222, 225, .2)'}, {offset: 0,color: 'rgba(31, 222, 225, 1)'}],globalCoord: false},label: {normal: {formatter: '',}}}, ]};if (option && typeof option === "object") {myChart.setOption(option, true);}window.onresize = function() {myChart.resize();}</script></body></html>
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
