<!DOCTYPE html>
|
<head>
|
<title>ECharts</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<style type="text/CSS">
|
div {background-color: transparent}
|
</style>
|
<script type="text/javascript">
|
var defaultTheme = {};
|
var blue = defaultTheme;
|
var dark = defaultTheme;
|
var gray = defaultTheme;
|
var green = defaultTheme;
|
var helianthus = defaultTheme;
|
var infographic = defaultTheme;
|
var macarons = defaultTheme;
|
var macarons2 = defaultTheme;
|
var mint = defaultTheme;
|
var red = defaultTheme;
|
var roma = defaultTheme;
|
var sakura = defaultTheme;
|
var shine = defaultTheme;
|
</script>
|
<!-- 主题引入 -->
|
<script src="theme/blue.js"></script>
|
<script src="theme/dark.js"></script>
|
<script src="theme/gray.js"></script>
|
<script src="theme/green.js"></script>
|
<script src="theme/helianthus.js"></script>
|
<script src="theme/infographic.js"></script>
|
<script src="theme/macarons.js"></script>
|
<script src="theme/macarons2.js"></script>
|
<script src="theme/mint.js"></script>
|
<script src="theme/red.js"></script>
|
<script src="theme/roma.js"></script>
|
<script src="theme/sakura.js"></script>
|
<script src="theme/shine.js"></script>
|
|
<!-- ECharts单文件引入 -->
|
<script src="js/echarts-all.js"></script>
|
<script type="text/javascript">
|
var option;
|
var myChart;
|
var ecConfig;
|
function echartViewAction(param) {
|
// alert(JSON.stringify(param));
|
// alert(window.webkit);
|
if(window.webkit == undefined) {
|
window.parent.frames['action_frame'].location.href = 'pyEchartAction://' + param.type + '#' + JSON.stringify(param) + ''; // Support for UIWebView
|
|
} else {
|
eval("window.webkit.messageHandlers." + param.type + ".postMessage(" + JSON.stringify(param) + ")"); // Support for WKWebView
|
}
|
//document.location.href = 'pyEchartAction://' + param.type + '#' + JSON.stringify(param) + '';
|
}
|
function preTask(obj) {
|
var result;
|
if(typeof(obj) == 'object') {
|
if(obj instanceof Array) {
|
result = new Array();
|
for (var i = 0, len = obj.length; i < len ; i++) {
|
result.push(preTask(obj[i]));
|
}
|
return result;
|
} else if(obj instanceof RegExp){
|
return obj;
|
} else {
|
result = new Object();
|
for (var prop in obj) {
|
result[prop] = preTask(obj[prop]);
|
}
|
return result;
|
}
|
} else if(typeof(obj) == 'string'){
|
try {
|
if(typeof(eval(obj)) == 'function'){
|
return eval(obj);
|
} else if (typeof(eval(obj) == 'object') && (eval(obj) instanceof Array || eval(obj) instanceof CanvasGradient)) {
|
return eval(obj);
|
}
|
}catch(e) {
|
return obj;
|
}
|
return obj;
|
} else {
|
return obj;
|
}
|
}
|
/**
|
* 构建动态图表
|
*/
|
function loadEcharts(echartJson, initParams){
|
//alert('init params : ' + JSON.stringify(echartJson));
|
initEchartView(initParams);
|
//alert('myChart:'+ myChart);
|
option = preTask(echartJson);
|
//alert('option:'+ option);
|
myChart.setOption(option);
|
}
|
function refreshWithOption(optionData) {
|
option = preTask(optionData);
|
myChart.setOption(option, true);
|
}
|
function resizeDiv(cssText) {
|
//alert('cssText:'+cssText);
|
var divMain = document.getElementById("main");
|
//alert('divMain:'+divMain);
|
divMain.style.cssText = cssText;
|
}
|
function obtainEchartsImage(type){
|
//alert("type:" + type);
|
var result = myChart.getDataURL(type);
|
//alert('result:'+result);
|
//document.location.href = 'pyEchartAction://obtainImg#' + result + '';
|
if(window.webkit == undefined) {
|
window.parent.frames['action_frame'].location.href = 'pyEchartAction://obtainImg#' + result + ''; // Support for UIWebView
|
} else {
|
window.webkit.messageHandlers.obtainImg.postMessage(result); // Support for WKWebView
|
}
|
}
|
function initEchartView(initParams) {
|
// 基于准备好的dom，初始化echarts图表
|
if (initParams == null || initParams == 'undefined') {
|
myChart = echarts.init(document.getElementById('main'));
|
//alert('myChart:' + myChart);
|
} else {
|
myChart = echarts.init(document.getElementById('main'), initParams);
|
}
|
myChart.setTheme(eval('macarons'));
|
|
}
|
function addEchartActionHandler(eventName) {
|
var ecConfig = echarts.config;
|
myChart.on(eventName, echartViewAction);
|
}
|
function removeEchartActionHandler(name) {
|
myChart.un(name, echartViewAction);
|
}
|
function changeDataZoomRange(start, end) {
|
option = myChart.getOption();
|
option.dataZoom.start = start;
|
option.dataZoom.end = end;
|
myChart.component.dataZoom.absoluteZoom({'start':start, 'end': end});
|
myChart.setOption(option, true);
|
}
|
</script>
|
</head>
|
<body style="background-color: #eff7ff;margin:0px"><!-- transparent-->
|
<iframe name="action_frame" src="" style="display:none;"></iframe>
|
<div id="main" style="position:absolute;width:100%;height:100%;" ></div><!-- style="height:270px;width:420px;margin-left:-30px;"-->
|
</body>
|
