代码拉取完成,页面将自动刷新
<?xml version="1.0" encoding="UTF-8"?>
<calcModuleDef>
<moduleId>test_clound_compontent</moduleId>
<moduleVersion>1.0</moduleVersion>
<moduleWriter>作者名称</moduleWriter>
<moduleTime>2020-07-19</moduleTime>
<moduleDesc>测试组件</moduleDesc>
<modulePicture>preview.png</modulePicture>
<modulePreview>index.html</modulePreview>
<moduleClassRouter>index.js</moduleClassRouter>
<moduleTestData>testData.json</moduleTestData>
<moduleMethodName>TestBar</moduleMethodName>
<publicJavascriptImport></publicJavascriptImport>
<publicCssImport></publicCssImport>
<javascriptImport>
<src>public/echarts.js</src>
<src>public/jquery.min.js</src>
</javascriptImport>
<cssImport>
<src>public/index.css</src>
</cssImport>
<moduleDataSet>
<x>
<allowed>true</allowed>
<inputNumber>1</inputNumber>
<isNull>false</isNull>
<description>请选择数据的字段</description>
<axisType>category</axisType>
</x>
<y>
<allowed>true</allowed>
<inputNumber>n</inputNumber>
<isNull>false</isNull>
<description>请选择数据的字段</description>
<axisType>value</axisType>
</y>
</moduleDataSet>
<moduleParam>
<param>
<id>xEn</id>
<desc>x轴单位</desc>
<inputType>textbox</inputType>
<defaultValue></defaultValue>
<remark>x轴单位</remark>
</param>
<param>
<id>yEn</id>
<desc>y轴单位</desc>
<inputType>textbox</inputType>
<defaultValue></defaultValue>
<remark>y轴单位</remark>
</param>
</moduleParam>
</calcModuleDef>
html: 命名为index.html
示例:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="public/echarts.js"></script>
<link rel="stylesheet" href="public/index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<style>
#test {
width: 1000px;
height: 500px;
}
</style>
<body>
<div id="test"></div>
</body>
<script>
const option = {
el: 'test',
params: [{
"id": "xEn",
"desc": "x轴单位",
"inputType": "textbox",
"defaultValue": "城市",
"remark": "x轴单位"
}, {
"id": "yEn",
"desc": "y轴单位",
"inputType": "textbox",
"defaultValue": "人数",
"remark": "y轴单位"
}],
dataset: [{
"疑似病例": 726,
"治疗数量": 841,
"城市(1)": "北京",
"感染数(1)": 658,
"疑似病例(1)": 193,
"治疗数量(1)": 203,
"x": "北京",
"y": 713
}, {
"疑似病例": 280,
"治疗数量": 717,
"城市(1)": "武汉",
"感染数(1)": 440,
"疑似病例(1)": 480,
"治疗数量(1)": 167,
"x": "武汉",
"y": 778
}, {
"疑似病例": 749,
"治疗数量": 325,
"城市(1)": "上海",
"感染数(1)": 534,
"疑似病例(1)": 426,
"治疗数量(1)": 389,
"x": "上海",
"y": 124
}, {
"疑似病例": 695,
"治疗数量": 778,
"城市(1)": "南京",
"感染数(1)": 577,
"疑似病例(1)": 682,
"治疗数量(1)": 595,
"x": "南京",
"y": 881
}, {
"疑似病例": 879,
"治疗数量": 883,
"城市(1)": "杭州",
"感染数(1)": 486,
"疑似病例(1)": 357,
"治疗数量(1)": 680,
"x": "杭州",
"y": 546
}, {
"疑似病例": 978,
"治疗数量": 548,
"城市(1)": "深圳",
"感染数(1)": 126,
"疑似病例(1)": 442,
"治疗数量(1)": 508,
"x": "深圳",
"y": 798
}]
}
window.onload = () => {
const chart = new window['TestBar'](option)
chart.init()
}
</script>
JavaScript: 根据plugin.xml进行配置
CSS:根据plugin.xml进行配置
静态数据:
预览图:根据plugin.xml进行配置
公共资源库:
发行包中public目录下CommonPlugins目录为公共插件资源
已存在的有echarts、jquery
用法示例
可用的公共资源如下:
echarts4.8
```html
<script type="text/javascript" src="/CommonPlugins/echarts4.8/echarts.min.js"></script>
echarts5.0
<script type="text/javascript" src="/CommonPlugins/echarts5.0/echarts.min.js"></script>
jquery3.5
<script type="text/javascript" src="/CommonPlugins/jquery3.5/jquery.min.js"></script>
请注意在使用公共资源时一定要保持plugin.xml与index.html保持一致
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。