技术标签: echarts json jquery 前端大屏展示
最近需要做一个大屏展示,需要用原生html5+css+js来写,所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG,百度那是必不可少的,可是这些人写的牛头不对马嘴,简直是标题党一大堆,令我作呕,现将我认为比较重要的两个问题记录如下。
我们在使用echarts绘制图表的时候,不可能是将数据写死在代码中的,没有后台的情况下一般是将数据封装在JSON
中,代码中读取JSON文件
来获取数据。
我使用的是jquery
的getJSON
函数来读取本地json文件,示例代码如下:
<script src="../js/jquery-3.6.4.min.js"></script>
<script>
$.getJSON('../json/test/test.json',function (data) {
console.log(data)
})
</script>
数据是能正常获取到的:
我们这时候把数据丢进echarts中,发现图表显示不出来,但是如果我们把数据写在一个JS变量中,图表就能正常显示了,此处不做演示了。
原因就是jquery加载本地json文件时是异步加载的,我们需要把echarts的代码放在回调函数中,才能正常加载图表,代码如下:
var myChart = echarts.init(document.querySelector('.pie .chart'));
//因为这里加载json数据是异步加载的,所有代码都得放进回调函数中,否则图表显示不出来
$.getJSON('../json/阳朔县/阳朔县碳储量.json', function (data) {
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
//距离底部为10%
bottom: '0%',
//小图标的宽度和高度
itemWidth: 10,
itemHeight: 10,
// 修改图例组件的文字为 12px
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
color: ['#5EA6FE', '#45FBF7', '#48FF58', '#EAE809', '#FF7E3F', '#FF4746', '#E177F9', '#4E6BFF', '#ffffff'],
name: data.name,
type: 'pie',
// 设置饼形图在容器中的位置,水平和垂直
center: ["50%", "34%"],
// 修改内圆半径和外圆半径为 百分比是相对于容器宽度来说的
radius: ['35%', '50%'],
//图形上的文字设置
label: {
color: '#fff',
fontSize: 12,
},
//连接文字和图形上的线是否显示
//引导线调整
labelLine: {
show: true,
},
data: data.data
}
]
};
myChart.setOption(option);
});
//4、让图表跟随屏幕自适应
window.addEventListener("resize", function () {
myChart.resize();
});
此时就能正常显示图表了
我们可以去下载一个webstorm,直接用该软件的快捷方式打开html文件,也不会报跨域问题:
比如用vscode、hbuilder、修改浏览器配置等等,网上都能找得到对应的办法,这里不做详细说明。这类解决方法的缺点就是,开发人员能访问了,但是用户访问不了,总不能让用户去下载这几个开发软件吧?所以这类办法只能解决开发端的跨域问题,下面介绍几个通用解决方案。
这里提个醒,用这种方法的话,json格式会报错,但是不会影响代码正常运行,用就完事了!!
还有就是因为是用script
标签的缘故,所以代码只能写在html
中,想写在js文件中是不行的。
首先到tomcat官网下载tomcat并解压:
得到一个文件夹:
我们新建一个站点,打开webapps
目录,将ROOT
复制一份,命名随意,我这里就起test
吧,如图:
将里面的文件除了WEB-INF
之外,全部删除,只留下WEB-INF
,如图:
我们对文件夹中的web.xml
进行配置,将下面的语句加到文件中:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>1000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
如图,反正就是丢在web-app
里面,格式我就不调了:
跨域配置好之后,我们直接把json文件丢在新建的站点文件夹中,如图:
双击bin
中的startup.bat
启动服务器,访问默认端口8080即可访问到服务器,后面加上站点文件夹名称即可访问到站点文件夹,根据自己的目录结构来访问具体的json文件,如果在本机上就是localhost:8080/test/json/xxx.json
(注意:电脑上需要有java环境并且配置了环境变量才能启动tomcat,否则会闪退,具体操作自行百度)
如果是在服务器上,就把localhost
换成服务器的IP地址
,想修改端口的话,就在conf目录下的server.xml中修改,修改之后需要重新启动:
把jquery中的json文件地址换成服务器中的地址即可解决跨域问题!!!
不用tomcat,用其他的服务器比如nginx、apache也行,看自己的需要自己选择!!
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数