首页
Search
1
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
45 阅读
2
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
38 阅读
3
如何在 IOS Shadowrocket 上配置服务
34 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
34 阅读
5
如何在 Clash for Windows 上配置服务
30 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
635
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
339
篇与
的结果
2024-08-22
百度 Echarts showLoading 和 hideLoading 使用方法
百度 Echarts showLoading 和 hideLoading 使用方法在使用ECharts渲染数据时,由于从后台执行获取到前台需要3-4s,想要通过增加正在执行,请等待这类提示信息提升用户体验,myChart1 = echarts.init(document.getElementById(ipArr[idx]+'echarts')); myChart1.showLoading({ text : '正在加载数据' }); //增加提示 ··· //省略通过ajax异步获取数据,获取数据完成后,调用下面function //function中echarts部分代码 var option = {···} myChart1.hideLoading(); //提示关闭 myChart1.setOption(option);ECharts自带的加载框可以调整样式myChart.showLoading({ text: 'loading', color: '#c23531', textColor: '#000', maskColor: 'rgba(255, 255, 255, 0.8)', zlevel: 0 });
2024年08月22日
2 阅读
0 评论
0 点赞
2024-08-22
echarts生成中国地形图,中国地图数据统计
基于echarts实现中国地图显示,省份区域地区鼠标悬停显示区域数据,数据从低到高,显示不同的颜色,主要用于数据统计。效果如下图所示:步骤1:引入相关地图文件引入 echarts.min.js 和 china.js附件下载及案例:扫码关注“简忆博客”,回复“echartcn”,获取。步骤2:用于存放地图的盒子<div id="region" style="width: 700px;height:600px;"></div>步骤3:js实例化代码:<script> var myChart2 = echarts.init(document.getElementById('region')); var option2 = { backgroundColor: '#FFFFFF', title: { text: '中国', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { min: 0, max: 1000000, text:['高','低'], realtime: false, calculable: false, color: ['orangered','yellow','lightskyblue'] }, series: [{ name: '浏览量', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#FFF7FB',//区域边框颜色 areaColor:"#C4E1FF",//区域颜色 }, emphasis: { borderWidth: .5, borderColor: '#4b0082', areaColor:"#ece39e", } }, data:[ {name: '北京', value: 1100}, {name: '湖北', value: 2221250}, {name: '上海', value: 1500}, {name: '广州', value: 5200}, {name: '广东', value: 900500}, {name: '新疆', value: 5000}, {name: '西藏', value: 500000}, {name: '湖南', value: 21250}, {name: '内蒙古', value: 182250} ] }] }; myChart2.setOption(option2); </script>以上就是echarts实现中国地图分布案例,常见的区域分布图,我们在百度统计上可以看到类似,还有今年2020的全国区域疫情概况分布图,大家只需稍微更改下,自定义下即可。注:echarts生成世界地图方法参考:https://www.tpxhm.com/fdetail/391.html
2024年08月22日
8 阅读
0 评论
0 点赞
2024-08-22
echarts生成世界地图,百度echarts生成世界地图方法
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。然而我们现在来使用它制作世界地图。步骤1:引入相应的文件(echarts.min.js 和 world.js) <script type="text/javascript" src="https://www.tpxhm.com/fdetail/echarts/echarts.min.js"></script> <script type="text/javascript" src="https://www.tpxhm.com/fdetail/echarts/world.js"></script>附件下载及案例获取:步骤2:用户放地图的div盒子<div id="map" style="width:1200px;height:500px;"></div>步骤3:js实例化地图<script> // 区域分布图 var myChart1 = echarts.init(document.getElementById('map')); var provinces = { visualMap: { min: 0, max: 1000000, text:['高','低'], realtime: false, calculable: true, color: ['orangered','yellow','lightskyblue'] }, series: [ { name: 'World Population (2010)', type: 'map', mapType: 'world', roam: true, itemStyle:{ emphasis:{label:{show:true}} }, data: [ {name: '中国', value: 28397.812}, {name: '美国', value: 19549.124}, {name: '日本', value: 3150.143}, {name: '韩国', value: 8441.537}, {name: '澳大利亚', value: 1111844}, ] } ] }; myChart1.setOption(provinces); </script>世界地图分布主要用于数据统计,以上是一个简单的案例,仅供大家参考,注:echart生成中国地形图案例:https://www.tpxhm.com/fdetail/390.html
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
在vue中引入echarts方法,echarts5版本的引用方法
1、ECharts 5 新特性数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。Apache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。2、vue中引入echarts5方法2.1安装echarts5插件npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -S2.2、引入已安装插件<script> import * as echarts from 'echarts'; export default { // 此时页面上的元素已被渲染完毕 mounted(){ // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } </script>3、效果展示
2024年08月22日
5 阅读
0 评论
0 点赞
2024-08-22
百度echarts如何修改曲线背景颜色或者线条颜色
百度ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。但是echarts默认的颜色我们不喜欢的话,可以通过过下面的设置进行修改,具体如下:1、设置线条颜色:在series下添加itemStyle itemStyle : { normal : { color:'#99CC33' } }, series: [ { name: '订单数', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210], itemStyle : { normal : { color:'#99CC33' } }, }, ],2、设置背景颜色:在series下添加areaStyleareaStyle: { color: ['#409eff'] },series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', areaStyle: { color: ['#409eff'] }, } ],
2024年08月22日
3 阅读
0 评论
0 点赞
1
...
52
53
54
...
68