echarts可视化(swiper+echarts实现多个仪表盘左右滚动效果)
类别:编程学习 浏览量:710
时间:2021-10-19 06:43:39 echarts可视化
swiper+echarts实现多个仪表盘左右滚动效果本文实例为大家分享了swiper+echarts实现仪表盘左右滚动效果的具体代码,供大家参考,具体内容如下
1、swiper的使用
a.首先加载插件
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper.min.css" > </head> <body> ... <script src="dist/js/swiper.min.js"></script> ... </body> </html>
b.HTML内容
<li class="swiper-container"> <li class="swiper-wrapper"> <li class="swiper-slide">Slide 1</li> <li class="swiper-slide">Slide 2</li> <li class="swiper-slide">Slide 3</li> </li> <!-- 如果需要分页器 <li class="swiper-pagination"></li>--> <!-- 如果需要导航按钮 --> <li class="swiper-button-prev"></li> <li class="swiper-button-next"></li> <!-- 如果需要滚动条 <li class="swiper-scrollbar"></li>--> </li>
c.你可能想要给Swiper定义一个大小,当然不要也行。
.swiper-container { width: 600px; height: 300px; }
d.初始化Swiper:最好是挨着</body>标签
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>
下面是我要实现的效果
代码如下
加载插件和样式
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper.min.css" > <style> *{ margin:0; padding:0; } .swiper-container{ height:200px; width:800px; margin:0 auto; border:1px solid #ccc; } .swiper-slide{ display:flex; } .swiper-slide .chart{ flex:1; } </style> </head> <body> ... <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script> <script src="dist/js/swiper.min.js"></script> ... </body> </html>
html结构
<li class="swiper-container"> <li class="swiper-wrapper"> <li class="swiper-slide"> <li class="chart" id="chart1">1</li> <li class="chart" id="chart2">2</li> <li class="chart" id="chart3">3</li> </li> <li class="swiper-slide"> <li class="chart" id="chart4">4</li> <li class="chart" id="chart5">5</li> <li class="chart" id="chart6">6</li> </li> <li class="swiper-slide"> <li class="chart" id="chart7">7</li> <li class="chart" id="chart8">8</li> <li class="chart" id="chart9">9</li> </li> </li> <li class="swiper-button-prev"></li> <li class="swiper-button-next"></li> </li>
初始化swiper
var mySwiper = new Swiper('.swiper-container', { autoplay: { delay:5000 },//可选选项,自动滑动\ navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } })
初始化echarts
function initChart(obj){ var myChart = echarts.init(document.getElementById(obj)); var option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, series: [ { type : "gauge", center: ["50%", "50%"], // 默认全局居中 radius : "90%", startAngle: 200, endAngle: -20, axisLine : { show : true, lineStyle : { // 属性lineStyle控制线条样式 color : [ //表盘颜色 [ 0.5, "#DA462C" ],//0-50%处的颜色 [ 0.7, "#FF9618" ],//51%-70%处的颜色 [ 0.9, "#FFED44" ],//70%-90%处的颜色 [ 1,"#20AE51" ]//90%-100%处的颜色 ], width : 20//表盘宽度 } }, splitLine : { //分割线样式(及10、20等长线样式) length : 10, lineStyle : { // 属性lineStyle控制线条样式 width : 2 } }, axisTick : { //刻度线样式(及短线样式) length : 20 }, axisLabel : { //文字样式(及“10”、“20”等文字样式) color : "black", distance : 10//文字离表盘的距离 }, detail: { formatter : "{score|{value}%}", offsetCenter: [0, "40%"], // backgroundColor: '#FFEC45', height:20, rich : { score : { // color : "#333", fontFamily : "微软雅黑", fontSize :14 } } }, data: [{ value: 56, label: { textStyle: { fontSize: 12 } } }] } ] } setInterval(function () { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); },2000); }
调用初始化化echats函数
initChart('chart1') initChart('chart2') initChart('chart3') initChart('chart4') initChart('chart5') initChart('chart6') initChart('chart7') initChart('chart8') initChart('chart9')
插播一个echarts仪表盘的配置函数
function initChart(obj){ var myChart = echarts.init(document.getElementById(obj)); var option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, // toolbox: { // feature: { // restore: {}, // saveAsImage: {} // } // }, series: [ { name: '业务指标', type: 'gauge', center: ["50%", "45%"], // 仪表位置 radius: "80%", //仪表大小 detail: {formatter:'{value}%'}, startAngle: 200, //开始角度 endAngle: -20, //结束角度 data: [{value: 30, name: '完成率'}], axisLine: { show: false, lineStyle: { // 属性lineStyle控制线条样式 color: [ [ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 1, color: "#E75F25" // 50% 处的颜色 }, { offset: 0.8, color: "#D9452C" // 40% 处的颜色 }], false) ], // 100% 处的颜色 [ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 1, color: "#FFC539" // 70% 处的颜色 }, { offset: 0.8, color: "#FE951E" // 66% 处的颜色 }, { offset: 0, color: "#E75F25" // 50% 处的颜色 }], false) ], [ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: "#C7DD6B" // 90% 处的颜色 }, { offset: 0.8, color: "#FEEC49" // 86% 处的颜色 }, { offset: 0, color: "#FFC539" // 70% 处的颜色 }], false) ], [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0.2, color: "#1CAD52" // 92% 处的颜色 }, { offset: 0, color: "#C7DD6B" // 90% 处的颜色 }], false) ] ], width: 10 } }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, pointer : { //指针样式 length: '45%' }, detail: { show: false } } ] } setInterval(function () { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); },2000); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- echarts可视化(swiper+echarts实现多个仪表盘左右滚动效果)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
热门推荐
- python3列表的使用教程(对Python3 pyc 文件的使用详解)
- nginx动静分离的原理(Nginx动静分离实现案例代码解析)
- dedecms新手建站教程网页设计(DEDECMS幻灯片中JavaScript实际应用举例)
- 两个阿里云账号服务器内网通信(阿里云服务器怎么与租用香港服务器组内网?)
- python如何编写一个用户登录系统(Python实现的登录验证系统完整案例基于搭建的MVC框架)
- php如何对文本框输入小数的小数点(PHP保留两位小数的几种方法)
- iis默认文档位置(在IIS6中新增可下载文件类型的方法)
- CSS3 border-radius实现边框圆角
- python itchat库介绍(Python利用itchat库向好友或者公众号发消息的实例)
- 一个网站服务器有多大(主流网站服务器配置有哪些组成 主流网站服务器多少钱)