ECharts.테스트 01
1.1 안에 있는 지도의 표시 부분을 제거한다...
1.2 이 안의 원본 코드는 정적이며 기둥 모양의 그림만 한 번 보인다.나는 기둥 모양의 그림을 동적으로 바꾸는 단추를 추가했다
2. 코드:
2.1 코드에 사용된 플러그인 echarts-2.2.7은 "E:\ZC IDE\JavaScript 3rd\echarts-2.2.7(1).zip"
2.2、
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EChartstitle>
head>
<body>
<input type="button" value="testBtn" onclick="TestBtnClick()"/>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;">div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;">div>
<script src="js/echarts.js">script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 echarts ， echarts.js，
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 echarts ，
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
EChartCallback
);
var g_ecDom = document.getElementById('main');
var g_ecChart = null;
var g_ec = null;
var g_ecOption = null;
function EChartCallback(_ec)
{
g_ec = _ec;
//--- ---
g_ecChart = _ec.init(g_ecDom);
console.log("_ec : "+_ec+" , g_ecChart : "+g_ecChart);
g_ecOption =
{
tooltip : {
trigger: 'axis'
},
legend: {
data:[' ',' ']
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1 ','2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','10 ','11 ','12 ']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
]/*,
series : [
{
name:' ',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:' ',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
//*/
};// g_ecOption
//*
var series = [];
var series01 =
{
name:' ',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
};
var series02 =
{
name:' ',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
};
series.push(series01);
series.push(series02);
g_ecChart.setOption(g_ecOption);
g_ecChart.setSeries(series);
/**/
console.log("g_ecOption.series(01) : "+g_ecOption.series);
}
//*
function TestBtnClick()
{
console.log("g_ecOption.series(02) : "+g_ecOption.series);
var series = [];
var series01 =
{
name:' ',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
};
var series02 =
{
name:' ',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 1182.2, 48.7, 18.8, 6.0, 2.3]
};
series[0] = series01;
series[1] = series02;
if (! g_ec)
return;
//var chart = g_ec.init(g_dom);// ( [doc] " " )
//var chart = require('echarts').init(g_dom);// ( [doc] " " )
//chart.setOption(g_ecOption);
//chart.setSeries(series);
g_ecChart.setOption(g_ecOption);// ( _ec[ ]， g_ecChart)
g_ecChart.setSeries(series);
console.log("g_ecOption.series(03) : "+g_ecOption.series);
// echarts init
/*
var chart1 = g_ec.init(g_ecDom);//
if (g_ecChart == chart1)
console.log("g_ecChart == chart1");
else
console.log("g_ecChart != chart1");
// ，
chart1.setOption(g_ecOption);
chart1.setSeries(series);
var chart2 = require('echarts').init(g_ecDom);//
if (g_ecChart == chart2)
console.log("g_ecChart == chart2");
else
console.log("g_ecChart != chart2");
chart2.setOption(g_ecOption);
chart2.setSeries(series);
//*/
}
script>
body>
html>3、
4、
5、
전재 대상:https://www.cnblogs.com/H5UI/p/8482070.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
