极客时间 - ZooKeeper 实战与源码剖析
 名称：极客时间 - ZooKeeper 实战与源码剖析 描述：系统掌握 ZooKeeper 核心原理！
程序视频28 热度
最新资源
VIP
3月前
VIP
网易云 - 微专业 - 大数据开发工程师 - 带源码课件
 名称：网易云 - 微专业 - 大数据开发工程师 - 带源码课件 描述：企业级数据仓库建设，PB级历史数据离线计算，毫秒级低延迟实时计算。
程序视频34 热度
3月前
VIP
守夜人Jaden - 2023网络安全攻防渗透大师课 - 带源码课件
 名称：守夜人Jaden - 2023网络安全攻防渗透大师课 - 带源码课件 描述：守夜人jaden-吴老板全力打造，适合小白的零基础入门教程分享。
程序视频13 热度
3月前
VIP
LAMP兄弟连 - MySQL特级课视频教程
 名称：LAMP兄弟连 - MySQL特级课视频教程 描述：如何从一个构架上的角度去分析网站的运营，如何去解决一些突发的事件，如何去防止网站因为访问量过大而出现崩溃，如果你对这些都有疑问，那么《兄弟连大型网站架构之MySQL视频教程》很适合你，一起来解开这些疑问吧！！！
程序视频9 热度
3月前
最新软件
Android 全民小说 v7.14.3 会员破解版
74热度
Duolingo 多邻国 v5.141.70 Android 解锁高级版
36热度
MarkText-简单优雅的开源 Markdown 编辑器
24热度
pyVideoTrans-免费开源视频翻译配音工具 一键实现
20热度
VIP
解压缩软件：Bandizip 7.35 便携专业版 (win/mac)
26热度
最新文章
11.硅谷甄选-中国地图
11.硅谷甄选-中国地图 ### 1.效果  ### 2.代码 china.json数据如下方式获取 https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.50475906922609&lng=104.2822265625&zoom=4 ``` <template> <div class="box4" ref="map"> 我是地图组件 </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import * as echarts from 'echarts'; //引入中国地图的JSON数据 import chinaJSON from './china.json' //获取DOM元素 let map = ref(); //注册中国地图 echarts.registerMap('china', chinaJSON as any) onMounted(() => { let mychart = echarts.init(map.value); //设置配置项 mychart.setOption({ //地图组件 geo: { map: 'china',//中国地图 roam: true,//鼠标缩放的效果 //地图的位置调试 left: 150, top: 150, right: 150, zoom:1.2, bottom: 0, //地图上的文字的设置 label: { show: true,//文字显示出来 color: 'white', fontSize: 14 }, itemStyle: { //每一个多边形的样式 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false }, opacity: .8 }, //地图高亮的效果 emphasis: { itemStyle: { color: 'red' }, label: { fontSize: 40 } } }, //布局位置 grid: { left: 0, top: 0, right: 0, bottom: 0 }, series: [ { type: 'lines',//航线的系列 data: [ { coords: [ [116.405285, 39.904989], // 起点 [119.306239, 26.075302] // 终点 ], // 统一的样式设置 lineStyle: { color: 'orange', width: 5 } }, { coords: [ [116.405285, 39.904989], // 起点 [114.298572,30.584355] // 终点 ], // 统一的样式设置 lineStyle: { color: 'yellow', width: 5 } } ], //开启动画特效 effect: { show: true, symbol: 'arrow', color: 'black', symbolSize: 10 } } ] }) }); </script> <style scoped></style> ```
前端167 热度
2024年6月23日
VIP
10.硅谷甄选-饼状图
10.硅谷甄选-饼状图 ### 1.效果  ### 2.代码 ``` <template> <div class="box2"> <div class="title"> <p>年龄比例</p> <img src="../../images/dataScreen-title.png" alt=""> </div> <!-- 图形图标的容器 --> <div class="charts" ref="charts"></div> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; //引入echarts import * as echarts from 'echarts'; let charts = ref(); //组件挂载完毕初始化图形图标 onMounted(() => { let mychart = echarts.init(charts.value); //设置配置项 let option = { tooltip: { trigger: 'item' }, legend: { right: 30, top: 40, orient: 'vertical',//图例组件方向的设置 textStyle: { color: 'white', fontSize: 14 } }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, position: 'inside', color:'white' }, labelLine: { show: false }, data: [ { value: 1048, name: '军事' }, { value: 735, name: '新闻' }, { value: 580, name: '直播' }, { value: 484, name: '娱乐' }, { value: 300, name: '财经' } ] } ], //调整图形图标的位置 grid: { left: 0, top: 0, right: 0, bottom: 0 } }; mychart.setOption(option); }); </script> <style scoped lang="scss"> .box2 { width: 100%; height: 100%; background: url(../../images/dataScreen-main-cb.png) no-repeat; background-size: 100% 100%; .title { margin-left: 20px; p { color: white; font-size: 20px; } } .charts { height: 260px; } } </style> ```
前端74 热度
2024年6月23日
VIP
9.硅谷甄选-折线图
9.硅谷甄选-折线图 ### 1.效果  ### 2.代码 ``` <template> <div class="box5"> <div class="title"> <p>未来七天游客数量趋势图</p> <img src="../../images/dataScreen-title.png" alt=""> </div> <div class="charts" ref='line'></div> </div> </template> <script setup lang="ts"> import * as echarts from 'echarts'; import { ref, onMounted } from 'vue'; //获取图形图标的节点 let line = ref(); onMounted(() => { let mycharts = echarts.init(line.value); //设置配置项 mycharts.setOption({ //标题组件 title: { text: '访问量' }, //x|y轴 xAxis: { type: 'category', //两侧不留白 boundaryGap: false, //分割线不要 splitLine: { show: false }, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //轴线的设置 axisLine: { show: true }, //刻度 axisTick: { show: true } }, yAxis: { splitLine: { show: false }, //轴线的设置 axisLine: { show: true }, //刻度 axisTick: { show: true } }, grid: { left: 40, top: 0, right: 20, bottom: 20 }, //系列 series: [ { type: 'line', data: [120, 1240, 66, 2299, 321, 890, 1200], //平滑曲线的设置 smooth: true, //区域填充样式 areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false } } } ] }) }) </script> <style scoped lang="scss"> .box5 { width: 100%; height: 100%; background: url(../../images/dataScreen-main-cb.png) no-repeat; background-size: 100% 100%; margin: 0px 20px; .title { margin-left: 10px; p { color: white; font-size: 20px; } } .charts { height: calc(100% - 40px); } } </style> ```
前端49 热度
2024年6月23日
VIP
8.硅谷甄选-雷达图
8.硅谷甄选-雷达图 ### 1.效果  ### 2.代码 ``` <template> <div class="box8"> <div class="title"> <p>数据统计</p> <img src="../../images/dataScreen-title.png" alt=""> </div> <div class="charts" ref="charts"></div> </div> </template> <script setup lang="ts"> import * as echarts from 'echarts'; import { ref, onMounted } from 'vue'; //获取DOM节点 let charts = ref(); //组件挂载完毕 onMounted(() => { //一个容器可以同时展示多种类型的图形图标 let mychart = echarts.init(charts.value); let option = { title: { text: '游客消费统计', textStyle:{ color:'white' } }, radar: { // shape: 'circle', indicator: [ { name: '消费', max: 6500 }, { name: '好感', max: 16000 }, { name: '出行', max: 30000 }, { name: '小吃', max: 38000 }, { name: '爱好', max: 52000 }, { name: '景点', max: 25000 } ] }, series: [ { name: 'Budget vs spending', type: 'radar', data: [ { value: [4200, 3000, 20000, 35000, 50000, 18000], name: '购物' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: '吃饭' } ] } ] }; //设置配置项 mychart.setOption(option) }) </script> <style scoped lang="scss"> .box8 { width: 100%; height: 100%; background: url(../../images/dataScreen-main-cb.png) no-repeat; background-size: 100% 100%; margin-top: 20px; .title { p { color: white; font-size: 18px; } } .charts { height: calc(100% - 30px); } } </style> ```
前端32 热度
2024年6月23日