177 lines
4.0 KiB
HTML
177 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport"
|
||
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title></title>
|
||
|
|
<style type="text/css">
|
||
|
|
html,
|
||
|
|
body,
|
||
|
|
.canvas {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
overflow-y: hidden;
|
||
|
|
background-color: transparent;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="canvas" id="limeChart"></div>
|
||
|
|
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||
|
|
<script type="text/javascript" src="./echarts.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||
|
|
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||
|
|
<script>
|
||
|
|
let chart = null;
|
||
|
|
let cache = [];
|
||
|
|
console.log = function(...agrs) {
|
||
|
|
postMessage(agrs)
|
||
|
|
}
|
||
|
|
|
||
|
|
function emit(event, data) {
|
||
|
|
let dataStr = JSON.stringify(data, stringify)
|
||
|
|
postMessage({
|
||
|
|
event,
|
||
|
|
data: dataStr
|
||
|
|
})
|
||
|
|
cache = []
|
||
|
|
}
|
||
|
|
|
||
|
|
function postMessage(data) {
|
||
|
|
uni.postMessage({
|
||
|
|
data
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function stringify(key, value) {
|
||
|
|
if (typeof value === 'object' && value !== null) {
|
||
|
|
if (cache.indexOf(value) !== -1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
cache.push(value);
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|
||
|
|
function parse(name, callback, options) {
|
||
|
|
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||
|
|
if (optionNameReg.test(callback)) {
|
||
|
|
const optionNames = callback.match(optionNameReg)
|
||
|
|
if (optionNames[1]) {
|
||
|
|
const _this = optionNames[1].split('.')[0]
|
||
|
|
window[_this] = {}
|
||
|
|
window[_this][optionNames[2]] = options
|
||
|
|
return optionNames[2]
|
||
|
|
} else {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(callback, options, opts = {}, theme = null) {
|
||
|
|
if (!chart) {
|
||
|
|
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||
|
|
if (options) {
|
||
|
|
chart.setOption(options)
|
||
|
|
}
|
||
|
|
// const name = parse('a', callback, options)
|
||
|
|
// console.log('options::', callback)
|
||
|
|
// if(name) this[name] = options
|
||
|
|
// eval(`a = ${callback};`)
|
||
|
|
// if(a) {a(chart)}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setChart(callback, options) {
|
||
|
|
if (!callback) return
|
||
|
|
if (chart && callback && options) {
|
||
|
|
var r = null
|
||
|
|
const name = parse('r', callback, options)
|
||
|
|
if (name) this[name] = options
|
||
|
|
eval(`r = ${callback};`)
|
||
|
|
if (r) {
|
||
|
|
r(chart)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setOption(data) {
|
||
|
|
if (chart) chart.setOption(data[0], data[1])
|
||
|
|
}
|
||
|
|
|
||
|
|
function showLoading(data) {
|
||
|
|
if (chart) chart.showLoading(data[0], data[1])
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideLoading() {
|
||
|
|
if (chart) chart.hideLoading()
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear() {
|
||
|
|
if (chart) chart.clear()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function dispose() {
|
||
|
|
if (chart) chart.dispose()
|
||
|
|
}
|
||
|
|
|
||
|
|
function resize(size) {
|
||
|
|
if (chart) chart.resize(size)
|
||
|
|
}
|
||
|
|
|
||
|
|
function canvasToTempFilePath(opt = {}) {
|
||
|
|
if (chart) {
|
||
|
|
const src = chart.getDataURL(opt)
|
||
|
|
postMessage({
|
||
|
|
file: true,
|
||
|
|
data: src
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function on(data) {
|
||
|
|
if (chart && data.length > 0) {
|
||
|
|
const [type, query] = data
|
||
|
|
const useQuery = query && typeof query != 'function'
|
||
|
|
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||
|
|
if (query) {
|
||
|
|
chart.on(type, query, (options) => {
|
||
|
|
const obj = {}
|
||
|
|
Object.keys(options).forEach(key => {
|
||
|
|
if (key != 'event') {
|
||
|
|
obj[key] = options[key]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
emit(`@${key}`, {
|
||
|
|
event: key,
|
||
|
|
options: obj
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
chart.on(type, (options) => {
|
||
|
|
|
||
|
|
const obj = {}
|
||
|
|
Object.keys(options).forEach(key => {
|
||
|
|
if (key != 'event') {
|
||
|
|
obj[key] = options[key]
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
emit(`@${key}`, {
|
||
|
|
event: key,
|
||
|
|
options: obj
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|