mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-06-17 21:56:19 +02:00
Start again
This commit is contained in:
Vendored
+55
@@ -0,0 +1,55 @@
|
||||
# Test Guide
|
||||
|
||||
|
||||
|
||||
## Functional Test
|
||||
|
||||
Open `./*.html` files in Web Browsers.
|
||||
|
||||
|
||||
|
||||
## Unit Test
|
||||
|
||||
### Rendering-relevant
|
||||
|
||||
Our test strategy is to compare the rendered canvas of current version with last release version. The comparison can either based on the *content* of rendered canvas, or the *stack* of canvas operations.
|
||||
|
||||
When a test case fails, it doesn't necessary to be a bug since the rendering method may be changed intentionally in a commit. So in this case, we output the rendering result of both versions and the diff result.
|
||||
|
||||
Make sure `../dist/echarts.js` is the built based on current source files by:
|
||||
|
||||
```bash
|
||||
cd ../build
|
||||
npm install
|
||||
bash build.sh
|
||||
```
|
||||
|
||||
By default, we compare current version with last release version. To run the test, you should first download last release using:
|
||||
|
||||
```bash
|
||||
cd ../test/ut
|
||||
./configure
|
||||
```
|
||||
|
||||
which will download `echart.js` of last release into `./ut/tmp/oldEcharts.js`.
|
||||
|
||||
Then, open `./ut/ui.html` in Web Browsers.
|
||||
|
||||
#### Compare current with a specific release
|
||||
|
||||
If one argument is passed, we take it as the hash code of a release and compare current version with `/dist/echarts.js` of the that version.
|
||||
|
||||
```bash
|
||||
# this compares current `/dist/echarts.js` with that of v3.1.6
|
||||
./configure 3724a16
|
||||
```
|
||||
|
||||
#### Compare arbitrary two commits
|
||||
|
||||
Since `/dist/echarts.js` is only the build result of release versions, to compare arbitrary versions, you need to checkout specific commits and build the source files. Put the build results as `./tmp/oldEcharts.js` and `./tmp/newEcharts.js` will work.
|
||||
|
||||
|
||||
|
||||
### Rendering-irrelevant
|
||||
|
||||
Open `./ut.html` files in Web Browsers.
|
||||
Vendored
+146
@@ -0,0 +1,146 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'zrender/vml/vml'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
xAxisData.push('类目' + -1);
|
||||
data1.push('-');
|
||||
data2.push('-');
|
||||
data3.push('-');
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((-Math.random() - 0.2).toFixed(3));
|
||||
data2.push((Math.random() + 0.3).toFixed(3));
|
||||
data3.push((Math.random() + 0.2).toFixed(3));
|
||||
}
|
||||
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push('-');
|
||||
data2.push('-');
|
||||
data3.push('-');
|
||||
|
||||
for (; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((-Math.random() - 0.2).toFixed(3));
|
||||
data2.push((Math.random() + 0.3).toFixed(3));
|
||||
data3.push((Math.random() + 0.2).toFixed(3));
|
||||
}
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push('-');
|
||||
data2.push('-');
|
||||
data3.push('-');
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
// borderColor: 'white',
|
||||
// borderWidth: 3,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
lineStyle: {
|
||||
width: 2
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
areaStyle: {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
// inverse: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: itemStyle,
|
||||
smooth: true,
|
||||
connectNulls: true
|
||||
}, {
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data2,
|
||||
itemStyle: itemStyle,
|
||||
connectNulls: true,
|
||||
smooth: true
|
||||
}, {
|
||||
name: 'line3',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data3,
|
||||
itemStyle: itemStyle,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
connectNulls: true,
|
||||
smooth: true
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+193
File diff suppressed because one or more lines are too long
Vendored
+616
@@ -0,0 +1,616 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#main {
|
||||
position: relative;
|
||||
min-width: 1080px; /* 4 columns */
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background: #eef;
|
||||
line-height: 22px;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
vertical-align: top;
|
||||
margin: 30px 0 30px 50px;
|
||||
}
|
||||
.block .ec {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.block label {
|
||||
width: 200px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="main"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var echarts;
|
||||
var zrUtil;
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'zrender/core/util',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/parallel',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/parallel',
|
||||
'echarts/component/tooltip'
|
||||
], function (ec, zu) {
|
||||
echarts = ec;
|
||||
zrUtil = zu;
|
||||
|
||||
|
||||
|
||||
var makeCartesian = zrUtil.curry(makeChart, defaultCartesianOption);
|
||||
var makeCategoryOnY = zrUtil.curry(makeChart, categoryOnYOption);
|
||||
var makePolar = zrUtil.curry(makeChart, defaultPolarOption);
|
||||
|
||||
|
||||
console.profile('render');
|
||||
renderTitle('cartesian normal');
|
||||
|
||||
// inverse
|
||||
makeCartesian('x: forward, y: forward', {
|
||||
xAxis: {},
|
||||
yAxis: {}
|
||||
});
|
||||
makeCartesian('x: inverse, y: inverse', {
|
||||
xAxis: {inverse: true},
|
||||
yAxis: {inverse: true}
|
||||
});
|
||||
makeCartesian('x: forward, y: inverse', {
|
||||
xAxis: {},
|
||||
yAxis: {inverse: true}
|
||||
});
|
||||
makeCartesian('x: inverse, y: forward', {
|
||||
xAxis: {inverse: true},
|
||||
yAxis: {}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('cartesian min max and onZero');
|
||||
|
||||
makeCartesian('xAxis.axisLine.onZero: false, yAxis.min: 0.4, yAxis.max: 0.8', {
|
||||
xAxis: {axisLine: {onZero: false}},
|
||||
yAxis: {min: 0.4, max: 0.8}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisLine.onZero: false, yAxis.min: -5, yAxis.max: 1.8', {
|
||||
xAxis: {axisLine: {onZero: false}},
|
||||
yAxis: {min: -5, max: 1.8}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisLine.onZero: false, yAxis.min: -5', {
|
||||
xAxis: {axisLine: {onZero: false}},
|
||||
yAxis: {min: -5}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisLine.onZero: false, yAxis.max: 0.8', {
|
||||
xAxis: {axisLine: {onZero: false}},
|
||||
yAxis: {max: 0.8}
|
||||
});
|
||||
|
||||
makeCartesian('(zero outside) xAxis.axisLine.onZero: true, yAxis.min: 0.4, yAxis.max: 0.8', {
|
||||
xAxis: {axisLine: {onZero: true}},
|
||||
yAxis: {min: 0.4, max: 0.8}
|
||||
});
|
||||
|
||||
makeCartesian('(zero near top) xAxis.axisLine.onZero: true, yAxis.min: -5, yAxis.max: 1.8', {
|
||||
xAxis: {axisLine: {onZero: true}},
|
||||
yAxis: {min: -5, max: 1.8}
|
||||
});
|
||||
|
||||
makeCartesian('(zero near bottom) xAxis.axisLine.onZero: true, yAxis.min: -1, yAxis.max: 10', {
|
||||
xAxis: {axisLine: {onZero: true}},
|
||||
yAxis: {min: -1, max: 10}
|
||||
});
|
||||
|
||||
makeCategoryOnY('(zero near left) yAxis.axisLine.onZero: true, xAxis.min: -1, xAxis.max: 10', {
|
||||
xAxis: {min: -1, max: 10},
|
||||
yAxis: {axisLine: {onZero: true}},
|
||||
});
|
||||
|
||||
makeCategoryOnY('(zero near right) yAxis.axisLine.onZero: true, xAxis.min: -5, xAxis.max: 1.8', {
|
||||
xAxis: {min: -5, max: 1.8},
|
||||
yAxis: {axisLine: {onZero: true}},
|
||||
});
|
||||
|
||||
makeCategoryOnY('(zero right) yAxis.axisLine.onZero: true, xAxis.min: -5, xAxis.max: 1.8, yAxis.position: right', {
|
||||
xAxis: {min: -5, max: 1.8},
|
||||
yAxis: {axisLine: {onZero: true}, position: 'right'},
|
||||
});
|
||||
|
||||
makeCartesian('(zero top) xAxis.axisLine.onZero: true, yAxis.min: -1, yAxis.max: 1, xAxis.position: top', {
|
||||
xAxis: {axisLine: {onZero: true}, position: 'top'},
|
||||
yAxis: {min: -1, max: 1}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('cartesian category on y');
|
||||
|
||||
makeCategoryOnY('x: forward, y: forward', {
|
||||
xAxis: {},
|
||||
yAxis: {}
|
||||
});
|
||||
makeCategoryOnY('x: inverse, y: inverse', {
|
||||
xAxis: {inverse: true},
|
||||
yAxis: {inverse: true}
|
||||
});
|
||||
makeCategoryOnY('x: forward, y: inverse', {
|
||||
xAxis: {},
|
||||
yAxis: {inverse: true}
|
||||
});
|
||||
makeCategoryOnY('x: inverse, y: forward', {
|
||||
xAxis: {inverse: true},
|
||||
yAxis: {}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('cartesian position setting');
|
||||
|
||||
// position
|
||||
makeCartesian('x: forward top, y: forward right', {
|
||||
xAxis: {position: 'top'},
|
||||
yAxis: {position: 'right'}
|
||||
});
|
||||
makeCartesian('x: inverse bottom, y: inverse right', {
|
||||
xAxis: {inverse: true, position: 'bottom'},
|
||||
yAxis: {inverse: true, position: 'right'}
|
||||
});
|
||||
makeCartesian('x: forward bottom, y: inverse right', {
|
||||
xAxis: {position: 'bottom'},
|
||||
yAxis: {inverse: true, position: 'right'}
|
||||
});
|
||||
makeCartesian('x: inverse top, y: forward right', {
|
||||
xAxis: {inverse: true, position: 'top'},
|
||||
yAxis: {position: 'right'}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('cartesian tick or label inside');
|
||||
|
||||
makeCartesian('yAxis.axisTick: inside', {
|
||||
xAxis: {},
|
||||
yAxis: {axisTick: {inside: true}}
|
||||
});
|
||||
|
||||
makeCartesian('yAxis.axisLabel: inside, yAxis.axisTick: inside', {
|
||||
xAxis: {},
|
||||
yAxis: {axisLabel: {inside: true}, axisTick: {inside: true}}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisTick: inside', {
|
||||
xAxis: {axisTick: {inside: true}},
|
||||
yAxis: {}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisLabel: inside', {
|
||||
xAxis: {axisLabel: {inside: true}},
|
||||
yAxis: {}
|
||||
});
|
||||
|
||||
makeCartesian('xAxis.axisLabel: inside, top, xAxisLine.onZero: false', {
|
||||
xAxis: {axisLabel: {inside: true}, position: 'top', axisLine: {onZero: false}},
|
||||
yAxis: {}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('cartesian name location');
|
||||
|
||||
// name location
|
||||
makeCartesian('x: forward start, y: forward start', {
|
||||
xAxis: {nameLocation: 'start'},
|
||||
yAxis: {nameLocation: 'start'}
|
||||
});
|
||||
makeCartesian('x: inverse start, y: inverse start', {
|
||||
xAxis: {inverse: true, nameLocation: 'start'},
|
||||
yAxis: {inverse: true, nameLocation: 'start'}
|
||||
});
|
||||
makeCartesian('x: forward start, y: inverse start', {
|
||||
xAxis: {nameLocation: 'start'},
|
||||
yAxis: {inverse: true, nameLocation: 'start'}
|
||||
});
|
||||
makeCartesian('x: inverse start, y: forward start', {
|
||||
xAxis: {inverse: true, nameLocation: 'start'},
|
||||
yAxis: {nameLocation: 'start'}
|
||||
});
|
||||
makeCartesian('x: forward middle, y: forward middle', {
|
||||
xAxis: {nameLocation: 'middle', nameGap: 30},
|
||||
yAxis: {nameLocation: 'middle', nameGap: 30}
|
||||
});
|
||||
makeCartesian('x: forward middle, y: forward middle right', {
|
||||
xAxis: {nameLocation: 'middle', nameGap: 30},
|
||||
yAxis: {nameLocation: 'middle', nameGap: 30, position: 'right'}
|
||||
});
|
||||
makeCartesian('x: inverse middle, y: inverse middle', {
|
||||
xAxis: {inverse: true, nameLocation: 'middle', nameGap: 30},
|
||||
yAxis: {inverse: true, nameLocation: 'middle', nameGap: 30}
|
||||
});
|
||||
makeCartesian('x: inverse middle top, y: inverse middle', {
|
||||
xAxis: {inverse: true, nameLocation: 'middle', nameGap: 30, position: 'top'},
|
||||
yAxis: {inverse: true, nameLocation: 'middle', nameGap: 30}
|
||||
});
|
||||
|
||||
renderTitle('polar normal');
|
||||
|
||||
// inverse
|
||||
makePolar('angle: forward, radius: forward', {
|
||||
angleAxis: {},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: inverse, radius: inverse', {
|
||||
angleAxis: {inverse: true},
|
||||
radiusAxis: {inverse: true}
|
||||
});
|
||||
makePolar('angle: forward, radius: inverse', {
|
||||
angleAxis: {},
|
||||
radiusAxis: {inverse: true}
|
||||
});
|
||||
makePolar('angle: inverse, radius: forward', {
|
||||
angleAxis: {inverse: true},
|
||||
radiusAxis: {}
|
||||
});
|
||||
|
||||
renderTitle('polar angle settting');
|
||||
|
||||
// startAngle
|
||||
makePolar('angle: forward startAngle23, radius: forward', {
|
||||
angleAxis: {startAngle: 23},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle64, radius: forward', {
|
||||
angleAxis: {startAngle: 64},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle90, radius: forward', {
|
||||
angleAxis: {startAngle: 90},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle108, radius: forward', {
|
||||
angleAxis: {startAngle: 108},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle164, radius: forward', {
|
||||
angleAxis: {startAngle: 164},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle180, radius: forward', {
|
||||
angleAxis: {startAngle: 180},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle204, radius: forward', {
|
||||
angleAxis: {startAngle: 204},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle250, radius: forward', {
|
||||
angleAxis: {startAngle: 250},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle270, radius: forward', {
|
||||
angleAxis: {startAngle: 270},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle270, radius: forward', {
|
||||
angleAxis: {startAngle: 270},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle294, radius: forward', {
|
||||
angleAxis: {startAngle: 294},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle344, radius: forward', {
|
||||
angleAxis: {startAngle: 344},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle360, radius: forward', {
|
||||
angleAxis: {startAngle: 360},
|
||||
radiusAxis: {}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('polar min max');
|
||||
|
||||
makePolar('radiusAxis.min: 1, radiusAxis.max: 3', {
|
||||
angleAxis: {},
|
||||
radiusAxis: {min: 1, max: 9}
|
||||
});
|
||||
|
||||
makePolar('radiusAxis.min: -1', {
|
||||
angleAxis: {},
|
||||
radiusAxis: {min: -1}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('polar clockwise');
|
||||
|
||||
makePolar('clockwise: true', {
|
||||
angleAxis: {clockwise: true},
|
||||
radiusAxis: {}
|
||||
});
|
||||
|
||||
makePolar('clockwise: false', {
|
||||
angleAxis: {clockwise: false},
|
||||
radiusAxis: {}
|
||||
});
|
||||
|
||||
|
||||
renderTitle('polar inverse angle settting');
|
||||
|
||||
// startAngle
|
||||
makePolar('angle: inverse startAngle23, radius: forward', {
|
||||
angleAxis: {inverse: true, startAngle: 23},
|
||||
radiusAxis: {}
|
||||
});
|
||||
makePolar('angle: forward startAngle23, radius: inverse', {
|
||||
angleAxis: {startAngle: 23},
|
||||
radiusAxis: {inverse: true}
|
||||
});
|
||||
|
||||
renderTitle('parallel');
|
||||
|
||||
var makeParallel = zrUtil.curry(makeChart, defaultParallelOption);
|
||||
|
||||
makeParallel('layout: horizontal', {
|
||||
});
|
||||
makeParallel('layout: horizontal, axis2 forward start', {
|
||||
parallelAxis: makeParallelAxisOption({nameLocation: 'start'})
|
||||
});
|
||||
makeParallel('layout: horizontal, axis2 inverse start', {
|
||||
parallelAxis: makeParallelAxisOption({inverse: true, nameLocation: 'start'})
|
||||
});
|
||||
makeParallel('layout: vertical', {
|
||||
});
|
||||
makeParallel('layout: vertical, axis2 forward start', {
|
||||
parallel: {layout: 'vertical'},
|
||||
parallelAxis: makeParallelAxisOption({nameLocation: 'start'})
|
||||
});
|
||||
makeParallel('layout: vertical, axis2 inverse start', {
|
||||
parallel: {layout: 'vertical'},
|
||||
parallelAxis: makeParallelAxisOption({inverse: true, nameLocation: 'start'})
|
||||
});
|
||||
|
||||
console.profileEnd('render');
|
||||
});
|
||||
|
||||
function makeParallelAxisOption(secondOpt) {
|
||||
return [
|
||||
{dim: 0, name: '维度1'},
|
||||
zrUtil.merge({dim: 'dim1', name: '维度2'}, secondOpt, true),
|
||||
{dim: 2, name: '维度3'},
|
||||
{dim: 3, name: '维度4'}
|
||||
];
|
||||
}
|
||||
|
||||
function renderTitle(label) {
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('a');
|
||||
el.className = 'title';
|
||||
var html = encodeHTML(label);
|
||||
el.innerHTML = html;
|
||||
el.href = '#' + html.replace(/\s/g, '_');
|
||||
el.name = html.replace(/\s/g, '_');
|
||||
containerEl.appendChild(el);
|
||||
}
|
||||
|
||||
|
||||
function makeChart(getOption, label, opt) {
|
||||
opt = opt || {};
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('div');
|
||||
el.className = 'block';
|
||||
el.innerHTML = '<div class="ec"></div><label>' + encodeHTML(label) + '</label>';
|
||||
containerEl.appendChild(el);
|
||||
|
||||
var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
|
||||
chart.setOption(zrUtil.merge(opt, getOption()));
|
||||
}
|
||||
|
||||
function defaultCartesianOption() {
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 30; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(+(Math.random() + 0.5).toFixed(3));
|
||||
}
|
||||
|
||||
return {
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {type: 'line'}
|
||||
},
|
||||
grid: {x: 50, y: 50, x2: 50, y2: 50},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
name: 'XName',
|
||||
boundaryGap: false,
|
||||
splitArea: {show: false},
|
||||
splitLine: {show: false}
|
||||
},
|
||||
yAxis: {
|
||||
name: 'YName',
|
||||
splitArea: {show: true}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'white',
|
||||
borderWidth: 3,
|
||||
lineStyle: {width: 1}
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
function categoryOnYOption() {
|
||||
|
||||
var axisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 30; i++) {
|
||||
axisData.push('类目' + i);
|
||||
data1.push(+(Math.random() + 0.5).toFixed(3));
|
||||
}
|
||||
|
||||
return {
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {type: 'line'}
|
||||
},
|
||||
grid: {x: 50, y: 50, x2: 50, y2: 50},
|
||||
yAxis: {
|
||||
data: axisData,
|
||||
type: 'category',
|
||||
name: 'YName',
|
||||
boundaryGap: false,
|
||||
splitArea: {show: false},
|
||||
splitLine: {show: false}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'XName',
|
||||
splitArea: {show: true}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'white',
|
||||
borderWidth: 3,
|
||||
lineStyle: {width: 1}
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
function defaultPolarOption() {
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 8; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((Math.random() * 2 + 1).toFixed(3));
|
||||
}
|
||||
|
||||
return {
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {type: 'shadow'}
|
||||
},
|
||||
polar: {radius: '65%'},
|
||||
angleAxis: {data: xAxisData},
|
||||
radiusAxis: {splitNumber: 4, name: 'radiusName'},
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
stack: 'all',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
itemStyle: {normal: {areaStyle: {}}},
|
||||
data: data1
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
function defaultParallelOption() {
|
||||
|
||||
var dataBJ = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var item = [];
|
||||
for (var j = 0; j < 4; j++) {
|
||||
item.push(Math.random() * 10);
|
||||
}
|
||||
dataBJ.push(item);
|
||||
}
|
||||
|
||||
return {
|
||||
color: [
|
||||
'#dd4444', '#fec42c', '#80F1BE'
|
||||
],
|
||||
parallelAxis: makeParallelAxisOption(),
|
||||
parallel: {
|
||||
left: 40,
|
||||
top: 40,
|
||||
right: 40,
|
||||
bottom: 40,
|
||||
parallelAxisDefault: {
|
||||
type: 'value'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'parallel',
|
||||
data: dataBJ
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function encodeHTML(source) {
|
||||
return source == null
|
||||
? ''
|
||||
: String(source)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+146
@@ -0,0 +1,146 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/util/graphic',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts, graphic) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((-Math.random() - 0.2).toFixed(3));
|
||||
data2.push((Math.random() + 0.3).toFixed(3));
|
||||
data3.push((Math.random() + 0.2).toFixed(3));
|
||||
}
|
||||
|
||||
xAxisData.push({
|
||||
value: '类目' + i,
|
||||
textStyle: {
|
||||
color: 'red'
|
||||
}
|
||||
});
|
||||
data1.push('-');
|
||||
data2.push('-');
|
||||
data3.push('-');
|
||||
|
||||
for (; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((-Math.random() - 0.2).toFixed(3));
|
||||
data2.push((Math.random() + 0.3).toFixed(3));
|
||||
data3.push((Math.random() + 0.2).toFixed(3));
|
||||
}
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
// borderColor: 'white',
|
||||
// borderWidth: 3,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
lineStyle: {
|
||||
width: 2
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
areaStyle: {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
// inverse: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
boundaryGap: [0, 0],
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: itemStyle,
|
||||
smooth: true
|
||||
}, {
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data2,
|
||||
itemStyle: itemStyle,
|
||||
smooth: true
|
||||
}, {
|
||||
name: 'line3',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 10,
|
||||
data: data3,
|
||||
itemStyle: itemStyle,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'red'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'black'
|
||||
}])
|
||||
}
|
||||
},
|
||||
smooth: true
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+121
@@ -0,0 +1,121 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/title',
|
||||
'echarts/component/toolbox'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((Math.random() * 5).toFixed(2));
|
||||
data2.push(Math.random().toFixed(2));
|
||||
data3.push((Math.random() + 0.5).toFixed(2));
|
||||
data4.push((Math.random() + 0.3).toFixed(2));
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['bar', 'bar2', 'bar3', 'bar4'],
|
||||
align: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
magicType: {
|
||||
type: ['line', 'bar', 'stack', 'tiled']
|
||||
},
|
||||
dataView: {},
|
||||
saveAsImage: {
|
||||
pixelRatio: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
silent: false,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: data1
|
||||
}, {
|
||||
show: false,
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: data2
|
||||
}, {
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
data: data3
|
||||
}, {
|
||||
name: 'bar4',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
data: data4,
|
||||
silent: true
|
||||
}],
|
||||
animationDelay: function (idx) {
|
||||
return idx * 5;
|
||||
},
|
||||
animationDelayUpdate: function (idx) {
|
||||
return idx * 5;
|
||||
}
|
||||
});
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params);
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+167
@@ -0,0 +1,167 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'zrender/vml/vml'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((Math.random() * 5).toFixed(2));
|
||||
data2.push(-Math.random().toFixed(2));
|
||||
data3.push((Math.random() + 0.5).toFixed(2));
|
||||
data4.push((Math.random() + 0.3).toFixed(2));
|
||||
}
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'outside'
|
||||
},
|
||||
barBorderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
backgroundColor: '#eee',
|
||||
legend: {
|
||||
borderWidth: 1,
|
||||
data: [{
|
||||
name: 'bar'
|
||||
}, 'bar2', '\n', 'bar3', 'bar4'],
|
||||
selected: {
|
||||
// 'bar': false
|
||||
},
|
||||
// orient: 'vertical',
|
||||
// x: 'right',
|
||||
// y: 'bottom',
|
||||
align: 'left'
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
magicType: {
|
||||
type: ['line', 'bar', 'stack', 'tiled']
|
||||
},
|
||||
dataView: {},
|
||||
saveAsImage: {
|
||||
pixelRatio: 2
|
||||
},
|
||||
myTool1: {
|
||||
show: true,
|
||||
title: '自定义扩展方法1',
|
||||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
||||
onclick: function (){
|
||||
alert('myToolHandler1')
|
||||
}
|
||||
},
|
||||
myTool2: {
|
||||
show: true,
|
||||
title: '自定义扩展方法2',
|
||||
icon: 'image://http://echarts.baidu.com/images/favicon.png',
|
||||
onclick: function (){
|
||||
alert('myToolHandler2')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
name: '横轴',
|
||||
silent: false,
|
||||
axisLine: {
|
||||
onZero: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
inverse: true,
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
itemStyle: itemStyle,
|
||||
data: data1
|
||||
}, {
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
itemStyle: itemStyle,
|
||||
data: data2
|
||||
}, {
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
itemStyle: itemStyle,
|
||||
data: data3
|
||||
}, {
|
||||
name: 'bar4',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
itemStyle: itemStyle,
|
||||
data: data4
|
||||
}]
|
||||
});
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params);
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+147
@@ -0,0 +1,147 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
width: 1000px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
chart.setOption({
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
||||
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
calculable : true,
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'bar',
|
||||
data:[320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'bar',
|
||||
stack: '广告',
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'bar',
|
||||
stack: '广告',
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'bar',
|
||||
stack: '广告',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'bar',
|
||||
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
markLine : {
|
||||
itemStyle:{
|
||||
normal:{
|
||||
label: {
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
}
|
||||
},
|
||||
lineStyle:{
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
data : [
|
||||
[{type : 'min'}, {type : 'max'}]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'百度',
|
||||
type:'bar',
|
||||
barWidth : 5,
|
||||
stack: '搜索引擎',
|
||||
data:[620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name:'谷歌',
|
||||
type:'bar',
|
||||
stack: '搜索引擎',
|
||||
data:[120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name:'必应',
|
||||
type:'bar',
|
||||
stack: '搜索引擎',
|
||||
data:[60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name:'其他',
|
||||
type:'bar',
|
||||
stack: '搜索引擎',
|
||||
data:[62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+645
@@ -0,0 +1,645 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<script src='esl.js'></script>
|
||||
<script src='config.js'></script>
|
||||
<script src='lib/jquery.min.js'></script>
|
||||
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id='main'></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'echarts/chart/scatter',
|
||||
'echarts/chart/effectScatter',
|
||||
'echarts/component/legend',
|
||||
'extension/bmap/bmap'
|
||||
], function (echarts) {
|
||||
|
||||
var data = [
|
||||
{name: '海门', value: 9},
|
||||
{name: '鄂尔多斯', value: 12},
|
||||
{name: '招远', value: 12},
|
||||
{name: '舟山', value: 12},
|
||||
{name: '齐齐哈尔', value: 14},
|
||||
{name: '盐城', value: 15},
|
||||
{name: '赤峰', value: 16},
|
||||
{name: '青岛', value: 18},
|
||||
{name: '乳山', value: 18},
|
||||
{name: '金昌', value: 19},
|
||||
{name: '泉州', value: 21},
|
||||
{name: '莱西', value: 21},
|
||||
{name: '日照', value: 21},
|
||||
{name: '胶南', value: 22},
|
||||
{name: '南通', value: 23},
|
||||
{name: '拉萨', value: 24},
|
||||
{name: '云浮', value: 24},
|
||||
{name: '梅州', value: 25},
|
||||
{name: '文登', value: 25},
|
||||
{name: '上海', value: 25},
|
||||
{name: '攀枝花', value: 25},
|
||||
{name: '威海', value: 25},
|
||||
{name: '承德', value: 25},
|
||||
{name: '厦门', value: 26},
|
||||
{name: '汕尾', value: 26},
|
||||
{name: '潮州', value: 26},
|
||||
{name: '丹东', value: 27},
|
||||
{name: '太仓', value: 27},
|
||||
{name: '曲靖', value: 27},
|
||||
{name: '烟台', value: 28},
|
||||
{name: '福州', value: 29},
|
||||
{name: '瓦房店', value: 30},
|
||||
{name: '即墨', value: 30},
|
||||
{name: '抚顺', value: 31},
|
||||
{name: '玉溪', value: 31},
|
||||
{name: '张家口', value: 31},
|
||||
{name: '阳泉', value: 31},
|
||||
{name: '莱州', value: 32},
|
||||
{name: '湖州', value: 32},
|
||||
{name: '汕头', value: 32},
|
||||
{name: '昆山', value: 33},
|
||||
{name: '宁波', value: 33},
|
||||
{name: '湛江', value: 33},
|
||||
{name: '揭阳', value: 34},
|
||||
{name: '荣成', value: 34},
|
||||
{name: '连云港', value: 35},
|
||||
{name: '葫芦岛', value: 35},
|
||||
{name: '常熟', value: 36},
|
||||
{name: '东莞', value: 36},
|
||||
{name: '河源', value: 36},
|
||||
{name: '淮安', value: 36},
|
||||
{name: '泰州', value: 36},
|
||||
{name: '南宁', value: 37},
|
||||
{name: '营口', value: 37},
|
||||
{name: '惠州', value: 37},
|
||||
{name: '江阴', value: 37},
|
||||
{name: '蓬莱', value: 37},
|
||||
{name: '韶关', value: 38},
|
||||
{name: '嘉峪关', value: 38},
|
||||
{name: '广州', value: 38},
|
||||
{name: '延安', value: 38},
|
||||
{name: '太原', value: 39},
|
||||
{name: '清远', value: 39},
|
||||
{name: '中山', value: 39},
|
||||
{name: '昆明', value: 39},
|
||||
{name: '寿光', value: 40},
|
||||
{name: '盘锦', value: 40},
|
||||
{name: '长治', value: 41},
|
||||
{name: '深圳', value: 41},
|
||||
{name: '珠海', value: 42},
|
||||
{name: '宿迁', value: 43},
|
||||
{name: '咸阳', value: 43},
|
||||
{name: '铜川', value: 44},
|
||||
{name: '平度', value: 44},
|
||||
{name: '佛山', value: 44},
|
||||
{name: '海口', value: 44},
|
||||
{name: '江门', value: 45},
|
||||
{name: '章丘', value: 45},
|
||||
{name: '肇庆', value: 46},
|
||||
{name: '大连', value: 47},
|
||||
{name: '临汾', value: 47},
|
||||
{name: '吴江', value: 47},
|
||||
{name: '石嘴山', value: 49},
|
||||
{name: '沈阳', value: 50},
|
||||
{name: '苏州', value: 50},
|
||||
{name: '茂名', value: 50},
|
||||
{name: '嘉兴', value: 51},
|
||||
{name: '长春', value: 51},
|
||||
{name: '胶州', value: 52},
|
||||
{name: '银川', value: 52},
|
||||
{name: '张家港', value: 52},
|
||||
{name: '三门峡', value: 53},
|
||||
{name: '锦州', value: 54},
|
||||
{name: '南昌', value: 54},
|
||||
{name: '柳州', value: 54},
|
||||
{name: '三亚', value: 54},
|
||||
{name: '自贡', value: 56},
|
||||
{name: '吉林', value: 56},
|
||||
{name: '阳江', value: 57},
|
||||
{name: '泸州', value: 57},
|
||||
{name: '西宁', value: 57},
|
||||
{name: '宜宾', value: 58},
|
||||
{name: '呼和浩特', value: 58},
|
||||
{name: '成都', value: 58},
|
||||
{name: '大同', value: 58},
|
||||
{name: '镇江', value: 59},
|
||||
{name: '桂林', value: 59},
|
||||
{name: '张家界', value: 59},
|
||||
{name: '宜兴', value: 59},
|
||||
{name: '北海', value: 60},
|
||||
{name: '西安', value: 61},
|
||||
{name: '金坛', value: 62},
|
||||
{name: '东营', value: 62},
|
||||
{name: '牡丹江', value: 63},
|
||||
{name: '遵义', value: 63},
|
||||
{name: '绍兴', value: 63},
|
||||
{name: '扬州', value: 64},
|
||||
{name: '常州', value: 64},
|
||||
{name: '潍坊', value: 65},
|
||||
{name: '重庆', value: 66},
|
||||
{name: '台州', value: 67},
|
||||
{name: '南京', value: 67},
|
||||
{name: '滨州', value: 70},
|
||||
{name: '贵阳', value: 71},
|
||||
{name: '无锡', value: 71},
|
||||
{name: '本溪', value: 71},
|
||||
{name: '克拉玛依', value: 72},
|
||||
{name: '渭南', value: 72},
|
||||
{name: '马鞍山', value: 72},
|
||||
{name: '宝鸡', value: 72},
|
||||
{name: '焦作', value: 75},
|
||||
{name: '句容', value: 75},
|
||||
{name: '北京', value: 79},
|
||||
{name: '徐州', value: 79},
|
||||
{name: '衡水', value: 80},
|
||||
{name: '包头', value: 80},
|
||||
{name: '绵阳', value: 80},
|
||||
{name: '乌鲁木齐', value: 84},
|
||||
{name: '枣庄', value: 84},
|
||||
{name: '杭州', value: 84},
|
||||
{name: '淄博', value: 85},
|
||||
{name: '鞍山', value: 86},
|
||||
{name: '溧阳', value: 86},
|
||||
{name: '库尔勒', value: 86},
|
||||
{name: '安阳', value: 90},
|
||||
{name: '开封', value: 90},
|
||||
{name: '济南', value: 92},
|
||||
{name: '德阳', value: 93},
|
||||
{name: '温州', value: 95},
|
||||
{name: '九江', value: 96},
|
||||
{name: '邯郸', value: 98},
|
||||
{name: '临安', value: 99},
|
||||
{name: '兰州', value: 99},
|
||||
{name: '沧州', value: 100},
|
||||
{name: '临沂', value: 103},
|
||||
{name: '南充', value: 104},
|
||||
{name: '天津', value: 105},
|
||||
{name: '富阳', value: 106},
|
||||
{name: '泰安', value: 112},
|
||||
{name: '诸暨', value: 112},
|
||||
{name: '郑州', value: 113},
|
||||
{name: '哈尔滨', value: 114},
|
||||
{name: '聊城', value: 116},
|
||||
{name: '芜湖', value: 117},
|
||||
{name: '唐山', value: 119},
|
||||
{name: '平顶山', value: 119},
|
||||
{name: '邢台', value: 119},
|
||||
{name: '德州', value: 120},
|
||||
{name: '济宁', value: 120},
|
||||
{name: '荆州', value: 127},
|
||||
{name: '宜昌', value: 130},
|
||||
{name: '义乌', value: 132},
|
||||
{name: '丽水', value: 133},
|
||||
{name: '洛阳', value: 134},
|
||||
{name: '秦皇岛', value: 136},
|
||||
{name: '株洲', value: 143},
|
||||
{name: '石家庄', value: 147},
|
||||
{name: '莱芜', value: 148},
|
||||
{name: '常德', value: 152},
|
||||
{name: '保定', value: 153},
|
||||
{name: '湘潭', value: 154},
|
||||
{name: '金华', value: 157},
|
||||
{name: '岳阳', value: 169},
|
||||
{name: '长沙', value: 175},
|
||||
{name: '衢州', value: 177},
|
||||
{name: '廊坊', value: 193},
|
||||
{name: '菏泽', value: 194},
|
||||
{name: '合肥', value: 229},
|
||||
{name: '武汉', value: 273},
|
||||
{name: '大庆', value: 279}
|
||||
];
|
||||
|
||||
var geoCoordMap = {
|
||||
'海门':[121.15,31.89],
|
||||
'鄂尔多斯':[109.781327,39.608266],
|
||||
'招远':[120.38,37.35],
|
||||
'舟山':[122.207216,29.985295],
|
||||
'齐齐哈尔':[123.97,47.33],
|
||||
'盐城':[120.13,33.38],
|
||||
'赤峰':[118.87,42.28],
|
||||
'青岛':[120.33,36.07],
|
||||
'乳山':[121.52,36.89],
|
||||
'金昌':[102.188043,38.520089],
|
||||
'泉州':[118.58,24.93],
|
||||
'莱西':[120.53,36.86],
|
||||
'日照':[119.46,35.42],
|
||||
'胶南':[119.97,35.88],
|
||||
'南通':[121.05,32.08],
|
||||
'拉萨':[91.11,29.97],
|
||||
'云浮':[112.02,22.93],
|
||||
'梅州':[116.1,24.55],
|
||||
'文登':[122.05,37.2],
|
||||
'上海':[121.48,31.22],
|
||||
'攀枝花':[101.718637,26.582347],
|
||||
'威海':[122.1,37.5],
|
||||
'承德':[117.93,40.97],
|
||||
'厦门':[118.1,24.46],
|
||||
'汕尾':[115.375279,22.786211],
|
||||
'潮州':[116.63,23.68],
|
||||
'丹东':[124.37,40.13],
|
||||
'太仓':[121.1,31.45],
|
||||
'曲靖':[103.79,25.51],
|
||||
'烟台':[121.39,37.52],
|
||||
'福州':[119.3,26.08],
|
||||
'瓦房店':[121.979603,39.627114],
|
||||
'即墨':[120.45,36.38],
|
||||
'抚顺':[123.97,41.97],
|
||||
'玉溪':[102.52,24.35],
|
||||
'张家口':[114.87,40.82],
|
||||
'阳泉':[113.57,37.85],
|
||||
'莱州':[119.942327,37.177017],
|
||||
'湖州':[120.1,30.86],
|
||||
'汕头':[116.69,23.39],
|
||||
'昆山':[120.95,31.39],
|
||||
'宁波':[121.56,29.86],
|
||||
'湛江':[110.359377,21.270708],
|
||||
'揭阳':[116.35,23.55],
|
||||
'荣成':[122.41,37.16],
|
||||
'连云港':[119.16,34.59],
|
||||
'葫芦岛':[120.836932,40.711052],
|
||||
'常熟':[120.74,31.64],
|
||||
'东莞':[113.75,23.04],
|
||||
'河源':[114.68,23.73],
|
||||
'淮安':[119.15,33.5],
|
||||
'泰州':[119.9,32.49],
|
||||
'南宁':[108.33,22.84],
|
||||
'营口':[122.18,40.65],
|
||||
'惠州':[114.4,23.09],
|
||||
'江阴':[120.26,31.91],
|
||||
'蓬莱':[120.75,37.8],
|
||||
'韶关':[113.62,24.84],
|
||||
'嘉峪关':[98.289152,39.77313],
|
||||
'广州':[113.23,23.16],
|
||||
'延安':[109.47,36.6],
|
||||
'太原':[112.53,37.87],
|
||||
'清远':[113.01,23.7],
|
||||
'中山':[113.38,22.52],
|
||||
'昆明':[102.73,25.04],
|
||||
'寿光':[118.73,36.86],
|
||||
'盘锦':[122.070714,41.119997],
|
||||
'长治':[113.08,36.18],
|
||||
'深圳':[114.07,22.62],
|
||||
'珠海':[113.52,22.3],
|
||||
'宿迁':[118.3,33.96],
|
||||
'咸阳':[108.72,34.36],
|
||||
'铜川':[109.11,35.09],
|
||||
'平度':[119.97,36.77],
|
||||
'佛山':[113.11,23.05],
|
||||
'海口':[110.35,20.02],
|
||||
'江门':[113.06,22.61],
|
||||
'章丘':[117.53,36.72],
|
||||
'肇庆':[112.44,23.05],
|
||||
'大连':[121.62,38.92],
|
||||
'临汾':[111.5,36.08],
|
||||
'吴江':[120.63,31.16],
|
||||
'石嘴山':[106.39,39.04],
|
||||
'沈阳':[123.38,41.8],
|
||||
'苏州':[120.62,31.32],
|
||||
'茂名':[110.88,21.68],
|
||||
'嘉兴':[120.76,30.77],
|
||||
'长春':[125.35,43.88],
|
||||
'胶州':[120.03336,36.264622],
|
||||
'银川':[106.27,38.47],
|
||||
'张家港':[120.555821,31.875428],
|
||||
'三门峡':[111.19,34.76],
|
||||
'锦州':[121.15,41.13],
|
||||
'南昌':[115.89,28.68],
|
||||
'柳州':[109.4,24.33],
|
||||
'三亚':[109.511909,18.252847],
|
||||
'自贡':[104.778442,29.33903],
|
||||
'吉林':[126.57,43.87],
|
||||
'阳江':[111.95,21.85],
|
||||
'泸州':[105.39,28.91],
|
||||
'西宁':[101.74,36.56],
|
||||
'宜宾':[104.56,29.77],
|
||||
'呼和浩特':[111.65,40.82],
|
||||
'成都':[104.06,30.67],
|
||||
'大同':[113.3,40.12],
|
||||
'镇江':[119.44,32.2],
|
||||
'桂林':[110.28,25.29],
|
||||
'张家界':[110.479191,29.117096],
|
||||
'宜兴':[119.82,31.36],
|
||||
'北海':[109.12,21.49],
|
||||
'西安':[108.95,34.27],
|
||||
'金坛':[119.56,31.74],
|
||||
'东营':[118.49,37.46],
|
||||
'牡丹江':[129.58,44.6],
|
||||
'遵义':[106.9,27.7],
|
||||
'绍兴':[120.58,30.01],
|
||||
'扬州':[119.42,32.39],
|
||||
'常州':[119.95,31.79],
|
||||
'潍坊':[119.1,36.62],
|
||||
'重庆':[106.54,29.59],
|
||||
'台州':[121.420757,28.656386],
|
||||
'南京':[118.78,32.04],
|
||||
'滨州':[118.03,37.36],
|
||||
'贵阳':[106.71,26.57],
|
||||
'无锡':[120.29,31.59],
|
||||
'本溪':[123.73,41.3],
|
||||
'克拉玛依':[84.77,45.59],
|
||||
'渭南':[109.5,34.52],
|
||||
'马鞍山':[118.48,31.56],
|
||||
'宝鸡':[107.15,34.38],
|
||||
'焦作':[113.21,35.24],
|
||||
'句容':[119.16,31.95],
|
||||
'北京':[116.46,39.92],
|
||||
'徐州':[117.2,34.26],
|
||||
'衡水':[115.72,37.72],
|
||||
'包头':[110,40.58],
|
||||
'绵阳':[104.73,31.48],
|
||||
'乌鲁木齐':[87.68,43.77],
|
||||
'枣庄':[117.57,34.86],
|
||||
'杭州':[120.19,30.26],
|
||||
'淄博':[118.05,36.78],
|
||||
'鞍山':[122.85,41.12],
|
||||
'溧阳':[119.48,31.43],
|
||||
'库尔勒':[86.06,41.68],
|
||||
'安阳':[114.35,36.1],
|
||||
'开封':[114.35,34.79],
|
||||
'济南':[117,36.65],
|
||||
'德阳':[104.37,31.13],
|
||||
'温州':[120.65,28.01],
|
||||
'九江':[115.97,29.71],
|
||||
'邯郸':[114.47,36.6],
|
||||
'临安':[119.72,30.23],
|
||||
'兰州':[103.73,36.03],
|
||||
'沧州':[116.83,38.33],
|
||||
'临沂':[118.35,35.05],
|
||||
'南充':[106.110698,30.837793],
|
||||
'天津':[117.2,39.13],
|
||||
'富阳':[119.95,30.07],
|
||||
'泰安':[117.13,36.18],
|
||||
'诸暨':[120.23,29.71],
|
||||
'郑州':[113.65,34.76],
|
||||
'哈尔滨':[126.63,45.75],
|
||||
'聊城':[115.97,36.45],
|
||||
'芜湖':[118.38,31.33],
|
||||
'唐山':[118.02,39.63],
|
||||
'平顶山':[113.29,33.75],
|
||||
'邢台':[114.48,37.05],
|
||||
'德州':[116.29,37.45],
|
||||
'济宁':[116.59,35.38],
|
||||
'荆州':[112.239741,30.335165],
|
||||
'宜昌':[111.3,30.7],
|
||||
'义乌':[120.06,29.32],
|
||||
'丽水':[119.92,28.45],
|
||||
'洛阳':[112.44,34.7],
|
||||
'秦皇岛':[119.57,39.95],
|
||||
'株洲':[113.16,27.83],
|
||||
'石家庄':[114.48,38.03],
|
||||
'莱芜':[117.67,36.19],
|
||||
'常德':[111.69,29.05],
|
||||
'保定':[115.48,38.85],
|
||||
'湘潭':[112.91,27.87],
|
||||
'金华':[119.64,29.12],
|
||||
'岳阳':[113.09,29.37],
|
||||
'长沙':[113,28.21],
|
||||
'衢州':[118.88,28.97],
|
||||
'廊坊':[116.7,39.53],
|
||||
'菏泽':[115.480656,35.23375],
|
||||
'合肥':[117.27,31.86],
|
||||
'武汉':[114.31,30.52],
|
||||
'大庆':[125.03,46.58]
|
||||
};
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
myChart.setOption({
|
||||
backgroundColor: '#404a59',
|
||||
title: {
|
||||
text: '全国主要城市空气质量',
|
||||
subtext: 'data from PM25.in',
|
||||
sublink: 'http://www.pm25.in',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item'
|
||||
},
|
||||
bmap: {
|
||||
center: [104.114129, 37.550339],
|
||||
zoom: 5,
|
||||
roam: true,
|
||||
mapStyle: {
|
||||
styleJson: [
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"color": "#044161"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "land",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"color": "#004981"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "boundary",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#064f85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "railway",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "highway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#004981"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "highway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#005b96",
|
||||
"lightness": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "highway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "arterial",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#004981"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "arterial",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#00508b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "green",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"color": "#056197",
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "subway",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "manmade",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "local",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "arterial",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "boundary",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#029fd4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "building",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"color": "#1a5787"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "label",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(data),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ddb926'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(data.sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 6)),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'emphasis',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f4e925',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
var chart;
|
||||
var data;
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'extension/dataTool/prepareBoxplotData',
|
||||
'echarts/chart/boxplot',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts, prepareBoxplotData) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
function update(layout) {
|
||||
|
||||
// Generate data.
|
||||
data = [];
|
||||
for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
|
||||
var seriesData = [];
|
||||
for (var i = 0; i < 18; i++) {
|
||||
var cate = [];
|
||||
for (var j = 0; j < 100; j++) {
|
||||
cate.push(Math.random() * 200);
|
||||
}
|
||||
seriesData.push(cate);
|
||||
}
|
||||
data.push(prepareBoxplotData(seriesData, {
|
||||
layout: layout
|
||||
}));
|
||||
}
|
||||
|
||||
var categoryAxis = {
|
||||
type: 'category',
|
||||
data: data[0].axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
var valueAxis = {
|
||||
type: 'value',
|
||||
name: 'Value',
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
title: [
|
||||
{
|
||||
text: 'Multiple Categories',
|
||||
left: 'center',
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
top: '10%',
|
||||
data: ['category0', 'category1', 'category2', 'category3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: '20%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: layout === 'horizontal' ? categoryAxis : valueAxis,
|
||||
yAxis: layout === 'vertical' ? categoryAxis : valueAxis,
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
height: 20,
|
||||
type: 'slider',
|
||||
bottom: 50,
|
||||
xAxisIndex: layout === 'horizontal' ? [0] : [],
|
||||
yAxisIndex: layout === 'horizontal' ? [] : [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'category0',
|
||||
type: 'boxplot',
|
||||
data: data[0].boxData,
|
||||
tooltip: {formatter: formatter}
|
||||
},
|
||||
{
|
||||
name: 'category1',
|
||||
type: 'boxplot',
|
||||
data: data[1].boxData,
|
||||
tooltip: {formatter: formatter}
|
||||
},
|
||||
{
|
||||
name: 'category2',
|
||||
type: 'boxplot',
|
||||
data: data[2].boxData,
|
||||
tooltip: {formatter: formatter}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function formatter(param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[0],
|
||||
'Q1: ' + param.data[1],
|
||||
'median: ' + param.data[2],
|
||||
'Q3: ' + param.data[3],
|
||||
'lower: ' + param.data[4]
|
||||
].join('<br/>')
|
||||
}
|
||||
|
||||
|
||||
// var gui = new dat.GUI();
|
||||
// var config = {
|
||||
// layout: 'horizontal'
|
||||
// };
|
||||
// gui
|
||||
// .add(config, 'layout', ['horizontal', 'vertical'])
|
||||
// .onChange(update);
|
||||
|
||||
update('horizontal');
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+252
@@ -0,0 +1,252 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="reset.css"/>
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#main {
|
||||
width: 900px;
|
||||
height: 650px;
|
||||
border: 9px solid #eee;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
|
||||
* @see <http://bl.ocks.org/mbostock/4061502>
|
||||
*/
|
||||
var chart;
|
||||
var data;
|
||||
var mean;
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'data/Michelson-Morley.json',
|
||||
'extension/dataTool/prepareBoxplotData',
|
||||
'zrender/core/env',
|
||||
'echarts/chart/boxplot',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/markLine',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'zrender/vml/vml'
|
||||
], function (echarts, rawData, prepareBoxplotData, env) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
update('horizontal');
|
||||
// update('vertical');
|
||||
|
||||
initControlPanel(env);
|
||||
|
||||
function update(layout) {
|
||||
|
||||
data = prepareBoxplotData(rawData, {
|
||||
layout: layout
|
||||
});
|
||||
mean = calculateMean(rawData);
|
||||
|
||||
var categoryAxis = {
|
||||
type: 'category',
|
||||
data: data.axisData,
|
||||
boundaryGap: true,
|
||||
nameGap: 30,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: 'expr {value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
var valueAxis = {
|
||||
type: 'value',
|
||||
name: 'km/s minus 299,000',
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
title: [
|
||||
{
|
||||
text: 'Michelson-Morley Experiment',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
|
||||
borderColor: '#999',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
left: '10%',
|
||||
top: '90%'
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: layout === 'horizontal' ? categoryAxis : valueAxis,
|
||||
yAxis: layout === 'vertical' ? categoryAxis : valueAxis,
|
||||
series: [
|
||||
{
|
||||
name: 'boxplot',
|
||||
type: 'boxplot',
|
||||
data: data.boxData,
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return [
|
||||
'Experiment ' + param.name + ': ',
|
||||
'upper: ' + param.data[0],
|
||||
'Q1: ' + param.data[1],
|
||||
'median: ' + param.data[2],
|
||||
'Q3: ' + param.data[3],
|
||||
'lower: ' + param.data[4]
|
||||
].join('<br/>')
|
||||
}
|
||||
},
|
||||
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: '某个坐标',
|
||||
coord: [2, 300]
|
||||
},
|
||||
{
|
||||
name: '某个屏幕坐标',
|
||||
x: 100,
|
||||
y: 200,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
formatter: 'asdf'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: 'zxcv'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'max value (default)',
|
||||
type: 'max'
|
||||
},
|
||||
{
|
||||
name: 'min value (default)',
|
||||
type: 'min'
|
||||
},
|
||||
{
|
||||
name: 'max value (dim:Q1)',
|
||||
type: 'max',
|
||||
valueDim: 'Q1'
|
||||
},
|
||||
{
|
||||
name: 'average value (dim:Q1)',
|
||||
type: 'average',
|
||||
valueDim: 'Q1'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
markLine: {
|
||||
data: [
|
||||
[
|
||||
{name: '两个坐标之间的标线', coord: [1, 240]},
|
||||
{coord: [2, 260]}
|
||||
],
|
||||
[
|
||||
{name: '两个屏幕坐标之间的标线', x: 50, y: 60},
|
||||
{x: 70, y: 90}
|
||||
],
|
||||
[
|
||||
{name: 'max - min', type: 'max'},
|
||||
{type: 'min'}
|
||||
],
|
||||
{
|
||||
name: 'min line',
|
||||
type: 'min'
|
||||
},
|
||||
{
|
||||
name: 'max line on dim:Q3',
|
||||
type: 'max',
|
||||
valueDim: 'Q3'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
name: 'outlier',
|
||||
type: 'scatter',
|
||||
data: data.outliers
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function calculateMean(rawData) {
|
||||
var sum = 0;
|
||||
var count = 0;
|
||||
for (var i = 0, len = rawData.length; i < len; i++) {
|
||||
for (var j = 0, lenj = rawData[i].length; j < lenj; j++) {
|
||||
var value = rawData[i][j];
|
||||
count++;
|
||||
if (!isNaN(value) && value != null && value !== '') {
|
||||
sum += value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return sum / count;
|
||||
};
|
||||
|
||||
|
||||
function initControlPanel(env) {
|
||||
if (!env.browser.ie || env.browser.ie.version > 8) {
|
||||
|
||||
var scr = document.createElement('script');
|
||||
scr.src = 'lib/dat.gui.min.js';
|
||||
scr.onload = function () {
|
||||
var gui = new dat.GUI();
|
||||
var config = {
|
||||
layout: 'horizontal'
|
||||
};
|
||||
gui
|
||||
.add(config, 'layout', ['horizontal', 'vertical'])
|
||||
.onChange(update);
|
||||
};
|
||||
document.head.appendChild(scr);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+252
@@ -0,0 +1,252 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
|
||||
* @see <http://bl.ocks.org/mbostock/4061502>
|
||||
*/
|
||||
var chart;
|
||||
var data;
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'data/security-sh-2013.json',
|
||||
'echarts/chart/candlestick',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts, rawData) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
data = splitData(rawData);
|
||||
|
||||
update();
|
||||
|
||||
chart.on('click', function (info) {
|
||||
console.log(info);
|
||||
if (info.data && info.data.length === 4) {
|
||||
alert([
|
||||
'clicked on: ',
|
||||
'DATA: ' + info.name,
|
||||
'OPEN: ' + info.data[0],
|
||||
'CLOSE: ' + info.data[1],
|
||||
'LOWEST: ' + info.data[2],
|
||||
'HIGHEST: ' + info.data[3]
|
||||
].join('\n'));
|
||||
}
|
||||
else if (info.data && info.data.length === 2) {
|
||||
// Markpoint
|
||||
alert('mark point');
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function splitData(rawData) {
|
||||
var categoryData = [];
|
||||
var values = []
|
||||
for (var i = 0; i < rawData.length; i++) {
|
||||
categoryData.push(rawData[i].splice(0, 1)[0]);
|
||||
values.push(rawData[i])
|
||||
}
|
||||
return {
|
||||
categoryData: categoryData,
|
||||
values: values
|
||||
};
|
||||
}
|
||||
|
||||
function parseDate(timestamp) {
|
||||
var date = new Date(timestamp);
|
||||
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['上证指数', '开盘']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.categoryData,
|
||||
scale: true,
|
||||
boundaryGap : false,
|
||||
axisLine: {onZero: false},
|
||||
splitLine: {show: false},
|
||||
splitNumber: 20,
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
y: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '开盘',
|
||||
type: 'line',
|
||||
data: (function () {
|
||||
opens = [];
|
||||
for (var i = 0, len = data.values.length; i < len; i++) {
|
||||
opens.push(data.values[i][0]);
|
||||
}
|
||||
return opens;
|
||||
})(),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {color: '#aaa'}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '上证指数',
|
||||
type: 'candlestick',
|
||||
data: data.values,
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
var param = param[0];
|
||||
return [
|
||||
'日期：' + param.name + '<hr size=1 style="margin: 3px 0">',
|
||||
'开盘：' + param.data[0] + '<br/>',
|
||||
'收盘：' + param.data[1] + '<br/>',
|
||||
'日最低：' + param.data[2] + '<br/>',
|
||||
'日最高：' + param.data[3] + '<br/>'
|
||||
].join('')
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: '某个坐标',
|
||||
coord: ['2013/5/21', 2300]
|
||||
},
|
||||
{
|
||||
name: '某个屏幕坐标',
|
||||
x: 100,
|
||||
y: 200,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: 'zxcv'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'max value (default)',
|
||||
type: 'max'
|
||||
},
|
||||
{
|
||||
name: 'min value (default)',
|
||||
type: 'min'
|
||||
},
|
||||
{
|
||||
name: 'max value (dim:close)',
|
||||
type: 'max',
|
||||
valueDim: 'close'
|
||||
},
|
||||
{
|
||||
name: 'average value (dim:close)',
|
||||
type: 'average',
|
||||
valueDim: 'close'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return param.name + '<br>' + (param.data.coord || '');
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
[
|
||||
{name: '两个坐标之间的标线', coord: ['2013/4/25', 2130]},
|
||||
{coord: ['2013/5/27', 2220]}
|
||||
],
|
||||
[
|
||||
{name: '两个屏幕坐标之间的标线', x: 100, y: 100},
|
||||
{x: 250, y: 130}
|
||||
],
|
||||
[
|
||||
{name: 'max - min', type: 'max'},
|
||||
{type: 'min'}
|
||||
],
|
||||
{
|
||||
name: 'min line',
|
||||
type: 'min'
|
||||
},
|
||||
{
|
||||
name: 'max line on dim:open',
|
||||
type: 'max',
|
||||
valueDim: 'open'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// setTimeout(function () {
|
||||
// chart.setOption({
|
||||
// dataZoom: {
|
||||
// startValue: '2013/1/28',
|
||||
// endValue: '2013/1/30'
|
||||
// }
|
||||
// });
|
||||
// }, 1000);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+450
@@ -0,0 +1,450 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 90%;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#main2 {
|
||||
width: 75%;
|
||||
}
|
||||
#main3 {
|
||||
width: 50%;
|
||||
}
|
||||
#middle {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: #d4e8f1;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<div id="main2"></div>
|
||||
<div id="main3"></div>
|
||||
|
||||
<script>
|
||||
|
||||
require([
|
||||
'data/rainfall.json',
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/candlestick',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoom'
|
||||
], function (data, echarts) {
|
||||
var axisData = [
|
||||
"2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
|
||||
"2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
|
||||
"2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
|
||||
"2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
|
||||
"2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
|
||||
"2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
|
||||
"2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
|
||||
"2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27",
|
||||
"2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3",
|
||||
"2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
|
||||
"2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
|
||||
"2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26",
|
||||
"2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8",
|
||||
"2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15",
|
||||
"2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22",
|
||||
"2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29",
|
||||
"2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5",
|
||||
"2013/6/6", "2013/6/7", "2013/6/13"
|
||||
];
|
||||
|
||||
option = {
|
||||
title : {
|
||||
text: '2013年上半年上证指数'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
|
||||
formatter: function (params) {
|
||||
var res = params[0].name;
|
||||
res += '<br/>' + params[0].seriesName;
|
||||
res += '<br/> 开盘 : ' + params[0].value[0] + ' 最高 : ' + params[0].value[3];
|
||||
res += '<br/> 收盘 : ' + params[0].value[1] + ' 最低 : ' + params[0].value[2];
|
||||
return res;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['上证指数','成交金额(万)','虚拟数据']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataZoom : {show: true},
|
||||
magicType : {show: true, type: ['line', 'bar']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
dataZoom : {
|
||||
y: 250,
|
||||
show : true,
|
||||
realtime: true,
|
||||
start : 50,
|
||||
end : 100
|
||||
},
|
||||
grid: {
|
||||
x: 80,
|
||||
y: 40,
|
||||
x2:20,
|
||||
y2:25
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : true,
|
||||
axisTick: {onGap:false},
|
||||
splitLine: {show:false},
|
||||
data : axisData
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
boundaryGap: [0.05, 0.05],
|
||||
splitArea : {show : true}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'上证指数',
|
||||
type:'candlestick',
|
||||
data:[ // 开盘，收盘，最低，最高
|
||||
[2320.26,2302.6,2287.3,2362.94],
|
||||
[2300,2291.3,2288.26,2308.38],
|
||||
[2295.35,2346.5,2295.35,2346.92],
|
||||
[2347.22,2358.98,2337.35,2363.8],
|
||||
[2360.75,2382.48,2347.89,2383.76],
|
||||
[2383.43,2385.42,2371.23,2391.82],
|
||||
[2377.41,2419.02,2369.57,2421.15],
|
||||
[2425.92,2428.15,2417.58,2440.38],
|
||||
[2411,2433.13,2403.3,2437.42],
|
||||
[2432.68,2434.48,2427.7,2441.73],
|
||||
[2430.69,2418.53,2394.22,2433.89],
|
||||
[2416.62,2432.4,2414.4,2443.03],
|
||||
[2441.91,2421.56,2415.43,2444.8],
|
||||
[2420.26,2382.91,2373.53,2427.07],
|
||||
[2383.49,2397.18,2370.61,2397.94],
|
||||
[2378.82,2325.95,2309.17,2378.82],
|
||||
[2322.94,2314.16,2308.76,2330.88],
|
||||
[2320.62,2325.82,2315.01,2338.78],
|
||||
[2313.74,2293.34,2289.89,2340.71],
|
||||
[2297.77,2313.22,2292.03,2324.63],
|
||||
[2322.32,2365.59,2308.92,2366.16],
|
||||
[2364.54,2359.51,2330.86,2369.65],
|
||||
[2332.08,2273.4,2259.25,2333.54],
|
||||
[2274.81,2326.31,2270.1,2328.14],
|
||||
[2333.61,2347.18,2321.6,2351.44],
|
||||
[2340.44,2324.29,2304.27,2352.02],
|
||||
[2326.42,2318.61,2314.59,2333.67],
|
||||
[2314.68,2310.59,2296.58,2320.96],
|
||||
[2309.16,2286.6,2264.83,2333.29],
|
||||
[2282.17,2263.97,2253.25,2286.33],
|
||||
[2255.77,2270.28,2253.31,2276.22],
|
||||
[2269.31,2278.4,2250,2312.08],
|
||||
[2267.29,2240.02,2239.21,2276.05],
|
||||
[2244.26,2257.43,2232.02,2261.31],
|
||||
[2257.74,2317.37,2257.42,2317.86],
|
||||
[2318.21,2324.24,2311.6,2330.81],
|
||||
[2321.4,2328.28,2314.97,2332],
|
||||
[2334.74,2326.72,2319.91,2344.89],
|
||||
[2318.58,2297.67,2281.12,2319.99],
|
||||
[2299.38,2301.26,2289,2323.48],
|
||||
[2273.55,2236.3,2232.91,2273.55],
|
||||
[2238.49,2236.62,2228.81,2246.87],
|
||||
[2229.46,2234.4,2227.31,2243.95],
|
||||
[2234.9,2227.74,2220.44,2253.42],
|
||||
[2232.69,2225.29,2217.25,2241.34],
|
||||
[2196.24,2211.59,2180.67,2212.59],
|
||||
[2215.47,2225.77,2215.47,2234.73],
|
||||
[2224.93,2226.13,2212.56,2233.04],
|
||||
[2236.98,2219.55,2217.26,2242.48],
|
||||
[2218.09,2206.78,2204.44,2226.26],
|
||||
[2199.91,2181.94,2177.39,2204.99],
|
||||
[2169.63,2194.85,2165.78,2196.43],
|
||||
[2195.03,2193.8,2178.47,2197.51],
|
||||
[2181.82,2197.6,2175.44,2206.03],
|
||||
[2201.12,2244.64,2200.58,2250.11],
|
||||
[2236.4,2242.17,2232.26,2245.12],
|
||||
[2242.62,2184.54,2182.81,2242.62],
|
||||
[2187.35,2218.32,2184.11,2226.12],
|
||||
[2213.19,2199.31,2191.85,2224.63],
|
||||
[2203.89,2177.91,2173.86,2210.58],
|
||||
[2170.78,2174.12,2161.14,2179.65],
|
||||
[2179.05,2205.5,2179.05,2222.81],
|
||||
[2212.5,2231.17,2212.5,2236.07],
|
||||
[2227.86,2235.57,2219.44,2240.26],
|
||||
[2242.39,2246.3,2235.42,2255.21],
|
||||
[2246.96,2232.97,2221.38,2247.86],
|
||||
[2228.82,2246.83,2225.81,2247.67],
|
||||
[2247.68,2241.92,2231.36,2250.85],
|
||||
[2238.9,2217.01,2205.87,2239.93],
|
||||
[2217.09,2224.8,2213.58,2225.19],
|
||||
[2221.34,2251.81,2210.77,2252.87],
|
||||
[2249.81,2282.87,2248.41,2288.09],
|
||||
[2286.33,2299.99,2281.9,2309.39],
|
||||
[2297.11,2305.11,2290.12,2305.3],
|
||||
[2303.75,2302.4,2292.43,2314.18],
|
||||
[2293.81,2275.67,2274.1,2304.95],
|
||||
[2281.45,2288.53,2270.25,2292.59],
|
||||
[2286.66,2293.08,2283.94,2301.7],
|
||||
[2293.4,2321.32,2281.47,2322.1],
|
||||
[2323.54,2324.02,2321.17,2334.33],
|
||||
[2316.25,2317.75,2310.49,2325.72],
|
||||
[2320.74,2300.59,2299.37,2325.53],
|
||||
[2300.21,2299.25,2294.11,2313.43],
|
||||
[2297.1,2272.42,2264.76,2297.1],
|
||||
[2270.71,2270.93,2260.87,2276.86],
|
||||
[2264.43,2242.11,2240.07,2266.69],
|
||||
[2242.26,2210.9,2205.07,2250.63],
|
||||
[2190.1,2148.35,2126.22,2190.1]
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
option2 = {
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showDelay: 0 // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
|
||||
},
|
||||
legend: {
|
||||
y : -30,
|
||||
data:['上证指数','成交金额(万)','虚拟数据']
|
||||
},
|
||||
toolbox: {
|
||||
y : -30,
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataZoom : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {show: true, type: ['line', 'bar']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
dataZoom : {
|
||||
show : true,
|
||||
realtime: true,
|
||||
start : 50,
|
||||
end : 100
|
||||
},
|
||||
grid: {
|
||||
x: 80,
|
||||
y:5,
|
||||
x2:20,
|
||||
y2:40
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
position:'top',
|
||||
boundaryGap : true,
|
||||
axisLabel:{show:false},
|
||||
axisTick: {onGap:false},
|
||||
splitLine: {show:false},
|
||||
data : axisData
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
splitNumber: 3,
|
||||
boundaryGap: [0.05, 0.05],
|
||||
axisLabel: {
|
||||
formatter: function (v) {
|
||||
return Math.round(v/10000) + ' 万'
|
||||
}
|
||||
},
|
||||
splitArea : {show : true}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'成交金额(万)',
|
||||
type:'line',
|
||||
symbol: 'none',
|
||||
data:[
|
||||
13560434, 8026738.5, 11691637, 12491697, 12485603,
|
||||
11620504, 12555496, 15253370, 12709611, 10458354,
|
||||
10933507, 9896523, 10365702, 10633095, 9722230,
|
||||
12662783, 8757982, 7764234, 10591719, 8826293,
|
||||
11591827, 11153111, 14304651, 11672120, 12536480,
|
||||
12608589, 8843860, 7391994.5, 10063709, 7768895.5,
|
||||
6921859, 10157810, 8148617.5, 7551207, 11397426,
|
||||
10478607, 8595132, 8541862, 9181132, 8570842,
|
||||
10759351, 7335819, 6699753.5, 7759666.5, 6880135.5,
|
||||
7366616.5, 7313504, 7109021.5, 6213270, 5619688,
|
||||
5816217.5, 6695584.5, 5998655.5, 6188812.5, 9538301,
|
||||
8224500, 8221751.5, 7897721, 8448324, 6525151,
|
||||
5987761, 7831570, 8162560.5, 7904092, 8139084.5,
|
||||
9116529, 8128014, 7919148, 7566047, 6665826.5,
|
||||
10225527, 11124881, 12884353, 11302521, 11529046,
|
||||
11105205, 9202153, 9992016, 12035250, 11431155,
|
||||
10354677, 10070399, 9164861, 9237718, 7114268,
|
||||
7526158.5, 8105835, 7971452.5
|
||||
],
|
||||
markLine : {
|
||||
symbol : 'none',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#1e90ff',
|
||||
label : {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart2 = echarts.init(document.getElementById('main2'));
|
||||
myChart2.setOption(option2);
|
||||
|
||||
option3 = {
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showDelay: 0 // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
|
||||
},
|
||||
legend: {
|
||||
y : -30,
|
||||
data:['上证指数','成交金额(万)','虚拟数据']
|
||||
},
|
||||
toolbox: {
|
||||
y : -30,
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataZoom : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {show: true, type: ['line', 'bar']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
dataZoom : {
|
||||
y:200,
|
||||
show : true,
|
||||
realtime: true,
|
||||
start : 50,
|
||||
end : 100
|
||||
},
|
||||
grid: {
|
||||
x: 80,
|
||||
y:5,
|
||||
x2:20,
|
||||
y2:30
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
position:'bottom',
|
||||
boundaryGap : true,
|
||||
axisTick: {onGap:false},
|
||||
splitLine: {show:false},
|
||||
data : axisData
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
splitNumber:3,
|
||||
boundaryGap: [0.05, 0.05],
|
||||
axisLabel: {
|
||||
formatter: function (v) {
|
||||
return Math.round(v/10000) + ' 万'
|
||||
}
|
||||
},
|
||||
splitArea : {show : true}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'虚拟数据',
|
||||
type:'bar',
|
||||
symbol: 'none',
|
||||
data:[
|
||||
560434, 226738, 696370, 249697, 248563,
|
||||
620504, 555496, 525337, 270968, 458354,
|
||||
933507, 896523, 365702, 633095, 722230,
|
||||
662783, 875798, 776423, 105979, 882629,
|
||||
598278, 231253, 430465, 672208, 253648,
|
||||
608589, 884386, 739994, 263709, 776889,
|
||||
692859, 105780, 848675, 755207, 397426,
|
||||
478607, 859532, 854862, 983288, 857084,
|
||||
759358, 733589, 669975, 775965, 688035,
|
||||
736666, 733504, 709025, 623270, 569688,
|
||||
586275, 669558, 599865, 688825, 953830,
|
||||
822450, 822755, 789772, 844832, 652558,
|
||||
598776, 783570, 862560, 794092, 839084,
|
||||
965298, 828048, 799480, 756647, 665826,
|
||||
102257, 248870, 288435, 302528, 529046,
|
||||
105205, 920253, 999206, 203525, 435588,
|
||||
103546, 703990, 964868, 923778, 742688,
|
||||
752658, 805835, 797452
|
||||
],
|
||||
markLine : {
|
||||
symbol : 'none',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#1e90ff',
|
||||
label : {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
myChart.setOption(option);
|
||||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||||
myChart2.setOption(option2);
|
||||
var myChart3 = echarts.init(document.getElementById('main3'));
|
||||
myChart3.setOption(option3);
|
||||
|
||||
echarts.connect([myChart, myChart2, myChart3]);
|
||||
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
myChart2.resize();
|
||||
myChart3.resize();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+58
@@ -0,0 +1,58 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/chord',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'chord',
|
||||
type: 'chord',
|
||||
sort: 'ascending',
|
||||
data : [
|
||||
{name : 'group1'},
|
||||
{name : 'group2'},
|
||||
{name : 'group3'},
|
||||
{name : 'group4'}
|
||||
],
|
||||
matrix: [
|
||||
[11975, 5871, 8916, 2868],
|
||||
[ 1951, 10048, 2060, 6171],
|
||||
[ 8010, 16145, 8090, 8045],
|
||||
[ 1013, 990, 940, 6907]
|
||||
]
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+219
@@ -0,0 +1,219 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<link rel="stylesheet" href="./reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Schema:
|
||||
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||||
var schema = [
|
||||
{name: 'date', index: 0, text: '日'},
|
||||
{name: 'AQIindex', index: 1, text: 'AQI指数'},
|
||||
{name: 'PM25', index: 2, text: 'PM2.5'},
|
||||
{name: 'PM10', index: 3, text: 'PM10'},
|
||||
{name: 'CO', index: 4, text: '一氧化碳（CO）'},
|
||||
{name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
|
||||
{name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
|
||||
];
|
||||
|
||||
require([
|
||||
'data/aqi/BJdata',
|
||||
'data/aqi/GZdata',
|
||||
'data/aqi/SHdata',
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/visualMapContinuous'
|
||||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
top: 'top',
|
||||
data: ['北京', '上海', '广州'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: 200,
|
||||
top: '15%',
|
||||
bottom: '10%'
|
||||
},
|
||||
tooltip: {
|
||||
padding: 10,
|
||||
backgroundColor: '#222',
|
||||
borderColor: '#777',
|
||||
borderWidth: 1,
|
||||
formatter: function (obj) {
|
||||
var value = obj.value;
|
||||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||||
+ obj.seriesName + ' ' + value[0] + '日：'
|
||||
+ value[7]
|
||||
+ '</div>'
|
||||
+ schema[1].text + '：' + value[1] + '<br>'
|
||||
+ schema[2].text + '：' + value[2] + '<br>'
|
||||
+ schema[3].text + '：' + value[3] + '<br>'
|
||||
+ schema[4].text + '：' + value[4] + '<br>'
|
||||
+ schema[5].text + '：' + value[5] + '<br>'
|
||||
+ schema[6].text + '：' + value[6] + '<br>';
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '日期',
|
||||
nameGap: 16,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
max: 31,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#777'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'AQI指数',
|
||||
nameLocation: 'end',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#777'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
right: 0,
|
||||
top: 'top',
|
||||
dimension: 'z',
|
||||
min: 0,
|
||||
max: 250,
|
||||
itemWidth: 30,
|
||||
itemHeight: 130,
|
||||
calculable: true,
|
||||
precision: 0.1,
|
||||
text: ['圆形大小：PM2.5'],
|
||||
textGap: 30,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
inRange: {
|
||||
symbolSize: [10, 70]
|
||||
},
|
||||
outOfRange: {
|
||||
symbolSize: [10, 70],
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
},
|
||||
controller: {
|
||||
outOfRange: {
|
||||
color: ['#444']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
left: 'right',
|
||||
top: 'bottom',
|
||||
dimension: 6,
|
||||
min: 0,
|
||||
max: 50,
|
||||
itemHeight: 130,
|
||||
calculable: true,
|
||||
precision: 0.1,
|
||||
text: ['明暗：二氧化硫'],
|
||||
textGap: 30,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
inRange: {
|
||||
colorLightness: [1, .5]
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
},
|
||||
controller: {
|
||||
outOfRange: {
|
||||
color: ['#444']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataBJ
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataSH
|
||||
},
|
||||
{
|
||||
name: '广州',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataGZ
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
require.config({
|
||||
paths: {
|
||||
'geoJson': '../geoData/geoJson',
|
||||
'theme': '../theme',
|
||||
'data': './data',
|
||||
'map': '../map',
|
||||
'extension': '../extension'
|
||||
},
|
||||
packages: [
|
||||
{
|
||||
main: 'echarts',
|
||||
location: '../src',
|
||||
name: 'echarts'
|
||||
},
|
||||
{
|
||||
main: 'zrender',
|
||||
location: '../../zrender/src',
|
||||
name: 'zrender'
|
||||
}
|
||||
]
|
||||
// urlArgs: '_v_=' + +new Date()
|
||||
});
|
||||
Vendored
+163
@@ -0,0 +1,163 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#chart1, #chart2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<div id="main">
|
||||
<div id="chart1"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart1 = echarts.init(document.getElementById('chart1'));
|
||||
var chart2 = echarts.init(document.getElementById('chart2'));
|
||||
|
||||
var data1 = [];
|
||||
|
||||
var symbolCount = 6;
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data1.push([
|
||||
Math.random() * 5,
|
||||
Math.random() * 4,
|
||||
Math.random() * 20,
|
||||
Math.round(Math.random() * (symbolCount - 1))
|
||||
]);
|
||||
}
|
||||
|
||||
chart1.setOption({
|
||||
legend: {
|
||||
top: 50,
|
||||
data: ['scatter']
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{c}'
|
||||
},
|
||||
grid: {
|
||||
top: '26%',
|
||||
bottom: '26%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
realtime: false,
|
||||
left: 'right',
|
||||
// selectedMode: 'single',
|
||||
selectedMode: 'multiple',
|
||||
backgroundColor: '#eee',
|
||||
dimension: 2,
|
||||
selected: [],
|
||||
min: 0,
|
||||
max: 24,
|
||||
precision: 0,
|
||||
splitNumber: 0,
|
||||
calculable: true,
|
||||
inRange: { // visual for short cut
|
||||
color: ['#006edd', '#e0ffff']
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: 30,
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart2.setOption({
|
||||
legend: {
|
||||
top: 50,
|
||||
data: ['scatter']
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{c}'
|
||||
},
|
||||
grid: {
|
||||
top: '26%',
|
||||
bottom: '26%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
left: 'right',
|
||||
// selectedMode: 'single',
|
||||
selectedMode: 'multiple',
|
||||
backgroundColor: '#eee',
|
||||
dimension: 2,
|
||||
selected: [],
|
||||
min: 0,
|
||||
max: 24,
|
||||
precision: 0,
|
||||
splitNumber: 0,
|
||||
calculable: true,
|
||||
inRange: { // visual for short cut
|
||||
color: ['#006edd', '#e0ffff']
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: 30,
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
echarts.connect([chart1, chart2]);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+231
@@ -0,0 +1,231 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<link rel="stylesheet" href="./reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#chart1, #chart2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<div id="main">
|
||||
<div id="chart1"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Schema:
|
||||
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||||
var schema = [
|
||||
{name: 'date', index: 0, text: '日'},
|
||||
{name: 'AQIindex', index: 1, text: 'AQI指数'},
|
||||
{name: 'PM25', index: 2, text: 'PM2.5'},
|
||||
{name: 'PM10', index: 3, text: 'PM10'},
|
||||
{name: 'CO', index: 4, text: '一氧化碳（CO）'},
|
||||
{name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
|
||||
{name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
|
||||
];
|
||||
|
||||
require([
|
||||
'data/aqi/BJdata',
|
||||
'data/aqi/GZdata',
|
||||
'data/aqi/SHdata',
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/visualMapContinuous'
|
||||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||||
|
||||
var chart1 = echarts.init(document.getElementById('chart1'));
|
||||
var chart2 = echarts.init(document.getElementById('chart2'));
|
||||
|
||||
var option1 = makeChartOption();
|
||||
var option2 = makeChartOption();
|
||||
option1.visualMap.inRange = {
|
||||
symbolSize: [10, 70]
|
||||
};
|
||||
option1.visualMap.outOfRange = {
|
||||
symbolSize: [10, 70],
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
};
|
||||
option1.visualMap.dimension = 'z';
|
||||
option1.visualMap.max = 250;
|
||||
|
||||
option2.visualMap.inRange = {
|
||||
colorLightness: [1, 0.5]
|
||||
};
|
||||
option2.visualMap.outOfRange = {
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
};
|
||||
option2.visualMap.dimension = 'z';
|
||||
option2.visualMap.max = 250;
|
||||
|
||||
chart1.setOption(option1);
|
||||
chart2.setOption(option2);
|
||||
|
||||
echarts.connect([chart1, chart2]);
|
||||
|
||||
function makeChartOption(legend) {
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
color: [
|
||||
'#dd4444', '#fec42c', '#80F1BE'
|
||||
],
|
||||
legend: {
|
||||
top: 'top',
|
||||
data: ['北京', '上海', '广州'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: 200,
|
||||
top: '15%',
|
||||
bottom: '10%'
|
||||
},
|
||||
tooltip: {
|
||||
padding: 10,
|
||||
backgroundColor: '#222',
|
||||
borderColor: '#777',
|
||||
borderWidth: 1,
|
||||
formatter: function (obj) {
|
||||
var value = obj.value;
|
||||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||||
+ obj.seriesName + ' ' + value[0] + '日：'
|
||||
+ value[7]
|
||||
+ '</div>'
|
||||
+ schema[1].text + '：' + value[1] + '<br>'
|
||||
+ schema[2].text + '：' + value[2] + '<br>'
|
||||
+ schema[3].text + '：' + value[3] + '<br>'
|
||||
+ schema[4].text + '：' + value[4] + '<br>'
|
||||
+ schema[5].text + '：' + value[5] + '<br>'
|
||||
+ schema[6].text + '：' + value[6] + '<br>';
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '日期',
|
||||
nameGap: 16,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
max: 31,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#777'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'AQI指数',
|
||||
nameLocation: 'end',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#777'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
left: 'right',
|
||||
top: 'top',
|
||||
min: 0,
|
||||
itemWidth: 30,
|
||||
itemHeight: 130,
|
||||
calculable: true,
|
||||
precision: 0.1,
|
||||
text: ['圆形大小：PM2.5'],
|
||||
textGap: 30,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
inRange: {
|
||||
symbolSize: [10, 70]
|
||||
},
|
||||
outOfRange: {
|
||||
symbolSize: [10, 70],
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
},
|
||||
controller: {
|
||||
outOfRange: {
|
||||
color: ['#444']
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataBJ
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataSH
|
||||
},
|
||||
{
|
||||
name: '广州',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataGZ
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
// five experiments.
|
||||
// each experiments has 20 runs.
|
||||
// speed(km/s minus 299,000)
|
||||
define([
|
||||
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
|
||||
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
|
||||
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
|
||||
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
|
||||
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
|
||||
]);
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
define( [
|
||||
[1,55,9,56,0.46,18,6,"良"],
|
||||
[2,25,11,21,0.65,34,9,"优"],
|
||||
[3,56,7,63,0.3,14,5,"良"],
|
||||
[4,33,7,29,0.33,16,6,"优"],
|
||||
[5,42,24,44,0.76,40,16,"优"],
|
||||
[6,82,58,90,1.77,68,33,"良"],
|
||||
[7,74,49,77,1.46,48,27,"良"],
|
||||
[8,78,55,80,1.29,59,29,"良"],
|
||||
[9,267,216,280,'-',108,64,"重度污染"],
|
||||
[10,185,127,216,2.52,61,27,"中度污染"],
|
||||
[11,39,19,38,0.57,31,15,"优"],
|
||||
[12,41,11,40,0.43,21,7,"优"],
|
||||
[13,64,38,74,1.04,46,22,"良"],
|
||||
[14,108,79,120,1.7,75,41,"轻度污染"],
|
||||
[15,108,63,116,1.48,44,26,"轻度污染"],
|
||||
[16,33,6,29,0.34,13,5,"优"],
|
||||
[17,94,66,110,1.54,62,31,"良"],
|
||||
[18,186,142,192,3.88,93,79,"中度污染"],
|
||||
[19,57,31,54,0.96,32,14,"良"],
|
||||
[20,22,8,17,0.48,23,10,"优"],
|
||||
[21,39,15,36,0.61,29,13,"优"],
|
||||
[22,94,69,114,2.08,73,39,"良"],
|
||||
[23,99,73,110,2.43,76,48,"良"],
|
||||
[24,31,12,30,0.5,32,16,"优"],
|
||||
[25,42,27,43,1,53,22,"优"],
|
||||
[26,154,117,157,3.05,92,58,"中度污染"],
|
||||
[27,234,185,230,4.09,123,69,"重度污染"],
|
||||
[28,160,120,186,2.77,91,50,"中度污染"],
|
||||
[29,134,96,165,2.76,83,41,"轻度污染"],
|
||||
[30,52,24,60,1.03,50,21,"良"],
|
||||
[31,46,5,49,0.28,10,6,"优"]
|
||||
]);
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
define( [
|
||||
[1,26,37,27,1.163,27,13,"优"],
|
||||
[2,85,62,71,1.195,60,8,"良"],
|
||||
[3,78,38,74,1.363,37,7,"良"],
|
||||
[4,21,21,36,0.634,40,9,"优"],
|
||||
[5,41,42,46,0.915,81,13,"优"],
|
||||
[6,56,52,69,1.067,92,16,"良"],
|
||||
[7,64,30,28,0.924,51,2,"良"],
|
||||
[8,55,48,74,1.236,75,26,"良"],
|
||||
[9,76,85,113,1.237,114,27,"良"],
|
||||
[10,91,81,104,1.041,56,40,"良"],
|
||||
[11,84,39,60,0.964,25,11,"良"],
|
||||
[12,64,51,101,0.862,58,23,"良"],
|
||||
[13,70,69,120,1.198,65,36,"良"],
|
||||
[14,77,105,178,2.549,64,16,"良"],
|
||||
[15,109,68,87,0.996,74,29,"轻度污染"],
|
||||
[16,73,68,97,0.905,51,34,"良"],
|
||||
[17,54,27,47,0.592,53,12,"良"],
|
||||
[18,51,61,97,0.811,65,19,"良"],
|
||||
[19,91,71,121,1.374,43,18,"良"],
|
||||
[20,73,102,182,2.787,44,19,"良"],
|
||||
[21,73,50,76,0.717,31,20,"良"],
|
||||
[22,84,94,140,2.238,68,18,"良"],
|
||||
[23,93,77,104,1.165,53,7,"良"],
|
||||
[24,99,130,227,3.97,55,15,"良"],
|
||||
[25,146,84,139,1.094,40,17,"轻度污染"],
|
||||
[26,113,108,137,1.481,48,15,"轻度污染"],
|
||||
[27,81,48,62,1.619,26,3,"良"],
|
||||
[28,56,48,68,1.336,37,9,"良"],
|
||||
[29,82,92,174,3.29,0,13,"良"],
|
||||
[30,106,116,188,3.628,101,16,"轻度污染"],
|
||||
[31,118,50,0,1.383,76,11,"轻度污染"]
|
||||
]
|
||||
);
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
define( [
|
||||
[1,91,45,125,0.82,34,23,"良"],
|
||||
[2,65,27,78,0.86,45,29,"良"],
|
||||
[3,83,60,84,1.09,73,27,"良"],
|
||||
[4,109,81,121,1.28,68,51,"轻度污染"],
|
||||
[5,106,77,114,1.07,55,51,"轻度污染"],
|
||||
[6,109,81,121,1.28,68,51,"轻度污染"],
|
||||
[7,106,77,114,1.07,55,51,"轻度污染"],
|
||||
[8,89,65,78,0.86,51,26,"良"],
|
||||
[9,53,33,47,0.64,50,17,"良"],
|
||||
[10,80,55,80,1.01,75,24,"良"],
|
||||
[11,117,81,124,1.03,45,24,"轻度污染"],
|
||||
[12,99,71,142,1.1,62,42,"良"],
|
||||
[13,95,69,130,1.28,74,50,"良"],
|
||||
[14,116,87,131,1.47,84,40,"轻度污染"],
|
||||
[15,108,80,121,1.3,85,37,"轻度污染"],
|
||||
[16,134,83,167,1.16,57,43,"轻度污染"],
|
||||
[17,79,43,107,1.05,59,37,"良"],
|
||||
[18,71,46,89,0.86,64,25,"良"],
|
||||
[19,97,71,113,1.17,88,31,"良"],
|
||||
[20,84,57,91,0.85,55,31,"良"],
|
||||
[21,87,63,101,0.9,56,41,"良"],
|
||||
[22,104,77,119,1.09,73,48,"轻度污染"],
|
||||
[23,87,62,100,1,72,28,"良"],
|
||||
[24,168,128,172,1.49,97,56,"中度污染"],
|
||||
[25,65,45,51,0.74,39,17,"良"],
|
||||
[26,39,24,38,0.61,47,17,"优"],
|
||||
[27,39,24,39,0.59,50,19,"优"],
|
||||
[28,93,68,96,1.05,79,29,"良"],
|
||||
[29,188,143,197,1.66,99,51,"中度污染"],
|
||||
[30,174,131,174,1.55,108,50,"中度污染"],
|
||||
[31,187,143,201,1.39,89,53,"中度污染"]
|
||||
]
|
||||
);
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
function processAQI(arr) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
var line = arr[i];
|
||||
var aqi = line[1];
|
||||
|
||||
if (aqi <= 50) {
|
||||
line[7] = '"优"';
|
||||
}
|
||||
else if (aqi <= 100) {
|
||||
line[7] = '"良"';
|
||||
}
|
||||
else if (aqi <= 150) {
|
||||
line[7] = '"轻度污染"';
|
||||
}
|
||||
else if (aqi <= 200) {
|
||||
line[7] = '"中度污染"';
|
||||
}
|
||||
else if (aqi <= 300) {
|
||||
line[7] = '"重度污染"';
|
||||
}
|
||||
else {
|
||||
line[7] = '"严重污染"';
|
||||
}
|
||||
}
|
||||
|
||||
console.log(arr.join('],\n ['));
|
||||
}
|
||||
+21040
File diff suppressed because it is too large
Load Diff
+120
@@ -0,0 +1,120 @@
|
||||
{"nodes":[
|
||||
{"name":"Agricultural 'waste'"},
|
||||
{"name":"Bio-conversion"},
|
||||
{"name":"Liquid"},
|
||||
{"name":"Losses"},
|
||||
{"name":"Solid"},
|
||||
{"name":"Gas"},
|
||||
{"name":"Biofuel imports"},
|
||||
{"name":"Biomass imports"},
|
||||
{"name":"Coal imports"},
|
||||
{"name":"Coal"},
|
||||
{"name":"Coal reserves"},
|
||||
{"name":"District heating"},
|
||||
{"name":"Industry"},
|
||||
{"name":"Heating and cooling - commercial"},
|
||||
{"name":"Heating and cooling - homes"},
|
||||
{"name":"Electricity grid"},
|
||||
{"name":"Over generation / exports"},
|
||||
{"name":"H2 conversion"},
|
||||
{"name":"Road transport"},
|
||||
{"name":"Agriculture"},
|
||||
{"name":"Rail transport"},
|
||||
{"name":"Lighting & appliances - commercial"},
|
||||
{"name":"Lighting & appliances - homes"},
|
||||
{"name":"Gas imports"},
|
||||
{"name":"Ngas"},
|
||||
{"name":"Gas reserves"},
|
||||
{"name":"Thermal generation"},
|
||||
{"name":"Geothermal"},
|
||||
{"name":"H2"},
|
||||
{"name":"Hydro"},
|
||||
{"name":"International shipping"},
|
||||
{"name":"Domestic aviation"},
|
||||
{"name":"International aviation"},
|
||||
{"name":"National navigation"},
|
||||
{"name":"Marine algae"},
|
||||
{"name":"Nuclear"},
|
||||
{"name":"Oil imports"},
|
||||
{"name":"Oil"},
|
||||
{"name":"Oil reserves"},
|
||||
{"name":"Other waste"},
|
||||
{"name":"Pumped heat"},
|
||||
{"name":"Solar PV"},
|
||||
{"name":"Solar Thermal"},
|
||||
{"name":"Solar"},
|
||||
{"name":"Tidal"},
|
||||
{"name":"UK land based bioenergy"},
|
||||
{"name":"Wave"},
|
||||
{"name":"Wind"}
|
||||
],
|
||||
"links":[
|
||||
{"source": "Agricultural 'waste'", "target": "Bio-conversion", "value": 124.729},
|
||||
{"source": "Bio-conversion", "target": "Liquid", "value": 0.597},
|
||||
{"source": "Bio-conversion", "target": "Losses", "value": 26.862},
|
||||
{"source": "Bio-conversion", "target": "Solid", "value": 280.322},
|
||||
{"source": "Bio-conversion", "target": "Gas", "value": 81.144},
|
||||
{"source": "Biofuel imports", "target": "Liquid", "value": 35},
|
||||
{"source": "Biomass imports", "target": "Solid", "value": 35},
|
||||
{"source": "Coal imports", "target": "Coal", "value": 11.606},
|
||||
{"source": "Coal reserves","target": "Coal", "value": 63.965},
|
||||
{"source": "Coal", "target": "Solid", "value": 75.571},
|
||||
{"source": "District heating", "target": "Industry", "value": 10.639},
|
||||
{"source": "District heating", "target": "Heating and cooling - commercial", "value": 22.505},
|
||||
{"source": "District heating", "target": "Heating and cooling - homes", "value": 46.184},
|
||||
{"source": "Electricity grid", "target": "Over generation / exports", "value": 104.453},
|
||||
{"source": "Electricity grid", "target": "Heating and cooling - homes", "value": 113.726},
|
||||
{"source": "Electricity grid", "target": "H2 conversion", "value": 27.14},
|
||||
{"source": "Electricity grid", "target": "Industry", "value": 342.165},
|
||||
{"source": "Electricity grid", "target": "Road transport", "value": 37.797},
|
||||
{"source": "Electricity grid", "target": "Agriculture", "value": 4.412},
|
||||
{"source": "Electricity grid", "target": "Heating and cooling - commercial", "value": 40.858},
|
||||
{"source": "Electricity grid", "target": "Losses", "value": 56.691},
|
||||
{"source": "Electricity grid", "target": "Rail transport", "value": 7.863},
|
||||
{"source": "Electricity grid", "target": "Lighting & appliances - commercial", "value": 90.008},
|
||||
{"source": "Electricity grid", "target": "Lighting & appliances - homes", "value": 93.494},
|
||||
{"source": "Gas imports", "target": "Ngas", "value": 40.719},
|
||||
{"source": "Gas reserves", "target": "Ngas", "value": 82.233},
|
||||
{"source": "Gas", "target": "Heating and cooling - commercial", "value": 0.129},
|
||||
{"source": "Gas", "target": "Losses", "value": 1.401},
|
||||
{"source": "Gas", "target": "Thermal generation", "value": 151.891},
|
||||
{"source": "Gas", "target": "Agriculture", "value": 2.096},
|
||||
{"source": "Gas", "target": "Industry", "value": 48.58},
|
||||
{"source": "Geothermal", "target": "Electricity grid", "value": 7.013},
|
||||
{"source": "H2 conversion", "target": "H2", "value": 20.897},
|
||||
{"source": "H2 conversion", "target": "Losses", "value": 6.242},
|
||||
{"source": "H2", "target": "Road transport", "value": 20.897},
|
||||
{"source": "Hydro", "target": "Electricity grid", "value": 6.995},
|
||||
{"source": "Liquid", "target": "Industry", "value": 121.066},
|
||||
{"source": "Liquid", "target": "International shipping", "value": 128.69},
|
||||
{"source": "Liquid", "target": "Road transport", "value": 135.835},
|
||||
{"source": "Liquid", "target": "Domestic aviation", "value": 14.458},
|
||||
{"source": "Liquid", "target": "International aviation", "value": 206.267},
|
||||
{"source": "Liquid", "target": "Agriculture", "value": 3.64},
|
||||
{"source": "Liquid", "target": "National navigation", "value": 33.218},
|
||||
{"source": "Liquid", "target": "Rail transport", "value": 4.413},
|
||||
{"source": "Marine algae", "target": "Bio-conversion", "value": 4.375},
|
||||
{"source": "Ngas", "target": "Gas", "value": 122.952},
|
||||
{"source": "Nuclear", "target": "Thermal generation", "value": 839.978},
|
||||
{"source": "Oil imports", "target": "Oil", "value": 504.287},
|
||||
{"source": "Oil reserves", "target": "Oil", "value": 107.703},
|
||||
{"source": "Oil", "target": "Liquid", "value": 611.99},
|
||||
{"source": "Other waste", "target": "Solid", "value": 56.587},
|
||||
{"source": "Other waste", "target": "Bio-conversion", "value": 77.81},
|
||||
{"source": "Pumped heat", "target": "Heating and cooling - homes", "value": 193.026},
|
||||
{"source": "Pumped heat", "target": "Heating and cooling - commercial", "value": 70.672},
|
||||
{"source": "Solar PV", "target": "Electricity grid", "value": 59.901},
|
||||
{"source": "Solar Thermal", "target": "Heating and cooling - homes", "value": 19.263},
|
||||
{"source": "Solar", "target": "Solar Thermal", "value": 19.263},
|
||||
{"source": "Solar", "target": "Solar PV", "value": 59.901},
|
||||
{"source": "Solid", "target": "Agriculture", "value": 0.882},
|
||||
{"source": "Solid", "target": "Thermal generation", "value": 400.12},
|
||||
{"source": "Solid", "target": "Industry", "value": 46.477},
|
||||
{"source": "Thermal generation", "target": "Electricity grid", "value": 525.531},
|
||||
{"source": "Thermal generation", "target": "Losses", "value": 787.129},
|
||||
{"source": "Thermal generation", "target": "District heating", "value": 79.329},
|
||||
{"source": "Tidal", "target": "Electricity grid", "value": 9.452},
|
||||
{"source": "UK land based bioenergy", "target": "Bio-conversion", "value": 182.01},
|
||||
{"source": "Wave", "target": "Electricity grid", "value": 19.013},
|
||||
{"source": "Wind", "target": "Electricity grid", "value": 289.366}
|
||||
]}
|
||||
+1394
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+10625
File diff suppressed because it is too large
Load Diff
+11714
File diff suppressed because it is too large
Load Diff
+134
@@ -0,0 +1,134 @@
|
||||
{"nodes": [
|
||||
{"name": "Total"},
|
||||
{"name": "Environment"},
|
||||
{"name": "Land use"},
|
||||
{"name": "Cocoa butter (Organic)"},
|
||||
{"name": "Cocoa mass (Organic)"},
|
||||
{"name": "Hazelnuts (Organic)"},
|
||||
{"name": "Cane sugar (Organic)"},
|
||||
{"name": "Vegetables (Organic)"},
|
||||
{"name": "Climate change"},
|
||||
{"name": "Harmful substances"},
|
||||
{"name": "Water use"},
|
||||
{"name": "Resource depletion"},
|
||||
{"name": "Refrigeration"},
|
||||
{"name": "Packaging"},
|
||||
{"name": "Human rights"},
|
||||
{"name": "Child labour"},
|
||||
{"name": "Coconut oil (Organic)"},
|
||||
{"name": "Forced labour"},
|
||||
{"name": "Health safety"},
|
||||
{"name": "Access to water"},
|
||||
{"name": "Freedom of association"},
|
||||
{"name": "Access to land"},
|
||||
{"name": "Sufficient wage"},
|
||||
{"name": "Equal rights migrants"},
|
||||
{"name": "Discrimination"},
|
||||
{"name": "Working hours"}
|
||||
],
|
||||
"links": [
|
||||
{"source": "Total", "target": "Environment", "value": 0.342284047256003},
|
||||
{"source": "Environment", "target": "Land use", "value": 0.32322870366987},
|
||||
{"source": "Land use", "target": "Cocoa butter (Organic)", "value": 0.177682517071359},
|
||||
{"source": "Land use", "target": "Cocoa mass (Organic)", "value": 0.137241325342711},
|
||||
{"source": "Land use", "target": "Hazelnuts (Organic)", "value": 0.00433076373512774},
|
||||
{"source": "Land use", "target": "Cane sugar (Organic)", "value": 0.00296956039863467},
|
||||
{"source": "Land use", "target": "Vegetables (Organic)", "value": 0.00100453712203756},
|
||||
{"source": "Environment", "target": "Climate change", "value": 0.0112886157414413},
|
||||
{"source": "Climate change", "target": "Cocoa butter (Organic)", "value": 0.00676852971933996},
|
||||
{"source": "Climate change", "target": "Cocoa mass (Organic)", "value": 0.00394686874786743},
|
||||
{"source": "Climate change", "target": "Cane sugar (Organic)", "value": 0.000315972058711838},
|
||||
{"source": "Climate change", "target": "Hazelnuts (Organic)", "value": 0.000218969462265292},
|
||||
{"source": "Climate change", "target": "Vegetables (Organic)", "value": 3.82757532567656e-05},
|
||||
{"source": "Environment", "target": "Harmful substances", "value": 0.00604275542495656},
|
||||
{"source": "Harmful substances", "target": "Cocoa mass (Organic)", "value": 0.0055125989240741},
|
||||
{"source": "Harmful substances", "target": "Cocoa butter (Organic)", "value": 0.000330017607892127},
|
||||
{"source": "Harmful substances", "target": "Cane sugar (Organic)", "value": 0.000200138892990337},
|
||||
{"source": "Harmful substances", "target": "Hazelnuts (Organic)", "value": 0},
|
||||
{"source": "Harmful substances", "target": "Vegetables (Organic)", "value": 0},
|
||||
{"source": "Environment", "target": "Water use", "value": 0.00148345269044703},
|
||||
{"source": "Water use", "target": "Cocoa butter (Organic)", "value": 0.00135309891304186},
|
||||
{"source": "Water use", "target": "Cocoa mass (Organic)", "value": 0.000105714137908639},
|
||||
{"source": "Water use", "target": "Hazelnuts (Organic)", "value": 1.33452642581887e-05},
|
||||
{"source": "Water use", "target": "Cane sugar (Organic)", "value": 8.78074837009238e-06},
|
||||
{"source": "Water use", "target": "Vegetables (Organic)", "value": 2.5136268682477e-06},
|
||||
{"source": "Environment", "target": "Resource depletion", "value": 0.000240519729288764},
|
||||
{"source": "Resource depletion", "target": "Cane sugar (Organic)", "value": 0.000226237279345084},
|
||||
{"source": "Resource depletion", "target": "Vegetables (Organic)", "value": 1.42824499436793e-05},
|
||||
{"source": "Resource depletion", "target": "Hazelnuts (Organic)", "value": 0},
|
||||
{"source": "Resource depletion", "target": "Cocoa mass (Organic)", "value": 0},
|
||||
{"source": "Resource depletion", "target": "Cocoa butter (Organic)", "value": 0},
|
||||
{"source": "Environment", "target": "Refrigeration", "value": 0},
|
||||
{"source": "Environment", "target": "Packaging", "value": 0},
|
||||
{"source": "Total", "target": "Human rights", "value": 0.307574096993239},
|
||||
{"source": "Human rights", "target": "Child labour", "value": 0.0410641202645833},
|
||||
{"source": "Child labour", "target": "Hazelnuts (Organic)", "value": 0.0105339381639722},
|
||||
{"source": "Child labour", "target": "Cocoa mass (Organic)", "value": 0.0105},
|
||||
{"source": "Child labour", "target": "Cocoa butter (Organic)", "value": 0.0087294420777},
|
||||
{"source": "Child labour", "target": "Coconut oil (Organic)", "value": 0.00474399974233333},
|
||||
{"source": "Child labour", "target": "Cane sugar (Organic)", "value": 0.00388226450884445},
|
||||
{"source": "Child labour", "target": "Vegetables (Organic)", "value": 0.00267447577173333},
|
||||
{"source": "Human rights", "target": "Forced labour", "value": 0.0365458590642445},
|
||||
{"source": "Forced labour", "target": "Hazelnuts (Organic)", "value": 0.0114913076376389},
|
||||
{"source": "Forced labour", "target": "Cocoa butter (Organic)", "value": 0.0081134807347},
|
||||
{"source": "Forced labour", "target": "Cocoa mass (Organic)", "value": 0.00765230236575},
|
||||
{"source": "Forced labour", "target": "Cane sugar (Organic)", "value": 0.004},
|
||||
{"source": "Forced labour", "target": "Vegetables (Organic)", "value": 0.00296668823626667},
|
||||
{"source": "Forced labour", "target": "Coconut oil (Organic)", "value": 0.00232208008988889},
|
||||
{"source": "Human rights", "target": "Health safety", "value": 0.0345435327843611},
|
||||
{"source": "Health safety", "target": "Hazelnuts (Organic)", "value": 0.0121419536385},
|
||||
{"source": "Health safety", "target": "Cocoa mass (Organic)", "value": 0.00766772850678333},
|
||||
{"source": "Health safety", "target": "Cocoa butter (Organic)", "value": 0.0056245892061},
|
||||
{"source": "Health safety", "target": "Coconut oil (Organic)", "value": 0.00361616847688889},
|
||||
{"source": "Health safety", "target": "Cane sugar (Organic)", "value": 0.00277374682533333},
|
||||
{"source": "Health safety", "target": "Vegetables (Organic)", "value": 0.00271934613075556},
|
||||
{"source": "Human rights", "target": "Access to water", "value": 0.0340206659360667},
|
||||
{"source": "Access to water", "target": "Cocoa mass (Organic)", "value": 0.0105},
|
||||
{"source": "Access to water", "target": "Cocoa butter (Organic)", "value": 0.0089274160792},
|
||||
{"source": "Access to water", "target": "Hazelnuts (Organic)", "value": 0.0054148022845},
|
||||
{"source": "Access to water", "target": "Cane sugar (Organic)", "value": 0.00333938149786667},
|
||||
{"source": "Access to water", "target": "Vegetables (Organic)", "value": 0.00314663377488889},
|
||||
{"source": "Access to water", "target": "Coconut oil (Organic)", "value": 0.00269243229961111},
|
||||
{"source": "Human rights", "target": "Freedom of association", "value": 0.0320571523941667},
|
||||
{"source": "Freedom of association", "target": "Hazelnuts (Organic)", "value": 0.0132312483463611},
|
||||
{"source": "Freedom of association", "target": "Cocoa butter (Organic)", "value": 0.0077695200707},
|
||||
{"source": "Freedom of association", "target": "Cocoa mass (Organic)", "value": 0.00510606573995},
|
||||
{"source": "Freedom of association", "target": "Vegetables (Organic)", "value": 0.00354321156324444},
|
||||
{"source": "Freedom of association", "target": "Cane sugar (Organic)", "value": 0.00240710667391111},
|
||||
{"source": "Freedom of association", "target": "Coconut oil (Organic)", "value": 0},
|
||||
{"source": "Human rights", "target": "Access to land", "value": 0.0315022209894056},
|
||||
{"source": "Access to land", "target": "Hazelnuts (Organic)", "value": 0.00964970063322223},
|
||||
{"source": "Access to land", "target": "Cocoa mass (Organic)", "value": 0.00938530207965},
|
||||
{"source": "Access to land", "target": "Cocoa butter (Organic)", "value": 0.0060110791848},
|
||||
{"source": "Access to land", "target": "Cane sugar (Organic)", "value": 0.00380818314608889},
|
||||
{"source": "Access to land", "target": "Vegetables (Organic)", "value": 0.00264795594564445},
|
||||
{"source": "Access to land", "target": "Coconut oil (Organic)", "value": 0},
|
||||
{"source": "Human rights", "target": "Sufficient wage", "value": 0.0287776757227333},
|
||||
{"source": "Sufficient wage", "target": "Cocoa mass (Organic)", "value": 0.00883512456493333},
|
||||
{"source": "Sufficient wage", "target": "Cocoa butter (Organic)", "value": 0.0078343367268},
|
||||
{"source": "Sufficient wage", "target": "Coconut oil (Organic)", "value": 0.00347879026511111},
|
||||
{"source": "Sufficient wage", "target": "Hazelnuts (Organic)", "value": 0.00316254211388889},
|
||||
{"source": "Sufficient wage", "target": "Vegetables (Organic)", "value": 0.00281013722808889},
|
||||
{"source": "Sufficient wage", "target": "Cane sugar (Organic)", "value": 0.00265674482391111},
|
||||
{"source": "Human rights", "target": "Equal rights migrants", "value" : 0.0271146645119444},
|
||||
{"source": "Equal rights migrants", "target": "Cocoa butter (Organic)", "value": 0.0071042315061},
|
||||
{"source": "Equal rights migrants", "target": "Cocoa mass (Organic)", "value": 0.00636673210005},
|
||||
{"source": "Equal rights migrants", "target": "Hazelnuts (Organic)", "value": 0.00601459775836111},
|
||||
{"source": "Equal rights migrants", "target": "Coconut oil (Organic)", "value": 0.00429185583138889},
|
||||
{"source": "Equal rights migrants", "target": "Cane sugar (Organic)", "value": 0.00182647471915556},
|
||||
{"source": "Equal rights migrants", "target": "Vegetables (Organic)", "value": 0.00151077259688889},
|
||||
{"source": "Human rights", "target": "Discrimination", "value": 0.0211217763359833},
|
||||
{"source": "Discrimination", "target": "Cocoa mass (Organic)", "value": 0.00609671700306667},
|
||||
{"source": "Discrimination", "target": "Cocoa butter (Organic)", "value": 0.0047738806325},
|
||||
{"source": "Discrimination", "target": "Coconut oil (Organic)", "value": 0.00368119084494444},
|
||||
{"source": "Discrimination", "target": "Vegetables (Organic)", "value": 0.00286009813604444},
|
||||
{"source": "Discrimination", "target": "Cane sugar (Organic)", "value": 0.00283706180951111},
|
||||
{"source": "Discrimination", "target": "Hazelnuts (Organic)", "value": 0.000872827909916666},
|
||||
{"source": "Human rights", "target": "Working hours", "value": 0.02082642898975},
|
||||
{"source": "Working hours", "target": "Hazelnuts (Organic)", "value": 0.0107216773848333},
|
||||
{"source": "Working hours", "target": "Coconut oil (Organic)", "value": 0.00359009052944444},
|
||||
{"source": "Working hours", "target": "Vegetables (Organic)", "value": 0.00212300379075556},
|
||||
{"source": "Working hours", "target": "Cocoa butter (Organic)", "value": 0.0018518584356},
|
||||
{"source": "Working hours", "target": "Cocoa mass (Organic)", "value": 0.00158227069058333},
|
||||
{"source": "Working hours", "target": "Cane sugar (Organic)", "value": 0.000957528158533333}
|
||||
]}
|
||||
+67
File diff suppressed because one or more lines are too long
@@ -0,0 +1,91 @@
|
||||
// 开盘，收盘，最低，最高
|
||||
define([
|
||||
['2013/1/24', 2320.26,2320.26,2287.3,2362.94],
|
||||
['2013/1/25', 2300,2291.3,2288.26,2308.38],
|
||||
['2013/1/28', 2295.35,2346.5,2295.35,2346.92],
|
||||
['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
|
||||
['2013/1/30', 2360.75,2382.48,2347.89,2383.76],
|
||||
['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
|
||||
['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
|
||||
['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
|
||||
['2013/2/5', 2411,2433.13,2403.3,2437.42],
|
||||
['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
|
||||
['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
|
||||
['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
|
||||
['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
|
||||
['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
|
||||
['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
|
||||
['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
|
||||
['2013/2/22', 2322.94,2314.16,2308.76,2330.88],
|
||||
['2013/2/25', 2320.62,2325.82,2315.01,2338.78],
|
||||
['2013/2/26', 2313.74,2293.34,2289.89,2340.71],
|
||||
['2013/2/27', 2297.77,2313.22,2292.03,2324.63],
|
||||
['2013/2/28', 2322.32,2365.59,2308.92,2366.16],
|
||||
['2013/3/1', 2364.54,2359.51,2330.86,2369.65],
|
||||
['2013/3/4', 2332.08,2273.4,2259.25,2333.54],
|
||||
['2013/3/5', 2274.81,2326.31,2270.1,2328.14],
|
||||
['2013/3/6', 2333.61,2347.18,2321.6,2351.44],
|
||||
['2013/3/7', 2340.44,2324.29,2304.27,2352.02],
|
||||
['2013/3/8', 2326.42,2318.61,2314.59,2333.67],
|
||||
['2013/3/11', 2314.68,2310.59,2296.58,2320.96],
|
||||
['2013/3/12', 2309.16,2286.6,2264.83,2333.29],
|
||||
['2013/3/13', 2282.17,2263.97,2253.25,2286.33],
|
||||
['2013/3/14', 2255.77,2270.28,2253.31,2276.22],
|
||||
['2013/3/15', 2269.31,2278.4,2250,2312.08],
|
||||
['2013/3/18', 2267.29,2240.02,2239.21,2276.05],
|
||||
['2013/3/19', 2244.26,2257.43,2232.02,2261.31],
|
||||
['2013/3/20', 2257.74,2317.37,2257.42,2317.86],
|
||||
['2013/3/21', 2318.21,2324.24,2311.6,2330.81],
|
||||
['2013/3/22', 2321.4,2328.28,2314.97,2332],
|
||||
['2013/3/25', 2334.74,2326.72,2319.91,2344.89],
|
||||
['2013/3/26', 2318.58,2297.67,2281.12,2319.99],
|
||||
['2013/3/27', 2299.38,2301.26,2289,2323.48],
|
||||
['2013/3/28', 2273.55,2236.3,2232.91,2273.55],
|
||||
['2013/3/29', 2238.49,2236.62,2228.81,2246.87],
|
||||
['2013/4/1', 2229.46,2234.4,2227.31,2243.95],
|
||||
['2013/4/2', 2234.9,2227.74,2220.44,2253.42],
|
||||
['2013/4/3', 2232.69,2225.29,2217.25,2241.34],
|
||||
['2013/4/8', 2196.24,2211.59,2180.67,2212.59],
|
||||
['2013/4/9', 2215.47,2225.77,2215.47,2234.73],
|
||||
['2013/4/10', 2224.93,2226.13,2212.56,2233.04],
|
||||
['2013/4/11', 2236.98,2219.55,2217.26,2242.48],
|
||||
['2013/4/12', 2218.09,2206.78,2204.44,2226.26],
|
||||
['2013/4/15', 2199.91,2181.94,2177.39,2204.99],
|
||||
['2013/4/16', 2169.63,2194.85,2165.78,2196.43],
|
||||
['2013/4/17', 2195.03,2193.8,2178.47,2197.51],
|
||||
['2013/4/18', 2181.82,2197.6,2175.44,2206.03],
|
||||
['2013/4/19', 2201.12,2244.64,2200.58,2250.11],
|
||||
['2013/4/22', 2236.4,2242.17,2232.26,2245.12],
|
||||
['2013/4/23', 2242.62,2184.54,2182.81,2242.62],
|
||||
['2013/4/24', 2187.35,2218.32,2184.11,2226.12],
|
||||
['2013/4/25', 2213.19,2199.31,2191.85,2224.63],
|
||||
['2013/4/26', 2203.89,2177.91,2173.86,2210.58],
|
||||
['2013/5/2', 2170.78,2174.12,2161.14,2179.65],
|
||||
['2013/5/3', 2179.05,2205.5,2179.05,2222.81],
|
||||
['2013/5/6', 2212.5,2231.17,2212.5,2236.07],
|
||||
['2013/5/7', 2227.86,2235.57,2219.44,2240.26],
|
||||
['2013/5/8', 2242.39,2246.3,2235.42,2255.21],
|
||||
['2013/5/9', 2246.96,2232.97,2221.38,2247.86],
|
||||
['2013/5/10', 2228.82,2246.83,2225.81,2247.67],
|
||||
['2013/5/13', 2247.68,2241.92,2231.36,2250.85],
|
||||
['2013/5/14', 2238.9,2217.01,2205.87,2239.93],
|
||||
['2013/5/15', 2217.09,2224.8,2213.58,2225.19],
|
||||
['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
|
||||
['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
|
||||
['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
|
||||
['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
|
||||
['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
|
||||
['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
|
||||
['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
|
||||
['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
|
||||
['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
|
||||
['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
|
||||
['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
|
||||
['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
|
||||
['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
|
||||
['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
|
||||
['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
|
||||
['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
|
||||
['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
|
||||
['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
|
||||
]);
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
var dataMap = {};
|
||||
function dataFormatter(obj) {
|
||||
var pList = ['北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','重庆','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆'];
|
||||
var temp;
|
||||
for (var year = 2002; year <= 2011; year++) {
|
||||
var max = 0;
|
||||
var sum = 0;
|
||||
temp = obj[year];
|
||||
for (var i = 0, l = temp.length; i < l; i++) {
|
||||
max = Math.max(max, temp[i]);
|
||||
sum += temp[i];
|
||||
obj[year][i] = {
|
||||
name : pList[i],
|
||||
value : temp[i]
|
||||
}
|
||||
}
|
||||
obj[year + 'max'] = Math.floor(max / 100) * 100;
|
||||
obj[year + 'sum'] = sum;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
function dataMix(list) {
|
||||
var mixData = {};
|
||||
for (var i = 0, l = list.length; i < l; i++) {
|
||||
for (var key in list[i]) {
|
||||
if (list[i][key] instanceof Array) {
|
||||
mixData[key] = mixData[key] || [];
|
||||
for (var j = 0, k = list[i][key].length; j < k; j++) {
|
||||
mixData[key][j] = mixData[key][j]
|
||||
|| {name : list[i][key][j].name, value : []};
|
||||
mixData[key][j].value.push(list[i][key][j].value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return mixData;
|
||||
}
|
||||
|
||||
dataMap.dataGDP = dataFormatter({
|
||||
//max : 60000,
|
||||
2011:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27,32318.85,15300.65,17560.18,11702.82,45361.85,26931.03,19632.26,19669.56,53210.28,11720.87,2522.66,10011.37,21026.68,5701.84,8893.12,605.83,12512.3,5020.37,1670.44,2102.21,6610.05],
|
||||
2010:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48,27722.31,12359.33,14737.12,9451.26,39169.92,23092.36,15967.61,16037.96,46013.06,9569.85,2064.5,7925.58,17185.48,4602.16,7224.18,507.46,10123.48,4120.75,1350.43,1689.65,5437.47],
|
||||
2009:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3,22990.35,10062.82,12236.53,7655.18,33896.65,19480.46,12961.1,13059.69,39482.56,7759.16,1654.21,6530.01,14151.28,3912.68,6169.75,441.36,8169.8,3387.56,1081.27,1353.31,4277.05],
|
||||
2008:[11115,6719.01,16011.97,7315.4,8496.2,13668.58,6426.1,8314.37,14069.87,30981.98,21462.69,8851.66,10823.01,6971.05,30933.28,18018.53,11328.92,11555,36796.71,7021,1503.06,5793.66,12601.23,3561.56,5692.12,394.85,7314.58,3166.82,1018.62,1203.92,4183.21],
|
||||
2007:[9846.81,5252.76,13607.32,6024.45,6423.18,11164.3,5284.69,7104,12494.01,26018.48,18753.73,7360.92,9248.53,5800.25,25776.91,15012.46,9333.4,9439.6,31777.01,5823.41,1254.17,4676.13,10562.39,2884.11,4772.52,341.43,5757.29,2703.98,797.35,919.11,3523.16],
|
||||
2006:[8117.78,4462.74,11467.6,4878.61,4944.25,9304.52,4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],
|
||||
2005:[6969.52,3905.64,10012.11,4230.53,3905.03,8047.26,3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],
|
||||
2004:[6033.21,3110.97,8477.63,3571.37,3041.07,6672,3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],
|
||||
2003:[5007.21,2578.03,6921.29,2855.23,2388.38,6002.54,2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],
|
||||
2002:[4315,2150.76,6018.28,2324.8,1940.94,5458.22,2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6]
|
||||
});
|
||||
|
||||
dataMap.dataPI = dataFormatter({
|
||||
//max : 4000,
|
||||
2011:[136.27,159.72,2905.73,641.42,1306.3,1915.57,1277.44,1701.5,124.94,3064.78,1583.04,2015.31,1612.24,1391.07,3973.85,3512.24,2569.3,2768.03,2665.2,2047.23,659.23,844.52,2983.51,726.22,1411.01,74.47,1220.9,678.75,155.08,184.14,1139.03],
|
||||
2010:[124.36,145.58,2562.81,554.48,1095.28,1631.08,1050.15,1302.9,114.15,2540.1,1360.56,1729.02,1363.67,1206.98,3588.28,3258.09,2147,2325.5,2286.98,1675.06,539.83,685.38,2482.89,625.03,1108.38,68.72,988.45,599.28,134.92,159.29,1078.63],
|
||||
2009:[118.29,128.85,2207.34,477.59,929.6,1414.9,980.57,1154.33,113.82,2261.86,1163.08,1495.45,1182.74,1098.66,3226.64,2769.05,1795.9,1969.69,2010.27,1458.49,462.19,606.8,2240.61,550.27,1067.6,63.88,789.64,497.05,107.4,127.25,759.74],
|
||||
2008:[112.83,122.58,2034.59,313.58,907.95,1302.02,916.72,1088.94,111.8,2100.11,1095.96,1418.09,1158.17,1060.38,3002.65,2658.78,1780,1892.4,1973.05,1453.75,436.04,575.4,2216.15,539.19,1020.56,60.62,753.72,462.27,105.57,118.94,691.07],
|
||||
2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31,986.02,1200.18,1002.11,905.77,2509.14,2217.66,1378,1626.48,1695.57,1241.35,361.07,482.39,2032,446.38,837.35,54.89,592.63,387.55,83.41,97.89,628.72],
|
||||
2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1,1011.03,865.98,786.14,2138.9,1916.74,1140.41,1272.2,1532.17,1032.47,323.48,386.38,1595.48,382.06,724.4,50.9,484.81,334,67.55,79.54,527.8],
|
||||
2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83,966.5,827.36,727.37,1963.51,1892.01,1082.13,1100.65,1428.27,912.5,300.75,463.4,1481.14,368.94,661.69,48.04,435.77,308.06,65.34,72.07,509.99],
|
||||
2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1,950.5,786.84,664.5,1778.45,1649.29,1020.09,1022.45,1248.59,817.88,278.76,428.05,1379.93,334.5,607.75,44.3,387.88,286.78,60.7,65.33,461.26],
|
||||
2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85,749.4,692.94,560,1480.67,1198.7,798.35,886.47,1072.91,658.78,244.29,339.06,1128.61,298.69,494.6,40.7,302.66,237.91,48.47,55.63,412.9],
|
||||
2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44,685.2,783.66,664.78,535.98,1390,1288.36,707,847.25,1015.08,601.99,222.89,317.87,1047.95,281.1,463.44,39.75,282.21,215.51,47.31,52.95,305]
|
||||
});
|
||||
|
||||
dataMap.dataSI = dataFormatter({
|
||||
//max : 26600,
|
||||
2011:[3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58,8309.38,9069.2,6390.55,24017.11,15427.08,9815.94,9361.99,26447.38,5675.32,714.5,5543.04,11029.13,2194.33,3780.32,208.79,6935.59,2377.83,975.18,1056.15,3225.9],
|
||||
2010:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93,6436.62,7522.83,5122.88,21238.49,13226.38,7767.24,7343.19,23014.53,4511.68,571,4359.12,8672.18,1800.06,3223.49,163.92,5446.1,1984.97,744.63,827.91,2592.15],
|
||||
2009:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49,4905.22,6005.3,3919.45,18901.83,11010.5,6038.08,5687.19,19419.7,3381.54,443.43,3448.77,6711.87,1476.62,2582.53,136.63,4236.42,1527.24,575.33,662.32,1929.59],
|
||||
2008:[2626.41,3709.78,8701.34,4242.36,4376.19,7158.84,3097.12,4319.75,6085.84,16993.34,11567.42,4198.93,5318.44,3554.81,17571.98,10259.99,5082.07,5028.93,18502.2,3037.74,423.55,3057.78,5823.39,1370.03,2452.75,115.56,3861.12,1470.34,557.12,609.98,2070.76],
|
||||
2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26,10154.25,3370.96,4476.42,2975.53,14647.53,8282.83,4143.06,3977.72,16004.61,2425.29,364.26,2368.53,4648.79,1124.79,2038.39,98.48,2986.46,1279.32,419.03,455.04,1647.55],
|
||||
2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89,8511.51,2711.18,3695.04,2419.74,12574.03,6724.61,3365.08,3187.05,13469.77,1878.56,308.62,1871.65,3775.14,967.54,1705.83,80.1,2452.44,1043.19,331.91,351.58,1459.3],
|
||||
2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96,7164.75,2245.9,3175.92,1917.47,10478.62,5514.14,2852.12,2612.57,11356.6,1510.68,240.83,1564,3067.23,821.16,1426.42,63.52,1951.36,838.56,264.61,281.05,1164.79],
|
||||
2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99,6250.38,1844.9,2770.49,1566.4,8478.69,4182.1,2320.6,2190.54,9280.73,1253.7,205.6,1376.91,2489.4,681.5,1281.63,52.74,1553.1,713.3,211.7,244.05,914.47],
|
||||
2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11,5096.38,1535.29,2340.82,1204.33,6485.05,3310.14,1956.02,1777.74,7592.78,984.08,175.82,1135.31,2014.8,569.37,1047.66,47.64,1221.17,572.02,171.92,194.27,719.54],
|
||||
2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49,4090.48,1337.04,2036.97,941.77,5184.98,2768.75,1709.89,1523.5,6143.4,846.89,148.88,958.87,1733.38,481.96,934.88,32.72,1007.56,501.69,144.51,153.06,603.15]
|
||||
});
|
||||
|
||||
dataMap.dataTI = dataFormatter({
|
||||
//max : 25000,
|
||||
2011:[12363.18,5219.24,8483.17,3960.87,5015.89,8158.98,3679.91,4918.09,11142.86,20842.21,14180.23,4975.96,6878.74,3921.2,17370.89,7991.72,7247.02,7539.54,24097.7,3998.33,1148.93,3623.81,7014.04,2781.29,3701.79,322.57,4355.81,1963.79,540.18,861.92,2245.12],
|
||||
2010:[10600.84,4238.65,7123.77,3412.38,4209.03,6849.37,3111.12,4040.55,9833.51,17131.45,12063.82,4193.69,5850.62,3121.4,14343.14,6607.89,6053.37,6369.27,20711.55,3383.11,953.67,2881.08,6030.41,2177.07,2892.31,274.82,3688.93,1536.5,470.88,702.45,1766.69],
|
||||
2009:[9179.19,3405.16,6068.31,2886.92,3696.65,5891.25,2756.26,3371.95,8930.85,13629.07,9918.78,3662.15,5048.49,2637.07,11768.18,5700.91,5127.12,5402.81,18052.59,2919.13,748.59,2474.44,5198.8,1885.79,2519.62,240.85,3143.74,1363.27,398.54,563.74,1587.72],
|
||||
2008:[8375.76,2886.65,5276.04,2759.46,3212.06,5207.72,2412.26,2905.68,7872.23,11888.53,8799.31,3234.64,4346.4,2355.86,10358.64,5099.76,4466.85,4633.67,16321.46,2529.51,643.47,2160.48,4561.69,1652.34,2218.81,218.67,2699.74,1234.21,355.93,475,1421.38],
|
||||
2007:[7236.15,2250.04,4600.72,2257.99,2467.41,4486.74,2025.44,2493.04,6821.11,9730.91,7613.46,2789.78,3770,1918.95,8620.24,4511.97,3812.34,3835.4,14076.83,2156.76,528.84,1825.21,3881.6,1312.94,1896.78,188.06,2178.2,1037.11,294.91,366.18,1246.89],
|
||||
2006:[5837.55,1902.31,3895.36,1846.18,1934.35,3798.26,1687.07,2096.35,5508.48,7914.11,6281.86,2390.29,3022.83,1614.65,7187.26,3721.44,3111.98,3229.42,11585.82,1835.12,433.57,1649.2,3319.62,989.38,1557.91,159.76,1806.36,900.16,249.04,294.78,1058.16],
|
||||
2005:[4854.33,1658.19,3340.54,1611.07,1542.26,3295.45,1413.83,1857.42,4776.2,6612.22,5360.1,2137.77,2551.41,1411.92,5924.74,3181.27,2655.94,2882.88,9772.5,1560.92,377.17,1440.32,2836.73,815.32,1374.62,137.24,1546.59,787.36,213.37,259.49,929.41],
|
||||
2004:[4092.27,1319.76,2805.47,1375.67,1270,2811.95,1223.64,1657.77,4097.26,5198.03,4584.22,1963.9,2206.02,1225.8,4764.7,2722.4,2292.55,2428.95,8335.3,1361.92,335.3,1229.62,2510.3,661.8,1192.53,123.3,1234.6,688.41,193.7,227.73,833.36],
|
||||
2003:[3435.95,1150.81,2439.68,1176.65,1000.79,2487.85,1075.48,1467.9,3404.19,4493.31,3890.79,1638.42,1949.91,1043.08,4112.43,2358.86,2003.08,1995.78,7178.94,1178.25,293.85,1081.35,2189.68,558.28,1013.76,96.76,1063.89,589.91,169.81,195.46,753.91],
|
||||
2002:[2982.57,997.47,2149.75,992.69,811.47,2258.17,958.88,1319.4,3038.9,3891.92,3227.99,1399.02,1765.8,972.73,3700.52,1978.37,1795.93,1780.79,6343.94,1074.85,270.96,956.12,1943.68,480.37,914.5,89.56,963.62,514.83,148.83,171.14,704.5]
|
||||
});
|
||||
|
||||
dataMap.dataEstate = dataFormatter({
|
||||
//max : 3600,
|
||||
2011:[1074.93,411.46,918.02,224.91,384.76,876.12,238.61,492.1,1019.68,2747.89,1677.13,634.92,911.16,402.51,1838.14,987,634.67,518.04,3321.31,465.68,208.71,396.28,620.62,160.3,222.31,17.44,398.03,134.25,29.05,79.01,176.22],
|
||||
2010:[1006.52,377.59,697.79,192,309.25,733.37,212.32,391.89,1002.5,2600.95,1618.17,532.17,679.03,340.56,1622.15,773.23,564.41,464.21,2813.95,405.79,188.33,266.38,558.56,139.64,223.45,14.54,315.95,110.02,25.41,60.53,143.44],
|
||||
2009:[1062.47,308.73,612.4,173.31,286.65,605.27,200.14,301.18,1237.56,2025.39,1316.84,497.94,656.61,305.9,1329.59,622.98,546.11,400.11,2470.63,348.98,121.76,229.09,548.14,136.15,205.14,13.28,239.92,101.37,23.05,47.56,115.23],
|
||||
2008:[844.59,227.88,513.81,166.04,273.3,500.81,182.7,244.47,939.34,1626.13,1052.03,431.27,506.98,281.96,1104.95,512.42,526.88,340.07,2057.45,282.96,95.6,191.21,453.63,104.81,195.48,15.08,193.27,93.8,19.96,38.85,89.79],
|
||||
2007:[821.5,183.44,467.97,134.12,191.01,410.43,153.03,225.81,958.06,1365.71,981.42,366.57,511.5,225.96,953.69,447.44,409.65,301.8,2029.77,239.45,67.19,196.06,376.84,93.19,193.59,13.24,153.98,83.52,16.98,29.49,91.28],
|
||||
2006:[658.3,156.64,397.14,117.01,136.5,318.54,131.01,194.7,773.61,1017.91,794.41,281.98,435.22,184.67,786.51,348.7,294.73,254.81,1722.07,192.2,44.45,158.2,336.2,80.24,165.92,11.92,125.2,73.21,15.17,25.53,68.9],
|
||||
2005:[493.73,122.67,330.87,106,98.75,256.77,112.29,163.34,715.97,799.73,688.86,231.66,331.8,171.88,664.9,298.19,217.17,215.63,1430.37,165.05,38.2,143.88,286.23,76.38,148.69,10.02,108.62,63.78,14.1,22.97,55.79],
|
||||
2004:[436.11,106.14,231.08,95.1,73.81,203.1,97.93,137.74,666.3,534.17,587.83,188.28,248.44,167.2,473.27,236.44,204.8,191.5,1103.75,122.52,30.64,129.12,264.3,68.3,116.54,5.8,95.9,56.84,13,20.78,53.55],
|
||||
2003:[341.88,92.31,185.19,78.73,61.05,188.49,91.99,127.2,487.82,447.47,473.16,162.63,215.84,138.02,418.21,217.58,176.8,186.49,955.66,100.93,25.14,113.69,231.72,59.86,103.79,4.35,83.9,48.09,11.41,16.85,47.84],
|
||||
2002:[298.02,73.04,140.89,65.83,51.48,130.94,76.11,118.7,384.86,371.09,360.63,139.18,188.09,125.27,371.13,199.31,145.17,165.29,808.16,82.83,21.45,90.48,210.82,53.49,95.68,3.42,77.68,41.52,9.74,13.46,43.04]
|
||||
});
|
||||
|
||||
dataMap.dataFinancial = dataFormatter({
|
||||
//max : 3200,
|
||||
2011:[2215.41,756.5,746.01,519.32,447.46,755.57,207.65,370.78,2277.4,2600.11,2730.29,503.85,862.41,357.44,1640.41,868.2,674.57,501.09,2916.13,445.37,105.24,704.66,868.15,297.27,456.23,31.7,432.11,145.05,62.56,134.18,288.77],
|
||||
2010:[1863.61,572.99,615.42,448.3,346.44,639.27,190.12,304.59,1950.96,2105.92,2326.58,396.17,767.58,241.49,1361.45,697.68,561.27,463.16,2658.76,384.53,78.12,496.56,654.7,231.51,375.08,27.08,384.75,100.54,54.53,97.87,225.2],
|
||||
2009:[1603.63,461.2,525.67,361.64,291.1,560.2,180.83,227.54,1804.28,1596.98,1899.33,359.6,612.2,165.1,1044.9,499.92,479.11,402.57,2283.29,336.82,65.73,389.97,524.63,194.44,351.74,23.17,336.21,88.27,45.63,75.54,198.87],
|
||||
2008:[1519.19,368.1,420.74,290.91,219.09,455.07,147.24,177.43,1414.21,1298.48,1653.45,313.81,497.65,130.57,880.28,413.83,393.05,334.32,1972.4,249.01,47.33,303.01,411.14,151.55,277.66,22.42,287.16,72.49,36.54,64.8,171.97],
|
||||
2007:[1302.77,288.17,347.65,218.73,148.3,386.34,126.03,155.48,1209.08,1054.25,1251.43,223.85,385.84,101.34,734.9,302.31,337.27,260.14,1705.08,190.73,34.43,247.46,359.11,122.25,168.55,11.51,231.03,61.6,27.67,51.05,149.22],
|
||||
2006:[982.37,186.87,284.04,169.63,108.21,303.41,100.75,74.17,825.2,653.25,906.37,166.01,243.9,79.75,524.94,219.72,174.99,204.72,899.91,129.14,16.37,213.7,299.5,89.43,143.62,6.44,152.25,50.51,23.69,36.99,99.25],
|
||||
2005:[840.2,147.4,213.47,135.07,72.52,232.85,83.63,35.03,675.12,492.4,686.32,127.05,186.12,69.55,448.36,181.74,127.32,162.37,661.81,91.93,13.16,185.18,262.26,73.67,130.5,7.57,127.58,44.73,20.36,32.25,80.34],
|
||||
2004:[713.79,136.97,209.1,110.29,55.89,188.04,77.17,32.2,612.45,440.5,523.49,94.1,171,65.1,343.37,170.82,118.85,118.64,602.68,74,11.56,162.38,236.5,60.3,118.4,5.4,90.1,42.99,19,27.92,70.3],
|
||||
2003:[635.56,112.79,199.87,118.48,55.89,145.38,73.15,32.2,517.97,392.11,451.54,87.45,150.09,64.31,329.71,165.11,107.31,99.35,534.28,61.59,10.68,147.04,206.24,48.01,105.48,4.74,77.87,42.31,17.98,24.8,64.92],
|
||||
2002:[561.91,76.86,179.6,124.1,48.39,137.18,75.45,31.6,485.25,368.86,347.53,81.85,138.28,76.51,310.07,158.77,96.95,92.43,454.65,35.86,10.08,134.52,183.13,41.45,102.39,2.81,67.3,42.08,16.75,21.45,52.18]
|
||||
});
|
||||
|
||||
dataMap.dataGDP_Estate = dataMix([dataMap.dataEstate, dataMap.dataGDP]);
|
||||
Vendored
+130
@@ -0,0 +1,130 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src=""></script>
|
||||
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
|
||||
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'zrender/vml/vml'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((Math.random() * 5).toFixed(2));
|
||||
data2.push(-Math.random().toFixed(2));
|
||||
data3.push((Math.random() + 0.5).toFixed(2));
|
||||
data4.push((Math.random() + 0.3).toFixed(2));
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
dataView: {
|
||||
optionToContent: function(opt) {
|
||||
var axisData = opt.xAxis[0].data;
|
||||
var series = opt.series;
|
||||
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
|
||||
+ '<td>时间</td>'
|
||||
+ '<td>' + series[0].name + '</td>'
|
||||
+ '<td>' + series[1].name + '</td>'
|
||||
+ '</tr>';
|
||||
for (var i = 0, l = axisData.length; i < l; i++) {
|
||||
table += '<tr>'
|
||||
+ '<td>' + axisData[i] + '</td>'
|
||||
+ '<td>' + series[0].data[i] + '</td>'
|
||||
+ '<td>' + series[1].data[i] + '</td>'
|
||||
+ '</tr>';
|
||||
}
|
||||
table += '</tbody></table>';
|
||||
return table;
|
||||
},
|
||||
contentToOption: function () {
|
||||
console.log(arguments);
|
||||
}
|
||||
},
|
||||
saveAsImage: {
|
||||
pixelRatio: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
onZero: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
inverse: true,
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: data1
|
||||
}, {
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: data2
|
||||
}, {
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
data: data3
|
||||
}, {
|
||||
name: 'bar4',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
data: data4
|
||||
}]
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+337
@@ -0,0 +1,337 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#main {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background: #eef;
|
||||
line-height: 22px;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
vertical-align: top;
|
||||
margin: 30px 0 30px 50px;
|
||||
}
|
||||
.block .ec {
|
||||
width: 800px;
|
||||
height: 240px;
|
||||
}
|
||||
.block .info {
|
||||
display: block;
|
||||
text-align: left;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.block .info td {
|
||||
font-size: 12px;
|
||||
border: 1px solid #bbb;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
strong {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var echarts;
|
||||
var zrUtil;
|
||||
var charts = [];
|
||||
var els = [];
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'zrender/core/util',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoom'
|
||||
], function (ec, zu) {
|
||||
echarts = ec;
|
||||
zrUtil = zu;
|
||||
|
||||
|
||||
renderTitle('Order sensitive in processing: no min/max on y (<strong>Try zooming y slider to check if normal</strong>)');
|
||||
makeChart(getOption(
|
||||
makeSpecialTrendData(),
|
||||
{
|
||||
xAxisType: 'value',
|
||||
xStart: 15,
|
||||
xEnd: 80,
|
||||
yScale: true,
|
||||
symbolSize: 5
|
||||
}
|
||||
), 500);
|
||||
|
||||
|
||||
renderTitle('Order sensitive in processing: min/max set on y (<strong>Try zooming y slider to check if normal</strong>)');
|
||||
makeChart(getOption(
|
||||
makeSpecialTrendData(),
|
||||
{
|
||||
xAxisType: 'value',
|
||||
xStart: 15,
|
||||
xEnd: 80,
|
||||
yScale: true,
|
||||
symbolSize: 5,
|
||||
yMin: 500,
|
||||
yMax: 3000
|
||||
}
|
||||
), 500);
|
||||
|
||||
|
||||
renderTitle('Order sensitive in processing: only max set on y and scale (<strong>Try zooming y slider to check if normal</strong>)');
|
||||
makeChart(getOption(
|
||||
makeSpecialTrendData(),
|
||||
{
|
||||
xAxisType: 'value',
|
||||
xStart: 15,
|
||||
xEnd: 80,
|
||||
yScale: true,
|
||||
symbolSize: 5,
|
||||
yMax: 3000
|
||||
}
|
||||
), 500);
|
||||
|
||||
|
||||
renderTitle('Order sensitive in processing: only max set on y and no scale (<strong>Try zooming y slider to check if normal</strong>)');
|
||||
makeChart(getOption(
|
||||
makeSpecialTrendData(),
|
||||
{
|
||||
xAxisType: 'value',
|
||||
xStart: 15,
|
||||
xEnd: 80,
|
||||
yScale: false,
|
||||
symbolSize: 5,
|
||||
yMax: 3000
|
||||
}
|
||||
), 500);
|
||||
});
|
||||
|
||||
|
||||
|
||||
function makeSpecialTrendData() {
|
||||
var data = {data1: []};
|
||||
var base = -100;
|
||||
for (var i = 0; i < 50; i++) {
|
||||
if (i < 10) {
|
||||
data.data1.push([i * 10, base += 197 + random(3)]);
|
||||
}
|
||||
else if (i < 20) {
|
||||
data.data1.push([i * 10, base -= 17 + random(3)]);
|
||||
}
|
||||
else if (i < 30) {
|
||||
data.data1.push([i * 10, base += 3 + random(3)]);
|
||||
}
|
||||
else if (i < 40) {
|
||||
data.data1.push([i * 10, base -= 5 + random(3)]);
|
||||
}
|
||||
else {
|
||||
data.data1.push([i * 10, base += 157 + random(3)]);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
function renderTitle(label) {
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('a');
|
||||
el.className = 'title';
|
||||
var html = label; // label is html
|
||||
el.innerHTML = html;
|
||||
el.href = '#' + html.replace(/\s/g, '_');
|
||||
el.name = html.replace(/\s/g, '_');
|
||||
containerEl.appendChild(el);
|
||||
}
|
||||
|
||||
function makeChart(opt, height) {
|
||||
var heightStyle = height ? ' style="height:' + height + 'px;" ' : '';
|
||||
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('div');
|
||||
el.className = 'block';
|
||||
el.innerHTML = '<div ' + heightStyle + ' class="ec"></div><div class="info"></div>';
|
||||
containerEl.appendChild(el);
|
||||
|
||||
var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
|
||||
chart.setOption(opt);
|
||||
|
||||
charts.push(chart);
|
||||
els.push(el);
|
||||
|
||||
chart.on('dataZoom', zrUtil.curry(renderProp, chart, el, false));
|
||||
renderProp(chart, el, true);
|
||||
}
|
||||
|
||||
function renderProp(chart, el, isInit) {
|
||||
var resultOpt = chart.getOption();
|
||||
var dataZoomOpt = zrUtil.map(resultOpt.dataZoom, function (rawOpt) {
|
||||
return ''
|
||||
+ '<tr>'
|
||||
+ '<td>name:</td><td>' + encodeHTML(rawOpt.name) + '</td>'
|
||||
+ '<td>start:</td><td>' + encodeHTML(rawOpt.start) + '</td>'
|
||||
+ '<td>end:</td><td>' + encodeHTML(rawOpt.end) + '</td>'
|
||||
+ '<td>startValue:</td><td>' + encodeHTML(rawOpt.startValue) + '</td>'
|
||||
+ '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>'
|
||||
+ '</tr>';
|
||||
});
|
||||
|
||||
el.lastChild.innerHTML = ''
|
||||
+ (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>'
|
||||
+ '<table><tbody>' + dataZoomOpt.join('') + '</tbody></table>';
|
||||
}
|
||||
|
||||
function encodeHTML(source) {
|
||||
return source == null
|
||||
? ''
|
||||
: String(source)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function random(max) {
|
||||
return +(Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
function getOption(data, args) {
|
||||
args = zrUtil.defaults(
|
||||
args || {},
|
||||
{
|
||||
symbol: null,
|
||||
xStart: 1,
|
||||
xEnd: 5,
|
||||
yStart: 0,
|
||||
yEnd: 100,
|
||||
yFitlerMode: 'empty',
|
||||
symbolSize: 10
|
||||
}
|
||||
);
|
||||
|
||||
var option = {
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['n1', 'n2']
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {},
|
||||
dataZoom: {show: true},
|
||||
restore: {show: true},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: args.xAxisType,
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
data: args.xAxisData
|
||||
},
|
||||
yAxis: {
|
||||
scale: args.yScale,
|
||||
type: 'value',
|
||||
min: args.yMin,
|
||||
max: args.yMax,
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'xSlider',
|
||||
name: 'xSlider',
|
||||
show: true,
|
||||
filterMode: args.xFilterMode,
|
||||
xAxisIndex: [0],
|
||||
start: args.xStart,
|
||||
end: args.xEnd
|
||||
},
|
||||
{
|
||||
name: 'ySlider',
|
||||
show: true,
|
||||
filterMode: args.yFitlerMode,
|
||||
yAxisIndex: [0],
|
||||
start: args.yStart,
|
||||
end: args.yEnd
|
||||
},
|
||||
{
|
||||
name: 'xInside',
|
||||
type: 'inside',
|
||||
filterMode: args.xFilterMode,
|
||||
xAxisIndex: [0],
|
||||
start: args.xStart,
|
||||
end: args.xEnd
|
||||
},
|
||||
{
|
||||
name: 'yInside',
|
||||
type: 'inside',
|
||||
filterMode: args.yFilterMode,
|
||||
yAxisIndex: [0],
|
||||
start: args.yStart,
|
||||
end: args.yEnd
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'n1',
|
||||
type: 'line',
|
||||
symbolSize: args.symbolSize,
|
||||
symbol: args.symbol,
|
||||
data: data.data1
|
||||
},
|
||||
{
|
||||
name: 'n2',
|
||||
type: 'line',
|
||||
symbol: args.symbol,
|
||||
symbolSize: args.symbolSize,
|
||||
data: data.data2
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (!data.data2) {
|
||||
option.series.splice(1, 1);
|
||||
}
|
||||
|
||||
return option;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+334
@@ -0,0 +1,334 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#main {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-right: 200px;
|
||||
}
|
||||
.title {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background: #eef;
|
||||
line-height: 22px;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
vertical-align: top;
|
||||
margin: 30px 0 30px 50px;
|
||||
}
|
||||
.block .ec {
|
||||
width: 800px;
|
||||
height: 240px;
|
||||
}
|
||||
.block .info {
|
||||
display: block;
|
||||
text-align: left;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.block .info td {
|
||||
font-size: 12px;
|
||||
border: 1px solid #bbb;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
.code-panel {
|
||||
width: 200px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 2px solid #aaa;
|
||||
}
|
||||
.code-line {
|
||||
margin: 15px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.code-line textarea{
|
||||
width: 190px;
|
||||
height: 180px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<div class="code-panel">
|
||||
<div class="code-line">
|
||||
<textarea id="code1">
|
||||
chart.setOption({
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'xSlider',
|
||||
startValue: '类目36',
|
||||
endValue: '类目90'
|
||||
}
|
||||
]
|
||||
});
|
||||
</textarea>
|
||||
chartIndex: <input id="chartIndex1" type="text" value="1"/>
|
||||
<input type="button" value="run" onclick="runCode(1);"/>
|
||||
</div>
|
||||
|
||||
<div class="code-line">
|
||||
<textarea id="code2">
|
||||
chart.setOption({
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'xSlider',
|
||||
startValue: '2011-02-04',
|
||||
endValue: '2011-05-06'
|
||||
}
|
||||
]
|
||||
});
|
||||
</textarea>
|
||||
chartIndex: <input id="chartIndex2" type="text" value="2"/>
|
||||
<input type="button" value="run" onclick="runCode(2);"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var echarts;
|
||||
var zrUtil;
|
||||
var charts = [];
|
||||
var els = [];
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'zrender/core/util',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoom'
|
||||
], function (ec, zu) {
|
||||
echarts = ec;
|
||||
zrUtil = zu;
|
||||
|
||||
renderTitle('axisType_value');
|
||||
var data = {data1: [], data2: []};
|
||||
for (var i = 0; i < 500; i++) {
|
||||
data.data1.push([random(1000), random(500), random(1)]);
|
||||
data.data2.push([random(1000), random(500), random(1)]);
|
||||
}
|
||||
makeChart(getOption(data, 'value'));
|
||||
|
||||
|
||||
renderTitle('axisType_category');
|
||||
var data = {data1: [], data2: []};
|
||||
var xAxisData = [];
|
||||
for (var i = 0; i < 500; i++) {
|
||||
data.data1.push(random(500));
|
||||
data.data2.push(random(500));
|
||||
xAxisData.push('类目' + i);
|
||||
}
|
||||
makeChart(getOption(data, 'category', xAxisData));
|
||||
|
||||
|
||||
renderTitle('axisType_time');
|
||||
var data = {data1: [], data2: []};
|
||||
var baseDate = +new Date(2010, 3, 3);
|
||||
for (var i = 0; i < 500; i++) {
|
||||
var date = new Date(baseDate + i * 3600 * 24 * 1000);
|
||||
date = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
|
||||
data.data1.push([date, random(500)]);
|
||||
data.data2.push([date, random(500)]);
|
||||
}
|
||||
makeChart(getOption(data, 'time'));
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function renderTitle(label) {
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('a');
|
||||
el.className = 'title';
|
||||
var html = encodeHTML(label);
|
||||
el.innerHTML = html;
|
||||
el.href = '#' + html.replace(/\s/g, '_');
|
||||
el.name = html.replace(/\s/g, '_');
|
||||
containerEl.appendChild(el);
|
||||
}
|
||||
|
||||
function makeChart(opt) {
|
||||
var containerEl = document.getElementById('main');
|
||||
var el = document.createElement('div');
|
||||
el.className = 'block';
|
||||
el.innerHTML = '<div class="ec"></div><div class="info"></div>';
|
||||
containerEl.appendChild(el);
|
||||
|
||||
var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
|
||||
chart.setOption(opt);
|
||||
|
||||
charts.push(chart);
|
||||
els.push(el);
|
||||
|
||||
chart.on('dataZoom', zrUtil.curry(renderProp, chart, el, false));
|
||||
renderProp(chart, el, true);
|
||||
}
|
||||
|
||||
function renderProp(chart, el, isInit) {
|
||||
var resultOpt = chart.getOption();
|
||||
var dataZoomOpt = zrUtil.map(resultOpt.dataZoom, function (rawOpt) {
|
||||
return ''
|
||||
+ '<tr>'
|
||||
+ '<td>name:</td><td>' + encodeHTML(rawOpt.name) + '</td>'
|
||||
+ '<td>start:</td><td>' + encodeHTML(rawOpt.start) + '</td>'
|
||||
+ '<td>end:</td><td>' + encodeHTML(rawOpt.end) + '</td>'
|
||||
+ '<td>startValue:</td><td>' + encodeHTML(rawOpt.startValue) + '</td>'
|
||||
+ '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>'
|
||||
+ '</tr>';
|
||||
});
|
||||
var axisOpt = zrUtil.map(resultOpt.xAxis, function (rawOpt) {
|
||||
return ''
|
||||
+ '<tr>'
|
||||
+ '<td>min:</td><td>' + encodeHTML(rawOpt.min) + '</td>'
|
||||
+ '<td>max:</td><td>' + encodeHTML(rawOpt.max) + '</td>'
|
||||
+ '<td>scale:</td><td>' + encodeHTML(rawOpt.scale) + '</td>'
|
||||
+ '<td>rangeStart:</td><td>' + encodeHTML(rawOpt.rangeStart) + '</td>'
|
||||
+ '<td>rangeEnd:</td><td>' + encodeHTML(rawOpt.rangeEnd) + '</td>'
|
||||
+ '</tr>';
|
||||
});
|
||||
|
||||
el.lastChild.innerHTML = ''
|
||||
+ (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>'
|
||||
+ '<table><tbody>'
|
||||
+ dataZoomOpt.join('')
|
||||
+ axisOpt.join('')
|
||||
+ '</tbody></table>';
|
||||
}
|
||||
|
||||
function encodeHTML(source) {
|
||||
return source == null
|
||||
? ''
|
||||
: String(source)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function random(max) {
|
||||
return (Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
function getOption(data, xAxisType, xAxisData) {
|
||||
return {
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['n1', 'n2']
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {},
|
||||
dataZoom: {show: true},
|
||||
restore: {show: true},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: xAxisType,
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'xSlider',
|
||||
name: 'xSlider',
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 5
|
||||
},
|
||||
{
|
||||
name: 'ySlider',
|
||||
show: true,
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
name: 'xInside',
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 5
|
||||
},
|
||||
{
|
||||
name: 'yInside',
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'n1',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
data: data.data1
|
||||
},
|
||||
{
|
||||
name: 'n2',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
data: data.data2
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function runCode(num) {
|
||||
var id = 'code' + num;
|
||||
var textarea = document.getElementById(id);
|
||||
var chartIndex = +document.getElementById('chartIndex' + num).value;
|
||||
var code = ''
|
||||
+ 'var chart = charts[chartIndex];'
|
||||
+ textarea.value
|
||||
+ ';renderProp(chart, els[chartIndex], true);';
|
||||
(new Function('charts', 'chartIndex', code))(charts, chartIndex);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
if (Math.random() < 0.03) {
|
||||
data1.push('-');
|
||||
data2.push('-');
|
||||
data3.push('-');
|
||||
}
|
||||
else {
|
||||
data1.push((Math.random() + 0.1).toFixed(2));
|
||||
data2.push(Math.random().toFixed(2));
|
||||
data3.push(Math.random().toFixed(2));
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['bar', 'bar2', 'bar3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
yAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: false
|
||||
},
|
||||
xAxis: {
|
||||
// inverse: true,
|
||||
// scale: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
data: data2,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
data: data3,
|
||||
smooth: 0.1
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: data1,
|
||||
smooth: true,
|
||||
stack: 'all',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [{
|
||||
type: 'max'
|
||||
}]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
[{
|
||||
type: 'average'
|
||||
}, {
|
||||
type: 'max'
|
||||
}]
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: {
|
||||
show: true,
|
||||
end: 30,
|
||||
borderColor: 'rgba(0,0,0,0.15)',
|
||||
backgroundColor: 'rgba(200,200,200,0)',
|
||||
yAxisIndex: 0
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 20; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(Math.random() * 2);
|
||||
data2.push(Math.random() * 2);
|
||||
data3.push(Math.random() * 2);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['bar', 'bar2', 'bar3']
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: true
|
||||
},
|
||||
yAxis: {
|
||||
// scale: true
|
||||
boundaryGap: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
data: data3
|
||||
}
|
||||
],
|
||||
dataZoom: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
yAxisIndex: [0]
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1dim = [];
|
||||
var data2dim = [];
|
||||
|
||||
var offset = 50;
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
if (i < 150) {
|
||||
var v = Math.log(i + 4) + offset;
|
||||
data1dim.push(v);
|
||||
// data2dim.push([i, v]);
|
||||
data2dim.push([v, i]);
|
||||
}
|
||||
else {
|
||||
var v = -Math.log(i + 19) + offset;
|
||||
data1dim.push(v);
|
||||
// data2dim.push([i, v]);
|
||||
data2dim.push([v, i]);
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
// position: 'top',
|
||||
type: 'value',
|
||||
// data: xAxisData,
|
||||
// boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
// inverse: true
|
||||
data: xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'none',
|
||||
data: data1dim,
|
||||
// data: data2dim,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
start: 60
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical'
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1dim = [];
|
||||
var data2dim = [];
|
||||
|
||||
var offset = 50;
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
if (i < 150) {
|
||||
var v = Math.log(i + 4) + offset;
|
||||
data1dim.push(v);
|
||||
data2dim.push([i, v]);
|
||||
// data2dim.push([v, i]);
|
||||
}
|
||||
else {
|
||||
var v = -Math.log(i + 19) + offset;
|
||||
data1dim.push(v);
|
||||
data2dim.push([i, v]);
|
||||
// data2dim.push([v, i]);
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
// position: 'top',
|
||||
// type: 'value',
|
||||
data: xAxisData,
|
||||
// boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
// type: 'value',
|
||||
// inverse: true
|
||||
// data: xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'none',
|
||||
data: data1dim,
|
||||
// data: data2dim,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
start: 60
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical'
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1dim = [];
|
||||
|
||||
for (var i = 0; i < 2000; i++) {
|
||||
data1dim.push([i * Math.cos(i / 100), i * Math.sin(i / 100)]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
// position: 'top',
|
||||
type: 'value',
|
||||
// data: xAxisData,
|
||||
// boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// inverse: true
|
||||
// data: xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'none',
|
||||
data: data1dim
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// areaStyle: {}
|
||||
// }
|
||||
// }
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
start: 60,
|
||||
filterMode: 'empty'
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
filterMode: 'empty'
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1dim = [];
|
||||
var data2dim = [];
|
||||
|
||||
var offset = 50;
|
||||
|
||||
for (var i = 0; i < 200; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
if (i < 150) {
|
||||
var v = Math.log(i + 4) + offset;
|
||||
data1dim.push(v);
|
||||
// data2dim.push([i, v]);
|
||||
data2dim.push([v, i]);
|
||||
}
|
||||
else {
|
||||
var v = -Math.log(i + 19) + offset;
|
||||
data1dim.push(v);
|
||||
// data2dim.push([i, v]);
|
||||
data2dim.push([v, i]);
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
// position: 'top',
|
||||
type: 'value',
|
||||
// data: xAxisData,
|
||||
// boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// inverse: true
|
||||
// data: xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'none',
|
||||
// data: data1dim,
|
||||
data: data2dim,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
start: 60
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical'
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
var echarts;
|
||||
var chart;
|
||||
var myChart;
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/markLine'
|
||||
], function (ec) {
|
||||
|
||||
echarts = ec;
|
||||
|
||||
chart = myChart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
var app = {};
|
||||
|
||||
option = {
|
||||
title : {
|
||||
text: '动态数据',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['最新成交价']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
dataView : {show: true, readOnly: false},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
dataZoom : [{
|
||||
type: 'inside',
|
||||
start : 0,
|
||||
end : 100
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
start : 0,
|
||||
end : 100
|
||||
}
|
||||
],
|
||||
xAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale: true,
|
||||
name : '预购量',
|
||||
max: 1200,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2]
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'最新成交价',
|
||||
type:'line',
|
||||
data:(function (){
|
||||
var res = [];
|
||||
var len = 0;
|
||||
while (len < 10) {
|
||||
var n = [
|
||||
len,
|
||||
(Math.random()*10 + 5).toFixed(1)
|
||||
];
|
||||
res.push({name: n[0], value: n});
|
||||
len++;
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
animation: true,
|
||||
animationDurationUpdate: 500,
|
||||
animationEasing: 'linear',
|
||||
animationEasingUpdate: 'linear'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
clearInterval(app.timeTicket);
|
||||
app.count = 11;
|
||||
app.timeTicket = setInterval(function (){
|
||||
|
||||
var data0 = option.series[0].data;
|
||||
data0.shift();
|
||||
var lastData = data0[data0.length - 1].value;
|
||||
var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];
|
||||
|
||||
data0.push({name: x[0], value: x});
|
||||
|
||||
myChart.setOption({series: option.series});
|
||||
}, 2100);
|
||||
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+311
@@ -0,0 +1,311 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 90%;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#main2 {
|
||||
width: 75%;
|
||||
}
|
||||
#main3 {
|
||||
width: 50%;
|
||||
}
|
||||
#middle {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: #d4e8f1;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<div id="middle">
|
||||
上面是降水量，下面是流量。这是两个echarts实例。
|
||||
</div>
|
||||
<div id="main2"></div>
|
||||
<div id="main3"></div>
|
||||
|
||||
<script>
|
||||
|
||||
require([
|
||||
'data/rainfall.json',
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoomInside'
|
||||
], function (data, echarts) {
|
||||
var chart1 = createChart1(data, echarts);
|
||||
var chart2 = createChart2(data, echarts);
|
||||
var chart3 = createChart3(data, echarts);
|
||||
|
||||
echarts.connect([chart1, chart2, chart3]);
|
||||
|
||||
// chart1.on('dataZoom', function (payload) {
|
||||
// chart2.dispatchAction({
|
||||
// type: 'dataZoom',
|
||||
// dataZoomIndex: 0,
|
||||
// range: payload.range
|
||||
// }, true);
|
||||
// });
|
||||
|
||||
// chart2.on('dataZoom', function (payload) {
|
||||
// chart1.dispatchAction({
|
||||
// type: 'dataZoom',
|
||||
// dataZoomIndex: 0,
|
||||
// range: payload.range
|
||||
// }, true);
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
|
||||
function createChart1(data, echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['降水量']
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
// data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
// splitLine: {show: false},
|
||||
axisLabel: {show: true},
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
// onZero: false
|
||||
},
|
||||
data: data.category
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '降水量',
|
||||
type: 'line',
|
||||
data: data.rainfall,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 30,
|
||||
end: 40
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
function createChart2(data, echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main2'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['流量']
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {show: true},
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
data: data.category
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
position: 'right',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量',
|
||||
type: 'line',
|
||||
data: data.flow,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 30,
|
||||
end: 40
|
||||
}
|
||||
]
|
||||
});
|
||||
return chart;
|
||||
}
|
||||
|
||||
function createChart3(data, echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main3'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['流量']
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {show: true},
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
data: data.category
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
position: 'right',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量',
|
||||
type: 'line',
|
||||
data: data.flow,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 30,
|
||||
end: 40
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<script src="./lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'data/rainfall.json',
|
||||
'echarts',
|
||||
'zrender/vml/vml',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoomInside'
|
||||
], function (data, echarts) {
|
||||
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.showLoading({
|
||||
text : '正在读取数据中...'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 20; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(Math.random() * 2);
|
||||
data2.push(Math.random() * 2);
|
||||
data3.push(Math.random() * 2);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['降水量', '流量']
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
right: '15%',
|
||||
bottom: '53%'
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
right: '15%',
|
||||
top: '53%'
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
// data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
// splitLine: {show: false},
|
||||
axisLabel: {show: true},
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
// onZero: false
|
||||
},
|
||||
data: data.category,
|
||||
gridIndex: 0
|
||||
},
|
||||
{
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
// data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {show: true},
|
||||
splitLine: {show: false},
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
data: data.category,
|
||||
gridIndex: 1
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
gridIndex: 0
|
||||
},
|
||||
{
|
||||
boundaryGap: false,
|
||||
position: 'right',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
gridIndex: 1
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '降水量',
|
||||
type: 'line',
|
||||
data: data.rainfall,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
},
|
||||
{
|
||||
name: '流量',
|
||||
type: 'line',
|
||||
data: data.flow,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 1],
|
||||
start: 30,
|
||||
end: 40
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.hideLoading();
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'data/rainfall.json',
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/axis',
|
||||
'echarts/component/dataZoom'
|
||||
], function (data, echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 20; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(Math.random() * 2);
|
||||
data2.push(Math.random() * 2);
|
||||
data3.push(Math.random() * 2);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['降水量', '流量']
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
right: '15%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
// data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
// splitLine: {show: false},
|
||||
axisLabel: {show: true},
|
||||
axisLine: {show: true},
|
||||
data: data.category
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
// scale: true
|
||||
boundaryGap: false,
|
||||
splitLine: {show: false},
|
||||
axisLabel: {
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// scale: true
|
||||
boundaryGap: false,
|
||||
splitLine: {show: false},
|
||||
position: 'right',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '降水量',
|
||||
type: 'line',
|
||||
data: data.rainfall,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '流量',
|
||||
type: 'line',
|
||||
data: data.flow,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name: 'bar3',
|
||||
// type: 'line',
|
||||
// data: data3
|
||||
// }
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
filterMode: 'empty',
|
||||
yAxisIndex: [0],
|
||||
left: 10
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
// realtime: false,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
filterMode: 'empty',
|
||||
yAxisIndex: [1]
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var xAxisData = [];
|
||||
var yAxisData = [];
|
||||
|
||||
var random = function (max) {
|
||||
return (Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
for (var i = 0; i <= 10; i++) {
|
||||
xAxisData.push(i + '');
|
||||
}
|
||||
|
||||
for (var i = 0; i <= 30; i++) {
|
||||
yAxisData.push(i + '');
|
||||
}
|
||||
|
||||
for (var i = 0; i < 30; i++) {
|
||||
data1.push([
|
||||
Math.round(random(10)),
|
||||
Math.round(random(30))//,
|
||||
// Math.round(random(100))
|
||||
]);
|
||||
data2.push([
|
||||
Math.round(random(10)),
|
||||
Math.round(random(30))//,
|
||||
// Math.round(random(100))
|
||||
]);
|
||||
data3.push([
|
||||
Math.round(random(10)),
|
||||
Math.round(random(30))//,
|
||||
// Math.round(random(100))
|
||||
]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
dataView: {},
|
||||
dataZoom: {
|
||||
show: true
|
||||
// yAxisIndex: false
|
||||
},
|
||||
restore: {show: true},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
// If set to 'filter', y axis will be effected by x dataZoom
|
||||
filterMode: 'empty',
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
yAxisIndex: [0],
|
||||
filterMode: 'empty',
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
filterMode: 'empty',
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
filterMode: 'empty',
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
data: yAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[0] * 4;
|
||||
},
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[0] * 4;
|
||||
},
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
name: 'scatter3',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[0] * 4;
|
||||
},
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
});
|
||||
// console.profileEnd('setOption');
|
||||
})
|
||||
|
||||
window.onresize = function () {
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<!-- // <script src="js/memory-stats.js"></script> -->
|
||||
<!-- // <script src="js/memory.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data1.push([Math.random() * 5, Math.random() * 360]);
|
||||
data2.push([Math.random() * 5, Math.random() * 360]);
|
||||
data3.push([Math.random() * 10, Math.random() * 360]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
polar: {
|
||||
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
radiusAxis: {
|
||||
axisAngle: 0
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
angleAxisIndex: [0]
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
orient: 'horizontal',
|
||||
radiusAxisIndex: [0]
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
// FIXME
|
||||
// 现在必须得设置这个，能不能polar和catesian一样，要不然很多特殊处理。
|
||||
angleAxisIndex: 0,
|
||||
radiusAxisIndex: 0,
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data1
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
angleAxisIndex: 0,
|
||||
radiusAxisIndex: 0,
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data2
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
angleAxisIndex: 0,
|
||||
radiusAxisIndex: 0,
|
||||
name: 'scatter3',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data3
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
var random = function (max) {
|
||||
return (Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
for (var i = 0; i < 100000; i++) {
|
||||
data1.push([random(15), random(10), random(1)]);
|
||||
// data1.push([i, 10, i]);
|
||||
data2.push([random(10), random(10), random(1)]);
|
||||
data3.push([random(15), random(10), random(1)]);
|
||||
}
|
||||
|
||||
// console.profile('setOption');
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 5
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
yAxisIndex: [0],
|
||||
start: 29,
|
||||
end: 36
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 5
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 29,
|
||||
end: 36
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
name: 'scatter3',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
});
|
||||
// console.profileEnd('setOption');
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script src="js/memory-stats.js"></script>
|
||||
<script src="js/memory.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
var random = function (max) {
|
||||
return (Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data1.push([random(15), random(10), random(1)]);
|
||||
// data1.push([i, 10, i]);
|
||||
data2.push([random(10), random(10), random(1)]);
|
||||
data3.push([random(15), random(10), random(1)]);
|
||||
}
|
||||
|
||||
// console.profile('setOption');
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
dataView: {},
|
||||
dataZoom: {show: true},
|
||||
restore: {show: true},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 10,
|
||||
end: 70
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 10,
|
||||
end: 70
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
name: 'scatter3',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
});
|
||||
// console.profileEnd('setOption');
|
||||
})
|
||||
|
||||
window.onresize = function () {
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<!-- // <script src="js/memory-stats.js"></script> -->
|
||||
<!-- // <script src="js/memory.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
+351
@@ -0,0 +1,351 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<link ref="stylesheet" href="reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.split {
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
background: #ddd;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
.main {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
|
||||
<div class="split">Check toolbox dataZoom normal</div>
|
||||
<div id="main1" class="main"></div>
|
||||
<div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
|
||||
<div id="main2" class="main"></div>
|
||||
<div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
|
||||
<div id="main3" class="main"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoomInside',
|
||||
'echarts/component/toolbox'
|
||||
], function (echarts) {
|
||||
|
||||
var main = document.getElementById('main1');
|
||||
if (!main) {
|
||||
return;
|
||||
}
|
||||
var chart = echarts.init(main);
|
||||
|
||||
chart.setOption({
|
||||
"title": {
|
||||
"text": ""
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"PV维度订阅转化率"
|
||||
]
|
||||
},
|
||||
"toolbox": {
|
||||
"show": true,
|
||||
"feature": {
|
||||
"dataZoom": {},
|
||||
"dataView": {
|
||||
"readOnly": true
|
||||
},
|
||||
"restore": {},
|
||||
"saveAsImage": {}
|
||||
}
|
||||
},
|
||||
"calculable": true,
|
||||
"xAxis": [
|
||||
{
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": [
|
||||
"20160401",
|
||||
"20160402",
|
||||
"20160403",
|
||||
"20160404",
|
||||
"20160405",
|
||||
"20160406",
|
||||
"20160407",
|
||||
"20160408",
|
||||
"20160409",
|
||||
"20160410"
|
||||
]
|
||||
}
|
||||
],
|
||||
"yAxis": [
|
||||
{
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"formatter": "{value}%"
|
||||
}
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"type": "line",
|
||||
"name": "PV维度订阅转化率",
|
||||
"data": [
|
||||
46.646153846153844,
|
||||
48.75454799888049,
|
||||
49.122247047558254,
|
||||
47.80918727915194,
|
||||
50.140845070422536,
|
||||
51.89201877934272,
|
||||
52.307692307692314,
|
||||
48.93327280980481,
|
||||
46.012832263978005,
|
||||
42.89077212806026
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
var main = document.getElementById('main2');
|
||||
if (!main) {
|
||||
return;
|
||||
}
|
||||
var chart = echarts.init(main);
|
||||
|
||||
var option = {
|
||||
"title": {
|
||||
"text": "1个月数据",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"dataZoom": [
|
||||
{
|
||||
"show": true,
|
||||
"yAxisIndex": 0,
|
||||
"filterMode": "empty",
|
||||
"width": 12,
|
||||
"handleSize": 8,
|
||||
labelPrecision: 7,
|
||||
"showDataShadow": false,
|
||||
"right": 42
|
||||
}
|
||||
],
|
||||
"legend": [
|
||||
{
|
||||
"data": [
|
||||
"重量"
|
||||
],
|
||||
"top": 36,
|
||||
"left": "center"
|
||||
}
|
||||
],
|
||||
"grid": [
|
||||
{
|
||||
"left": 80,
|
||||
"top": 90,
|
||||
"right": 58,
|
||||
"height": 350
|
||||
}
|
||||
],
|
||||
"xAxis": [
|
||||
{
|
||||
"boundaryGap": false,
|
||||
"data": [
|
||||
"2016-02-17",
|
||||
"2016-02-18",
|
||||
"2016-02-19",
|
||||
"2016-02-20",
|
||||
"2016-02-21",
|
||||
"2016-02-22",
|
||||
"2016-02-23",
|
||||
"2016-02-24",
|
||||
"2016-02-25",
|
||||
"2016-02-26",
|
||||
"2016-02-27",
|
||||
"2016-02-28",
|
||||
"2016-02-29",
|
||||
"2016-03-01",
|
||||
"2016-03-02",
|
||||
"2016-03-03",
|
||||
"2016-03-04"
|
||||
]
|
||||
}
|
||||
],
|
||||
"yAxis": [
|
||||
{
|
||||
"name": "重量(g)"
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"type": "line",
|
||||
"data": [
|
||||
"241.68",
|
||||
"12703.10",
|
||||
"17724.90",
|
||||
"17722.60",
|
||||
"12326.70",
|
||||
"12703.10",
|
||||
"17724.90",
|
||||
// "17755.13984",
|
||||
"17722.60",
|
||||
"12326.70",
|
||||
"-290.01",
|
||||
"-12736.80",
|
||||
"-12361.40",
|
||||
"-0.00",
|
||||
"-290.01",
|
||||
"-12736.80",
|
||||
"-8525.49",
|
||||
"-15918.30"
|
||||
],
|
||||
"name": "重量"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
var main = document.getElementById('main3');
|
||||
if (!main) {
|
||||
return;
|
||||
}
|
||||
var chart = echarts.init(main);
|
||||
|
||||
option = {
|
||||
"title": {
|
||||
"text": "1个月温度",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"dataZoom": [
|
||||
{
|
||||
"show": true,
|
||||
"yAxisIndex": 0,
|
||||
//endValue:83.57,
|
||||
"filterMode": "empty",
|
||||
labelPrecision: 4,
|
||||
"showDataShadow": false
|
||||
}
|
||||
],
|
||||
"legend": [
|
||||
{
|
||||
"data": [
|
||||
"温度"
|
||||
],
|
||||
"top": 31,
|
||||
"left": "center"
|
||||
}
|
||||
],
|
||||
"grid": {},
|
||||
"xAxis": [
|
||||
{
|
||||
"data": [
|
||||
"2015-12-08",
|
||||
"2015-12-09",
|
||||
"2015-12-10",
|
||||
"2015-12-11",
|
||||
"2015-12-12"
|
||||
]
|
||||
}
|
||||
],
|
||||
"yAxis": [
|
||||
{
|
||||
"name": "温度(℃)"
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"type": "line",
|
||||
"data": [
|
||||
"83.56",
|
||||
"83.39",
|
||||
"55.10",
|
||||
"-5.47",
|
||||
"-62.83"
|
||||
],
|
||||
"name": "温度"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+98
@@ -0,0 +1,98 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/title',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
dataZoom: {show: true},
|
||||
restore: {show: true}
|
||||
}
|
||||
},
|
||||
animationDurationUpdate: 4000,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['a', 'b', 'c', 'd']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type:'line',
|
||||
data: [
|
||||
200, 100, 500, 300
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
// setTimeout(function () {
|
||||
// chart.setOption({
|
||||
// xAxis: {
|
||||
// data: ['b', 'c', 'd', 'e']
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// data: [
|
||||
// 100, 500, 300, 900
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
// }, 3000);
|
||||
|
||||
setTimeout(function () {
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: ['a', 'd', 'c', 'b']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
200, 300, 500, 100
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 3000);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid'
|
||||
], function (echarts) {
|
||||
|
||||
function randomData() {
|
||||
return (Math.random() + 3).toFixed(3);
|
||||
}
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var count = 0;
|
||||
for (; count < 500; count++) {
|
||||
xAxisData.push('类目' + count);
|
||||
data1.push(randomData());
|
||||
// data2.push(-randomData());
|
||||
}
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
borderColor: 'white',
|
||||
borderWidth: 3,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
lineStyle: {
|
||||
width: 2
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
areaStyle: {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
// animation: false,
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
interval: 40
|
||||
},
|
||||
data: xAxisData,
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitLine: {
|
||||
// show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: itemStyle
|
||||
}]
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData.shift();
|
||||
xAxisData.push('类目' + count);
|
||||
data1.shift();
|
||||
data1.push(randomData());
|
||||
count++;
|
||||
}
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
data: data1
|
||||
}]
|
||||
});
|
||||
}, 500);
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+537
@@ -0,0 +1,537 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<script src='esl.js'></script>
|
||||
<script src='config.js'></script>
|
||||
<script src='lib/jquery.min.js'></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id='main'></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'echarts/chart/scatter',
|
||||
'echarts/chart/effectScatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo'
|
||||
], function (echarts) {
|
||||
|
||||
var data = [
|
||||
{name: '海门', value: 9},
|
||||
{name: '鄂尔多斯', value: 12},
|
||||
{name: '招远', value: 12},
|
||||
{name: '舟山', value: 12},
|
||||
{name: '齐齐哈尔', value: 14},
|
||||
{name: '盐城', value: 15},
|
||||
{name: '赤峰', value: 16},
|
||||
{name: '青岛', value: 18},
|
||||
{name: '乳山', value: 18},
|
||||
{name: '金昌', value: 19},
|
||||
{name: '泉州', value: 21},
|
||||
{name: '莱西', value: 21},
|
||||
{name: '日照', value: 21},
|
||||
{name: '胶南', value: 22},
|
||||
{name: '南通', value: 23},
|
||||
{name: '拉萨', value: 24},
|
||||
{name: '云浮', value: 24},
|
||||
{name: '梅州', value: 25},
|
||||
{name: '文登', value: 25},
|
||||
{name: '上海', value: 25},
|
||||
{name: '攀枝花', value: 25},
|
||||
{name: '威海', value: 25},
|
||||
{name: '承德', value: 25},
|
||||
{name: '厦门', value: 26},
|
||||
{name: '汕尾', value: 26},
|
||||
{name: '潮州', value: 26},
|
||||
{name: '丹东', value: 27},
|
||||
{name: '太仓', value: 27},
|
||||
{name: '曲靖', value: 27},
|
||||
{name: '烟台', value: 28},
|
||||
{name: '福州', value: 29},
|
||||
{name: '瓦房店', value: 30},
|
||||
{name: '即墨', value: 30},
|
||||
{name: '抚顺', value: 31},
|
||||
{name: '玉溪', value: 31},
|
||||
{name: '张家口', value: 31},
|
||||
{name: '阳泉', value: 31},
|
||||
{name: '莱州', value: 32},
|
||||
{name: '湖州', value: 32},
|
||||
{name: '汕头', value: 32},
|
||||
{name: '昆山', value: 33},
|
||||
{name: '宁波', value: 33},
|
||||
{name: '湛江', value: 33},
|
||||
{name: '揭阳', value: 34},
|
||||
{name: '荣成', value: 34},
|
||||
{name: '连云港', value: 35},
|
||||
{name: '葫芦岛', value: 35},
|
||||
{name: '常熟', value: 36},
|
||||
{name: '东莞', value: 36},
|
||||
{name: '河源', value: 36},
|
||||
{name: '淮安', value: 36},
|
||||
{name: '泰州', value: 36},
|
||||
{name: '南宁', value: 37},
|
||||
{name: '营口', value: 37},
|
||||
{name: '惠州', value: 37},
|
||||
{name: '江阴', value: 37},
|
||||
{name: '蓬莱', value: 37},
|
||||
{name: '韶关', value: 38},
|
||||
{name: '嘉峪关', value: 38},
|
||||
{name: '广州', value: 38},
|
||||
{name: '延安', value: 38},
|
||||
{name: '太原', value: 39},
|
||||
{name: '清远', value: 39},
|
||||
{name: '中山', value: 39},
|
||||
{name: '昆明', value: 39},
|
||||
{name: '寿光', value: 40},
|
||||
{name: '盘锦', value: 40},
|
||||
{name: '长治', value: 41},
|
||||
{name: '深圳', value: 41},
|
||||
{name: '珠海', value: 42},
|
||||
{name: '宿迁', value: 43},
|
||||
{name: '咸阳', value: 43},
|
||||
{name: '铜川', value: 44},
|
||||
{name: '平度', value: 44},
|
||||
{name: '佛山', value: 44},
|
||||
{name: '海口', value: 44},
|
||||
{name: '江门', value: 45},
|
||||
{name: '章丘', value: 45},
|
||||
{name: '肇庆', value: 46},
|
||||
{name: '大连', value: 47},
|
||||
{name: '临汾', value: 47},
|
||||
{name: '吴江', value: 47},
|
||||
{name: '石嘴山', value: 49},
|
||||
{name: '沈阳', value: 50},
|
||||
{name: '苏州', value: 50},
|
||||
{name: '茂名', value: 50},
|
||||
{name: '嘉兴', value: 51},
|
||||
{name: '长春', value: 51},
|
||||
{name: '胶州', value: 52},
|
||||
{name: '银川', value: 52},
|
||||
{name: '张家港', value: 52},
|
||||
{name: '三门峡', value: 53},
|
||||
{name: '锦州', value: 54},
|
||||
{name: '南昌', value: 54},
|
||||
{name: '柳州', value: 54},
|
||||
{name: '三亚', value: 54},
|
||||
{name: '自贡', value: 56},
|
||||
{name: '吉林', value: 56},
|
||||
{name: '阳江', value: 57},
|
||||
{name: '泸州', value: 57},
|
||||
{name: '西宁', value: 57},
|
||||
{name: '宜宾', value: 58},
|
||||
{name: '呼和浩特', value: 58},
|
||||
{name: '成都', value: 58},
|
||||
{name: '大同', value: 58},
|
||||
{name: '镇江', value: 59},
|
||||
{name: '桂林', value: 59},
|
||||
{name: '张家界', value: 59},
|
||||
{name: '宜兴', value: 59},
|
||||
{name: '北海', value: 60},
|
||||
{name: '西安', value: 61},
|
||||
{name: '金坛', value: 62},
|
||||
{name: '东营', value: 62},
|
||||
{name: '牡丹江', value: 63},
|
||||
{name: '遵义', value: 63},
|
||||
{name: '绍兴', value: 63},
|
||||
{name: '扬州', value: 64},
|
||||
{name: '常州', value: 64},
|
||||
{name: '潍坊', value: 65},
|
||||
{name: '重庆', value: 66},
|
||||
{name: '台州', value: 67},
|
||||
{name: '南京', value: 67},
|
||||
{name: '滨州', value: 70},
|
||||
{name: '贵阳', value: 71},
|
||||
{name: '无锡', value: 71},
|
||||
{name: '本溪', value: 71},
|
||||
{name: '克拉玛依', value: 72},
|
||||
{name: '渭南', value: 72},
|
||||
{name: '马鞍山', value: 72},
|
||||
{name: '宝鸡', value: 72},
|
||||
{name: '焦作', value: 75},
|
||||
{name: '句容', value: 75},
|
||||
{name: '北京', value: 79},
|
||||
{name: '徐州', value: 79},
|
||||
{name: '衡水', value: 80},
|
||||
{name: '包头', value: 80},
|
||||
{name: '绵阳', value: 80},
|
||||
{name: '乌鲁木齐', value: 84},
|
||||
{name: '枣庄', value: 84},
|
||||
{name: '杭州', value: 84},
|
||||
{name: '淄博', value: 85},
|
||||
{name: '鞍山', value: 86},
|
||||
{name: '溧阳', value: 86},
|
||||
{name: '库尔勒', value: 86},
|
||||
{name: '安阳', value: 90},
|
||||
{name: '开封', value: 90},
|
||||
{name: '济南', value: 92},
|
||||
{name: '德阳', value: 93},
|
||||
{name: '温州', value: 95},
|
||||
{name: '九江', value: 96},
|
||||
{name: '邯郸', value: 98},
|
||||
{name: '临安', value: 99},
|
||||
{name: '兰州', value: 99},
|
||||
{name: '沧州', value: 100},
|
||||
{name: '临沂', value: 103},
|
||||
{name: '南充', value: 104},
|
||||
{name: '天津', value: 105},
|
||||
{name: '富阳', value: 106},
|
||||
{name: '泰安', value: 112},
|
||||
{name: '诸暨', value: 112},
|
||||
{name: '郑州', value: 113},
|
||||
{name: '哈尔滨', value: 114},
|
||||
{name: '聊城', value: 116},
|
||||
{name: '芜湖', value: 117},
|
||||
{name: '唐山', value: 119},
|
||||
{name: '平顶山', value: 119},
|
||||
{name: '邢台', value: 119},
|
||||
{name: '德州', value: 120},
|
||||
{name: '济宁', value: 120},
|
||||
{name: '荆州', value: 127},
|
||||
{name: '宜昌', value: 130},
|
||||
{name: '义乌', value: 132},
|
||||
{name: '丽水', value: 133},
|
||||
{name: '洛阳', value: 134},
|
||||
{name: '秦皇岛', value: 136},
|
||||
{name: '株洲', value: 143},
|
||||
{name: '石家庄', value: 147},
|
||||
{name: '莱芜', value: 148},
|
||||
{name: '常德', value: 152},
|
||||
{name: '保定', value: 153},
|
||||
{name: '湘潭', value: 154},
|
||||
{name: '金华', value: 157},
|
||||
{name: '岳阳', value: 169},
|
||||
{name: '长沙', value: 175},
|
||||
{name: '衢州', value: 177},
|
||||
{name: '廊坊', value: 193},
|
||||
{name: '菏泽', value: 194},
|
||||
{name: '合肥', value: 229},
|
||||
{name: '武汉', value: 273},
|
||||
{name: '大庆', value: 279}
|
||||
];
|
||||
|
||||
$.get('../map/json/china.json', function (chinaJson) {
|
||||
echarts.registerMap('china', chinaJson);
|
||||
var geoCoordMap = {
|
||||
'海门':[121.15,31.89],
|
||||
'鄂尔多斯':[109.781327,39.608266],
|
||||
'招远':[120.38,37.35],
|
||||
'舟山':[122.207216,29.985295],
|
||||
'齐齐哈尔':[123.97,47.33],
|
||||
'盐城':[120.13,33.38],
|
||||
'赤峰':[118.87,42.28],
|
||||
'青岛':[120.33,36.07],
|
||||
'乳山':[121.52,36.89],
|
||||
'金昌':[102.188043,38.520089],
|
||||
'泉州':[118.58,24.93],
|
||||
'莱西':[120.53,36.86],
|
||||
'日照':[119.46,35.42],
|
||||
'胶南':[119.97,35.88],
|
||||
'南通':[121.05,32.08],
|
||||
'拉萨':[91.11,29.97],
|
||||
'云浮':[112.02,22.93],
|
||||
'梅州':[116.1,24.55],
|
||||
'文登':[122.05,37.2],
|
||||
'上海':[121.48,31.22],
|
||||
'攀枝花':[101.718637,26.582347],
|
||||
'威海':[122.1,37.5],
|
||||
'承德':[117.93,40.97],
|
||||
'厦门':[118.1,24.46],
|
||||
'汕尾':[115.375279,22.786211],
|
||||
'潮州':[116.63,23.68],
|
||||
'丹东':[124.37,40.13],
|
||||
'太仓':[121.1,31.45],
|
||||
'曲靖':[103.79,25.51],
|
||||
'烟台':[121.39,37.52],
|
||||
'福州':[119.3,26.08],
|
||||
'瓦房店':[121.979603,39.627114],
|
||||
'即墨':[120.45,36.38],
|
||||
'抚顺':[123.97,41.97],
|
||||
'玉溪':[102.52,24.35],
|
||||
'张家口':[114.87,40.82],
|
||||
'阳泉':[113.57,37.85],
|
||||
'莱州':[119.942327,37.177017],
|
||||
'湖州':[120.1,30.86],
|
||||
'汕头':[116.69,23.39],
|
||||
'昆山':[120.95,31.39],
|
||||
'宁波':[121.56,29.86],
|
||||
'湛江':[110.359377,21.270708],
|
||||
'揭阳':[116.35,23.55],
|
||||
'荣成':[122.41,37.16],
|
||||
'连云港':[119.16,34.59],
|
||||
'葫芦岛':[120.836932,40.711052],
|
||||
'常熟':[120.74,31.64],
|
||||
'东莞':[113.75,23.04],
|
||||
'河源':[114.68,23.73],
|
||||
'淮安':[119.15,33.5],
|
||||
'泰州':[119.9,32.49],
|
||||
'南宁':[108.33,22.84],
|
||||
'营口':[122.18,40.65],
|
||||
'惠州':[114.4,23.09],
|
||||
'江阴':[120.26,31.91],
|
||||
'蓬莱':[120.75,37.8],
|
||||
'韶关':[113.62,24.84],
|
||||
'嘉峪关':[98.289152,39.77313],
|
||||
'广州':[113.23,23.16],
|
||||
'延安':[109.47,36.6],
|
||||
'太原':[112.53,37.87],
|
||||
'清远':[113.01,23.7],
|
||||
'中山':[113.38,22.52],
|
||||
'昆明':[102.73,25.04],
|
||||
'寿光':[118.73,36.86],
|
||||
'盘锦':[122.070714,41.119997],
|
||||
'长治':[113.08,36.18],
|
||||
'深圳':[114.07,22.62],
|
||||
'珠海':[113.52,22.3],
|
||||
'宿迁':[118.3,33.96],
|
||||
'咸阳':[108.72,34.36],
|
||||
'铜川':[109.11,35.09],
|
||||
'平度':[119.97,36.77],
|
||||
'佛山':[113.11,23.05],
|
||||
'海口':[110.35,20.02],
|
||||
'江门':[113.06,22.61],
|
||||
'章丘':[117.53,36.72],
|
||||
'肇庆':[112.44,23.05],
|
||||
'大连':[121.62,38.92],
|
||||
'临汾':[111.5,36.08],
|
||||
'吴江':[120.63,31.16],
|
||||
'石嘴山':[106.39,39.04],
|
||||
'沈阳':[123.38,41.8],
|
||||
'苏州':[120.62,31.32],
|
||||
'茂名':[110.88,21.68],
|
||||
'嘉兴':[120.76,30.77],
|
||||
'长春':[125.35,43.88],
|
||||
'胶州':[120.03336,36.264622],
|
||||
'银川':[106.27,38.47],
|
||||
'张家港':[120.555821,31.875428],
|
||||
'三门峡':[111.19,34.76],
|
||||
'锦州':[121.15,41.13],
|
||||
'南昌':[115.89,28.68],
|
||||
'柳州':[109.4,24.33],
|
||||
'三亚':[109.511909,18.252847],
|
||||
'自贡':[104.778442,29.33903],
|
||||
'吉林':[126.57,43.87],
|
||||
'阳江':[111.95,21.85],
|
||||
'泸州':[105.39,28.91],
|
||||
'西宁':[101.74,36.56],
|
||||
'宜宾':[104.56,29.77],
|
||||
'呼和浩特':[111.65,40.82],
|
||||
'成都':[104.06,30.67],
|
||||
'大同':[113.3,40.12],
|
||||
'镇江':[119.44,32.2],
|
||||
'桂林':[110.28,25.29],
|
||||
'张家界':[110.479191,29.117096],
|
||||
'宜兴':[119.82,31.36],
|
||||
'北海':[109.12,21.49],
|
||||
'西安':[108.95,34.27],
|
||||
'金坛':[119.56,31.74],
|
||||
'东营':[118.49,37.46],
|
||||
'牡丹江':[129.58,44.6],
|
||||
'遵义':[106.9,27.7],
|
||||
'绍兴':[120.58,30.01],
|
||||
'扬州':[119.42,32.39],
|
||||
'常州':[119.95,31.79],
|
||||
'潍坊':[119.1,36.62],
|
||||
'重庆':[106.54,29.59],
|
||||
'台州':[121.420757,28.656386],
|
||||
'南京':[118.78,32.04],
|
||||
'滨州':[118.03,37.36],
|
||||
'贵阳':[106.71,26.57],
|
||||
'无锡':[120.29,31.59],
|
||||
'本溪':[123.73,41.3],
|
||||
'克拉玛依':[84.77,45.59],
|
||||
'渭南':[109.5,34.52],
|
||||
'马鞍山':[118.48,31.56],
|
||||
'宝鸡':[107.15,34.38],
|
||||
'焦作':[113.21,35.24],
|
||||
'句容':[119.16,31.95],
|
||||
'北京':[116.46,39.92],
|
||||
'徐州':[117.2,34.26],
|
||||
'衡水':[115.72,37.72],
|
||||
'包头':[110,40.58],
|
||||
'绵阳':[104.73,31.48],
|
||||
'乌鲁木齐':[87.68,43.77],
|
||||
'枣庄':[117.57,34.86],
|
||||
'杭州':[120.19,30.26],
|
||||
'淄博':[118.05,36.78],
|
||||
'鞍山':[122.85,41.12],
|
||||
'溧阳':[119.48,31.43],
|
||||
'库尔勒':[86.06,41.68],
|
||||
'安阳':[114.35,36.1],
|
||||
'开封':[114.35,34.79],
|
||||
'济南':[117,36.65],
|
||||
'德阳':[104.37,31.13],
|
||||
'温州':[120.65,28.01],
|
||||
'九江':[115.97,29.71],
|
||||
'邯郸':[114.47,36.6],
|
||||
'临安':[119.72,30.23],
|
||||
'兰州':[103.73,36.03],
|
||||
'沧州':[116.83,38.33],
|
||||
'临沂':[118.35,35.05],
|
||||
'南充':[106.110698,30.837793],
|
||||
'天津':[117.2,39.13],
|
||||
'富阳':[119.95,30.07],
|
||||
'泰安':[117.13,36.18],
|
||||
'诸暨':[120.23,29.71],
|
||||
'郑州':[113.65,34.76],
|
||||
'哈尔滨':[126.63,45.75],
|
||||
'聊城':[115.97,36.45],
|
||||
'芜湖':[118.38,31.33],
|
||||
'唐山':[118.02,39.63],
|
||||
'平顶山':[113.29,33.75],
|
||||
'邢台':[114.48,37.05],
|
||||
'德州':[116.29,37.45],
|
||||
'济宁':[116.59,35.38],
|
||||
'荆州':[112.239741,30.335165],
|
||||
'宜昌':[111.3,30.7],
|
||||
'义乌':[120.06,29.32],
|
||||
'丽水':[119.92,28.45],
|
||||
'洛阳':[112.44,34.7],
|
||||
'秦皇岛':[119.57,39.95],
|
||||
'株洲':[113.16,27.83],
|
||||
'石家庄':[114.48,38.03],
|
||||
'莱芜':[117.67,36.19],
|
||||
'常德':[111.69,29.05],
|
||||
'保定':[115.48,38.85],
|
||||
'湘潭':[112.91,27.87],
|
||||
'金华':[119.64,29.12],
|
||||
'岳阳':[113.09,29.37],
|
||||
'长沙':[113,28.21],
|
||||
'衢州':[118.88,28.97],
|
||||
'廊坊':[116.7,39.53],
|
||||
'菏泽':[115.480656,35.23375],
|
||||
'合肥':[117.27,31.86],
|
||||
'武汉':[114.31,30.52],
|
||||
'大庆':[125.03,46.58]
|
||||
};
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
myChart.setOption({
|
||||
backgroundColor: '#404a59',
|
||||
title: {
|
||||
text: '全国主要城市空气质量',
|
||||
subtext: 'data from PM25.in',
|
||||
sublink: 'http://www.pm25.in',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
data:['pm2.5'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ddb926'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data.sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 6)),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'emphasis',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f4e925',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+96
@@ -0,0 +1,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'extension/dataTool/gexf',
|
||||
|
||||
'echarts/chart/graph',
|
||||
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/visualMap'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
function createNodes(count) {
|
||||
var nodes = [];
|
||||
for (var i = 0; i < count; i++) {
|
||||
nodes.push({
|
||||
id: i
|
||||
});
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function createEdges(count) {
|
||||
var edges = [];
|
||||
if (count === 2) {
|
||||
return [[0, 1]];
|
||||
}
|
||||
for (var i = 0; i < count; i++) {
|
||||
edges.push([i, (i + 1) % count]);
|
||||
}
|
||||
return edges;
|
||||
}
|
||||
|
||||
var datas = [];
|
||||
for (var i = 0; i < 16; i++) {
|
||||
datas.push({
|
||||
nodes: createNodes(i + 2),
|
||||
edges: createEdges(i + 2)
|
||||
});
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
series: datas.map(function (item, idx) {
|
||||
return {
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
animation: false,
|
||||
data: item.nodes,
|
||||
left: (idx % 4) * 25 + '%',
|
||||
top: Math.floor(idx / 4) * 25 + '%',
|
||||
width: '25%',
|
||||
height: '25%',
|
||||
force: {
|
||||
// initLayout: 'circular'
|
||||
// gravity: 0
|
||||
repulsion: 100,
|
||||
edgeLength: 5
|
||||
},
|
||||
edges: item.edges.map(function (e) {
|
||||
return {
|
||||
source: e[0],
|
||||
target: e[1]
|
||||
};
|
||||
})
|
||||
};
|
||||
})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+93
@@ -0,0 +1,93 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'extension/dataTool/gexf',
|
||||
|
||||
'echarts/chart/graph',
|
||||
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/visualMap'
|
||||
], function (echarts, gexf) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
$.get('./data/les-miserables.gexf', function (xml) {
|
||||
var graph = gexf.parse(xml);
|
||||
var categories = [];
|
||||
for (var i = 0; i < 9; i++) {
|
||||
categories[i] = {
|
||||
name: '类目' + i
|
||||
};
|
||||
}
|
||||
graph.nodes.forEach(function (node) {
|
||||
node.itemStyle = null;
|
||||
node.symbolSize = 10;
|
||||
node.value = node.symbolSize;
|
||||
node.label = {
|
||||
normal: {
|
||||
show: node.symbolSize > 30
|
||||
}
|
||||
};
|
||||
node.category = node.attributes['modularity_class'];
|
||||
node.x = node.y = null;
|
||||
});
|
||||
chart.setOption({
|
||||
legend: [{
|
||||
// selectedMode: 'single',
|
||||
data: categories.map(function (a) {
|
||||
return a.name;
|
||||
})
|
||||
}],
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series : [
|
||||
{
|
||||
name: 'Les Miserables',
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
data: graph.nodes,
|
||||
links: graph.links,
|
||||
categories: categories,
|
||||
animation: false,
|
||||
roam: true,
|
||||
draggable: true,
|
||||
force: {
|
||||
repulsion: 100
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'right'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+82
@@ -0,0 +1,82 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'extension/dataTool/gexf',
|
||||
|
||||
'echarts/chart/graph',
|
||||
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/visualMap'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data = [];
|
||||
var edges = [];
|
||||
chart.setOption({
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
animation: false,
|
||||
data: data,
|
||||
force: {
|
||||
// initLayout: 'circular'
|
||||
// gravity: 0
|
||||
repulsion: 100,
|
||||
edgeLength: 5
|
||||
},
|
||||
edges: edges
|
||||
}]
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
data.push({
|
||||
id: data.length
|
||||
});
|
||||
var source = Math.round((data.length - 1) * Math.random());
|
||||
var target = Math.round((data.length - 1) * Math.random());
|
||||
if (source !== target) {
|
||||
edges.push({
|
||||
source: source,
|
||||
target: target
|
||||
});
|
||||
}
|
||||
chart.setOption({
|
||||
series: [{
|
||||
roam: true,
|
||||
data: data,
|
||||
edges: edges
|
||||
}]
|
||||
});
|
||||
|
||||
console.log('nodes: ' + data.length);
|
||||
console.log('links: ' + data.length);
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+118
@@ -0,0 +1,118 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/funnel',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/title'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
borderWidth: 0
|
||||
},
|
||||
emphasis: {
|
||||
shadowBlur: 40,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
borderWidth: 2
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
legend: {
|
||||
data : ['展现','点击','访问','咨询','订单']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'漏斗图',
|
||||
type:'funnel',
|
||||
gap: 3,
|
||||
itemStyle: itemStyle,
|
||||
left: 300,
|
||||
right: 300,
|
||||
sort: 'ascending',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:60, name:'访问'},
|
||||
{value:40, name:'咨询'},
|
||||
{value:20, name:'订单'},
|
||||
{value:80, name:'点击'},
|
||||
{value:100, name:'展现'}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
var config = {
|
||||
sort: 'ascending',
|
||||
labelPosition: 'inside',
|
||||
labelLineLen: 20
|
||||
};
|
||||
|
||||
function update() {
|
||||
chart.setOption({
|
||||
series: [{
|
||||
name: '漏斗图',
|
||||
sort: config.sort,
|
||||
label: {
|
||||
normal: {
|
||||
position: config.labelPosition
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: config.labelLineLen
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
var gui = new dat.GUI();
|
||||
gui.add(config, 'sort', ['descending', 'ascending'])
|
||||
.onChange(update);
|
||||
gui.add(config, 'labelPosition', ['inside', 'left', 'right'])
|
||||
.onChange(update);
|
||||
gui.add(config, 'labelLineLen', 0, 100)
|
||||
.onChange(update);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+265
@@ -0,0 +1,265 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/gauge',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var option ={
|
||||
tooltip : {
|
||||
formatter: '{a} <br/>{c} {b}'
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name:'速度',
|
||||
type:'gauge',
|
||||
z: 3,
|
||||
min:0,
|
||||
max:220,
|
||||
splitNumber:11,
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴小标记
|
||||
length :15, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
length :20, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
title : {
|
||||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
fontSize: 20,
|
||||
fontStyle: 'italic'
|
||||
}
|
||||
},
|
||||
detail : {
|
||||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
},
|
||||
data:[{value: 40, name: 'km/h'}]
|
||||
},
|
||||
{
|
||||
name:'转速',
|
||||
type:'gauge',
|
||||
center : ['25%', '55%'], // 默认全局居中
|
||||
radius : '50%',
|
||||
min:0,
|
||||
max:7,
|
||||
endAngle:45,
|
||||
splitNumber:7,
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
width: 8
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴小标记
|
||||
length :12, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
length :20, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
width:5
|
||||
},
|
||||
title : {
|
||||
// x, y，单位px
|
||||
offsetCenter: [0, '-30%']
|
||||
},
|
||||
detail : {
|
||||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
},
|
||||
data:[{value: 1.5, name: 'x1000 r/min'}]
|
||||
},
|
||||
{
|
||||
name:'油表',
|
||||
type:'gauge',
|
||||
center : ['75%', '50%'], // 默认全局居中
|
||||
radius : '50%',
|
||||
min:0,
|
||||
max:2,
|
||||
startAngle:135,
|
||||
endAngle:45,
|
||||
splitNumber:2,
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
|
||||
width: 8
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴小标记
|
||||
splitNumber:5,
|
||||
length :10, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter:function(v){
|
||||
switch (v + '') {
|
||||
case '0' : return 'E';
|
||||
case '1' : return 'Gas';
|
||||
case '2' : return 'F';
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
length :15, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
width:2
|
||||
},
|
||||
title : {
|
||||
show: false
|
||||
},
|
||||
detail : {
|
||||
show: false
|
||||
},
|
||||
data:[{value: 0.5, name: 'gas'}]
|
||||
},
|
||||
{
|
||||
name:'水表',
|
||||
type:'gauge',
|
||||
center : ['75%', '50%'], // 默认全局居中
|
||||
radius : '50%',
|
||||
min:0,
|
||||
max:2,
|
||||
startAngle:315,
|
||||
endAngle:225,
|
||||
splitNumber:2,
|
||||
axisLine: { // 坐标轴线
|
||||
lineStyle: { // 属性lineStyle控制线条样式
|
||||
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
|
||||
width: 8
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴小标记
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter:function(v){
|
||||
switch (v + '') {
|
||||
case '0' : return 'H';
|
||||
case '1' : return 'Water';
|
||||
case '2' : return 'C';
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: { // 分隔线
|
||||
length :15, // 属性length控制线长
|
||||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
width:2
|
||||
},
|
||||
title : {
|
||||
show: false
|
||||
},
|
||||
detail : {
|
||||
show: false
|
||||
},
|
||||
data:[{value: 0.5, name: 'gas'}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
setInterval(function () {
|
||||
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||||
option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
|
||||
option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
|
||||
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
|
||||
chart.setOption(option,true);
|
||||
}, 2000);
|
||||
// var config = {
|
||||
// labelPosition: 'outside',
|
||||
// clockwise: true,
|
||||
// labelLineLen: 20,
|
||||
// labelLineLen2: 5
|
||||
// };
|
||||
|
||||
// function update() {
|
||||
// chart.setOption({
|
||||
// series: [{
|
||||
// name: 'pie',
|
||||
// clockwise: config.clockwise,
|
||||
// label: {
|
||||
// normal: {
|
||||
// position: config.labelPosition
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// length: config.labelLineLen,
|
||||
// length2: config.labelLineLen2
|
||||
// }
|
||||
// }]
|
||||
// });
|
||||
// }
|
||||
|
||||
// var gui = new dat.GUI();
|
||||
// gui.add(config, 'clockwise')
|
||||
// .onChange(update);
|
||||
// gui.add(config, 'labelPosition', ['inside', 'outside'])
|
||||
// .onChange(update);
|
||||
// gui.add(config, 'labelLineLen', 0, 100)
|
||||
// .onChange(update);
|
||||
// gui.add(config, 'labelLineLen2', 0, 100)
|
||||
// .onChange(update);
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+332
@@ -0,0 +1,332 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<script src='esl.js'></script>
|
||||
<script src='config.js'></script>
|
||||
<script src='lib/jquery.min.js'></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id='main'></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'echarts/chart/lines',
|
||||
'echarts/chart/effectScatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo'
|
||||
], function (echarts) {
|
||||
var geoCoordMap = {
|
||||
'上海': [121.4648,31.2891],
|
||||
'东莞': [113.8953,22.901],
|
||||
'东营': [118.7073,37.5513],
|
||||
'中山': [113.4229,22.478],
|
||||
'临汾': [111.4783,36.1615],
|
||||
'临沂': [118.3118,35.2936],
|
||||
'丹东': [124.541,40.4242],
|
||||
'丽水': [119.5642,28.1854],
|
||||
'乌鲁木齐': [87.9236,43.5883],
|
||||
'佛山': [112.8955,23.1097],
|
||||
'保定': [115.0488,39.0948],
|
||||
'兰州': [103.5901,36.3043],
|
||||
'包头': [110.3467,41.4899],
|
||||
'北京': [116.4551,40.2539],
|
||||
'北海': [109.314,21.6211],
|
||||
'南京': [118.8062,31.9208],
|
||||
'南宁': [108.479,23.1152],
|
||||
'南昌': [116.0046,28.6633],
|
||||
'南通': [121.1023,32.1625],
|
||||
'厦门': [118.1689,24.6478],
|
||||
'台州': [121.1353,28.6688],
|
||||
'合肥': [117.29,32.0581],
|
||||
'呼和浩特': [111.4124,40.4901],
|
||||
'咸阳': [108.4131,34.8706],
|
||||
'哈尔滨': [127.9688,45.368],
|
||||
'唐山': [118.4766,39.6826],
|
||||
'嘉兴': [120.9155,30.6354],
|
||||
'大同': [113.7854,39.8035],
|
||||
'大连': [122.2229,39.4409],
|
||||
'天津': [117.4219,39.4189],
|
||||
'太原': [112.3352,37.9413],
|
||||
'威海': [121.9482,37.1393],
|
||||
'宁波': [121.5967,29.6466],
|
||||
'宝鸡': [107.1826,34.3433],
|
||||
'宿迁': [118.5535,33.7775],
|
||||
'常州': [119.4543,31.5582],
|
||||
'广州': [113.5107,23.2196],
|
||||
'廊坊': [116.521,39.0509],
|
||||
'延安': [109.1052,36.4252],
|
||||
'张家口': [115.1477,40.8527],
|
||||
'徐州': [117.5208,34.3268],
|
||||
'德州': [116.6858,37.2107],
|
||||
'惠州': [114.6204,23.1647],
|
||||
'成都': [103.9526,30.7617],
|
||||
'扬州': [119.4653,32.8162],
|
||||
'承德': [117.5757,41.4075],
|
||||
'拉萨': [91.1865,30.1465],
|
||||
'无锡': [120.3442,31.5527],
|
||||
'日照': [119.2786,35.5023],
|
||||
'昆明': [102.9199,25.4663],
|
||||
'杭州': [119.5313,29.8773],
|
||||
'枣庄': [117.323,34.8926],
|
||||
'柳州': [109.3799,24.9774],
|
||||
'株洲': [113.5327,27.0319],
|
||||
'武汉': [114.3896,30.6628],
|
||||
'汕头': [117.1692,23.3405],
|
||||
'江门': [112.6318,22.1484],
|
||||
'沈阳': [123.1238,42.1216],
|
||||
'沧州': [116.8286,38.2104],
|
||||
'河源': [114.917,23.9722],
|
||||
'泉州': [118.3228,25.1147],
|
||||
'泰安': [117.0264,36.0516],
|
||||
'泰州': [120.0586,32.5525],
|
||||
'济南': [117.1582,36.8701],
|
||||
'济宁': [116.8286,35.3375],
|
||||
'海口': [110.3893,19.8516],
|
||||
'淄博': [118.0371,36.6064],
|
||||
'淮安': [118.927,33.4039],
|
||||
'深圳': [114.5435,22.5439],
|
||||
'清远': [112.9175,24.3292],
|
||||
'温州': [120.498,27.8119],
|
||||
'渭南': [109.7864,35.0299],
|
||||
'湖州': [119.8608,30.7782],
|
||||
'湘潭': [112.5439,27.7075],
|
||||
'滨州': [117.8174,37.4963],
|
||||
'潍坊': [119.0918,36.524],
|
||||
'烟台': [120.7397,37.5128],
|
||||
'玉溪': [101.9312,23.8898],
|
||||
'珠海': [113.7305,22.1155],
|
||||
'盐城': [120.2234,33.5577],
|
||||
'盘锦': [121.9482,41.0449],
|
||||
'石家庄': [114.4995,38.1006],
|
||||
'福州': [119.4543,25.9222],
|
||||
'秦皇岛': [119.2126,40.0232],
|
||||
'绍兴': [120.564,29.7565],
|
||||
'聊城': [115.9167,36.4032],
|
||||
'肇庆': [112.1265,23.5822],
|
||||
'舟山': [122.2559,30.2234],
|
||||
'苏州': [120.6519,31.3989],
|
||||
'莱芜': [117.6526,36.2714],
|
||||
'菏泽': [115.6201,35.2057],
|
||||
'营口': [122.4316,40.4297],
|
||||
'葫芦岛': [120.1575,40.578],
|
||||
'衡水': [115.8838,37.7161],
|
||||
'衢州': [118.6853,28.8666],
|
||||
'西宁': [101.4038,36.8207],
|
||||
'西安': [109.1162,34.2004],
|
||||
'贵阳': [106.6992,26.7682],
|
||||
'连云港': [119.1248,34.552],
|
||||
'邢台': [114.8071,37.2821],
|
||||
'邯郸': [114.4775,36.535],
|
||||
'郑州': [113.4668,34.6234],
|
||||
'鄂尔多斯': [108.9734,39.2487],
|
||||
'重庆': [107.7539,30.1904],
|
||||
'金华': [120.0037,29.1028],
|
||||
'铜川': [109.0393,35.1947],
|
||||
'银川': [106.3586,38.1775],
|
||||
'镇江': [119.4763,31.9702],
|
||||
'长春': [125.8154,44.2584],
|
||||
'长沙': [113.0823,28.2568],
|
||||
'长治': [112.8625,36.4746],
|
||||
'阳泉': [113.4778,38.0951],
|
||||
'青岛': [120.4651,36.3373],
|
||||
'韶关': [113.7964,24.7028]
|
||||
};
|
||||
|
||||
var BJData = [
|
||||
[{name:'北京'}, {name:'上海',value:95}],
|
||||
[{name:'北京'}, {name:'广州',value:90}],
|
||||
[{name:'北京'}, {name:'大连',value:80}],
|
||||
[{name:'北京'}, {name:'南宁',value:70}],
|
||||
[{name:'北京'}, {name:'南昌',value:60}],
|
||||
[{name:'北京'}, {name:'拉萨',value:50}],
|
||||
[{name:'北京'}, {name:'长春',value:40}],
|
||||
[{name:'北京'}, {name:'包头',value:30}],
|
||||
[{name:'北京'}, {name:'重庆',value:20}],
|
||||
[{name:'北京'}, {name:'常州',value:10}]
|
||||
];
|
||||
|
||||
var SHData = [
|
||||
[{name:'上海'},{name:'包头',value:95}],
|
||||
[{name:'上海'},{name:'昆明',value:90}],
|
||||
[{name:'上海'},{name:'广州',value:80}],
|
||||
[{name:'上海'},{name:'郑州',value:70}],
|
||||
[{name:'上海'},{name:'长春',value:60}],
|
||||
[{name:'上海'},{name:'重庆',value:50}],
|
||||
[{name:'上海'},{name:'长沙',value:40}],
|
||||
[{name:'上海'},{name:'北京',value:30}],
|
||||
[{name:'上海'},{name:'丹东',value:20}],
|
||||
[{name:'上海'},{name:'大连',value:10}]
|
||||
];
|
||||
|
||||
var GZData = [
|
||||
[{name:'广州'},{name:'福州',value:95}],
|
||||
[{name:'广州'},{name:'太原',value:90}],
|
||||
[{name:'广州'},{name:'长春',value:80}],
|
||||
[{name:'广州'},{name:'重庆',value:70}],
|
||||
[{name:'广州'},{name:'西安',value:60}],
|
||||
[{name:'广州'},{name:'成都',value:50}],
|
||||
[{name:'广州'},{name:'常州',value:40}],
|
||||
[{name:'广州'},{name:'北京',value:30}],
|
||||
[{name:'广州'},{name:'北海',value:20}],
|
||||
[{name:'广州'},{name:'海口',value:10}]
|
||||
];
|
||||
|
||||
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = geoCoordMap[dataItem[0].name];
|
||||
var toCoord = geoCoordMap[dataItem[1].name];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord
|
||||
}, {
|
||||
coord: toCoord
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
$.get('../map/json/china.json', function (chinaJson) {
|
||||
echarts.registerMap('china', chinaJson);
|
||||
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var color = ['#a6c84c', '#ffa022', '#46bee9'];
|
||||
var series = [];
|
||||
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
|
||||
series.push({
|
||||
name: item[0] + ' Top10',
|
||||
type: 'lines',
|
||||
zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0.7,
|
||||
color: '#fff',
|
||||
symbolSize: 2
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 0,
|
||||
curveness: 0.2
|
||||
}
|
||||
},
|
||||
data: convertData(item[1])
|
||||
},
|
||||
{
|
||||
name: item[0] + ' Top10',
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0,
|
||||
symbol: planePath,
|
||||
symbolSize: 20
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 1,
|
||||
opacity: 0.4,
|
||||
curveness: 0.2
|
||||
}
|
||||
},
|
||||
data: convertData(item[1])
|
||||
},
|
||||
{
|
||||
name: item[0] + ' Top10',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 8;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i]
|
||||
}
|
||||
},
|
||||
data: item[1].map(function (dataItem) {
|
||||
return {
|
||||
name: dataItem[1].name,
|
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
|
||||
};
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
myChart.setOption({
|
||||
backgroundColor: '#404a59',
|
||||
title: {
|
||||
text: '全国主要城市空气质量',
|
||||
subtext: 'data from PM25.in',
|
||||
sublink: 'http://www.pm25.in',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
data:['北京 Top10', '上海 Top10', '广州 Top10'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
selectedMode: 'single'
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#404a59'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+323
@@ -0,0 +1,323 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo'
|
||||
], function (echarts) {
|
||||
|
||||
$.get('../map/json/china.json', function (chinaJson) {
|
||||
if (typeof chinaJson === 'string') {
|
||||
chinaJson = eval('(' + chinaJson + ')');
|
||||
}
|
||||
echarts.registerMap('china', chinaJson);
|
||||
|
||||
var placeList = [
|
||||
{name:'海门', geoCoord:[121.15, 31.89]},
|
||||
{name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
|
||||
{name:'招远', geoCoord:[120.38, 37.35]},
|
||||
{name:'舟山', geoCoord:[122.207216, 29.985295]},
|
||||
{name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
|
||||
{name:'盐城', geoCoord:[120.13, 33.38]},
|
||||
{name:'赤峰', geoCoord:[118.87, 42.28]},
|
||||
{name:'青岛', geoCoord:[120.33, 36.07]},
|
||||
{name:'乳山', geoCoord:[121.52, 36.89]},
|
||||
{name:'金昌', geoCoord:[102.188043, 38.520089]},
|
||||
{name:'泉州', geoCoord:[118.58, 24.93]},
|
||||
{name:'莱西', geoCoord:[120.53, 36.86]},
|
||||
{name:'日照', geoCoord:[119.46, 35.42]},
|
||||
{name:'胶南', geoCoord:[119.97, 35.88]},
|
||||
{name:'南通', geoCoord:[121.05, 32.08]},
|
||||
{name:'拉萨', geoCoord:[91.11, 29.97]},
|
||||
{name:'云浮', geoCoord:[112.02, 22.93]},
|
||||
{name:'梅州', geoCoord:[116.1, 24.55]},
|
||||
{name:'文登', geoCoord:[122.05, 37.2]},
|
||||
{name:'上海', geoCoord:[121.48, 31.22]},
|
||||
{name:'攀枝花', geoCoord:[101.718637, 26.582347]},
|
||||
{name:'威海', geoCoord:[122.1, 37.5]},
|
||||
{name:'承德', geoCoord:[117.93, 40.97]},
|
||||
{name:'厦门', geoCoord:[118.1, 24.46]},
|
||||
{name:'汕尾', geoCoord:[115.375279, 22.786211]},
|
||||
{name:'潮州', geoCoord:[116.63, 23.68]},
|
||||
{name:'丹东', geoCoord:[124.37, 40.13]},
|
||||
{name:'太仓', geoCoord:[121.1, 31.45]},
|
||||
{name:'曲靖', geoCoord:[103.79, 25.51]},
|
||||
{name:'烟台', geoCoord:[121.39, 37.52]},
|
||||
{name:'福州', geoCoord:[119.3, 26.08]},
|
||||
{name:'瓦房店', geoCoord:[121.979603, 39.627114]},
|
||||
{name:'即墨', geoCoord:[120.45, 36.38]},
|
||||
{name:'抚顺', geoCoord:[123.97, 41.97]},
|
||||
{name:'玉溪', geoCoord:[102.52, 24.35]},
|
||||
{name:'张家口', geoCoord:[114.87, 40.82]},
|
||||
{name:'阳泉', geoCoord:[113.57, 37.85]},
|
||||
{name:'莱州', geoCoord:[119.942327, 37.177017]},
|
||||
{name:'湖州', geoCoord:[120.1, 30.86]},
|
||||
{name:'汕头', geoCoord:[116.69, 23.39]},
|
||||
{name:'昆山', geoCoord:[120.95, 31.39]},
|
||||
{name:'宁波', geoCoord:[121.56, 29.86]},
|
||||
{name:'湛江', geoCoord:[110.359377, 21.270708]},
|
||||
{name:'揭阳', geoCoord:[116.35, 23.55]},
|
||||
{name:'荣成', geoCoord:[122.41, 37.16]},
|
||||
{name:'连云港', geoCoord:[119.16, 34.59]},
|
||||
{name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
|
||||
{name:'常熟', geoCoord:[120.74, 31.64]},
|
||||
{name:'东莞', geoCoord:[113.75, 23.04]},
|
||||
{name:'河源', geoCoord:[114.68, 23.73]},
|
||||
{name:'淮安', geoCoord:[119.15, 33.5]},
|
||||
{name:'泰州', geoCoord:[119.9, 32.49]},
|
||||
{name:'南宁', geoCoord:[108.33, 22.84]},
|
||||
{name:'营口', geoCoord:[122.18, 40.65]},
|
||||
{name:'惠州', geoCoord:[114.4, 23.09]},
|
||||
{name:'江阴', geoCoord:[120.26, 31.91]},
|
||||
{name:'蓬莱', geoCoord:[120.75, 37.8]},
|
||||
{name:'韶关', geoCoord:[113.62, 24.84]},
|
||||
{name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
|
||||
{name:'广州', geoCoord:[113.23, 23.16]},
|
||||
{name:'延安', geoCoord:[109.47, 36.6]},
|
||||
{name:'太原', geoCoord:[112.53, 37.87]},
|
||||
{name:'清远', geoCoord:[113.01, 23.7]},
|
||||
{name:'中山', geoCoord:[113.38, 22.52]},
|
||||
{name:'昆明', geoCoord:[102.73, 25.04]},
|
||||
{name:'寿光', geoCoord:[118.73, 36.86]},
|
||||
{name:'盘锦', geoCoord:[122.070714, 41.119997]},
|
||||
{name:'长治', geoCoord:[113.08, 36.18]},
|
||||
{name:'深圳', geoCoord:[114.07, 22.62]},
|
||||
{name:'珠海', geoCoord:[113.52, 22.3]},
|
||||
{name:'宿迁', geoCoord:[118.3, 33.96]},
|
||||
{name:'咸阳', geoCoord:[108.72, 34.36]},
|
||||
{name:'铜川', geoCoord:[109.11, 35.09]},
|
||||
{name:'平度', geoCoord:[119.97, 36.77]},
|
||||
{name:'佛山', geoCoord:[113.11, 23.05]},
|
||||
{name:'海口', geoCoord:[110.35, 20.02]},
|
||||
{name:'江门', geoCoord:[113.06, 22.61]},
|
||||
{name:'章丘', geoCoord:[117.53, 36.72]},
|
||||
{name:'肇庆', geoCoord:[112.44, 23.05]},
|
||||
{name:'大连', geoCoord:[121.62, 38.92]},
|
||||
{name:'临汾', geoCoord:[111.5, 36.08]},
|
||||
{name:'吴江', geoCoord:[120.63, 31.16]},
|
||||
{name:'石嘴山', geoCoord:[106.39, 39.04]},
|
||||
{name:'沈阳', geoCoord:[123.38, 41.8]},
|
||||
{name:'苏州', geoCoord:[120.62, 31.32]},
|
||||
{name:'茂名', geoCoord:[110.88, 21.68]},
|
||||
{name:'嘉兴', geoCoord:[120.76, 30.77]},
|
||||
{name:'长春', geoCoord:[125.35, 43.88]},
|
||||
{name:'胶州', geoCoord:[120.03336, 36.264622]},
|
||||
{name:'银川', geoCoord:[106.27, 38.47]},
|
||||
{name:'张家港', geoCoord:[120.555821, 31.875428]},
|
||||
{name:'三门峡', geoCoord:[111.19, 34.76]},
|
||||
{name:'锦州', geoCoord:[121.15, 41.13]},
|
||||
{name:'南昌', geoCoord:[115.89, 28.68]},
|
||||
{name:'柳州', geoCoord:[109.4, 24.33]},
|
||||
{name:'三亚', geoCoord:[109.511909, 18.252847]},
|
||||
{name:'自贡', geoCoord:[104.778442, 29.33903]},
|
||||
{name:'吉林', geoCoord:[126.57, 43.87]},
|
||||
{name:'阳江', geoCoord:[111.95, 21.85]},
|
||||
{name:'泸州', geoCoord:[105.39, 28.91]},
|
||||
{name:'西宁', geoCoord:[101.74, 36.56]},
|
||||
{name:'宜宾', geoCoord:[104.56, 29.77]},
|
||||
{name:'呼和浩特', geoCoord:[111.65, 40.82]},
|
||||
{name:'成都', geoCoord:[104.06, 30.67]},
|
||||
{name:'大同', geoCoord:[113.3, 40.12]},
|
||||
{name:'镇江', geoCoord:[119.44, 32.2]},
|
||||
{name:'桂林', geoCoord:[110.28, 25.29]},
|
||||
{name:'张家界', geoCoord:[110.479191, 29.117096]},
|
||||
{name:'宜兴', geoCoord:[119.82, 31.36]},
|
||||
{name:'北海', geoCoord:[109.12, 21.49]},
|
||||
{name:'西安', geoCoord:[108.95, 34.27]},
|
||||
{name:'金坛', geoCoord:[119.56, 31.74]},
|
||||
{name:'东营', geoCoord:[118.49, 37.46]},
|
||||
{name:'牡丹江', geoCoord:[129.58, 44.6]},
|
||||
{name:'遵义', geoCoord:[106.9, 27.7]},
|
||||
{name:'绍兴', geoCoord:[120.58, 30.01]},
|
||||
{name:'扬州', geoCoord:[119.42, 32.39]},
|
||||
{name:'常州', geoCoord:[119.95, 31.79]},
|
||||
{name:'潍坊', geoCoord:[119.1, 36.62]},
|
||||
{name:'重庆', geoCoord:[106.54, 29.59]},
|
||||
{name:'台州', geoCoord:[121.420757, 28.656386]},
|
||||
{name:'南京', geoCoord:[118.78, 32.04]},
|
||||
{name:'滨州', geoCoord:[118.03, 37.36]},
|
||||
{name:'贵阳', geoCoord:[106.71, 26.57]},
|
||||
{name:'无锡', geoCoord:[120.29, 31.59]},
|
||||
{name:'本溪', geoCoord:[123.73, 41.3]},
|
||||
{name:'克拉玛依', geoCoord:[84.77, 45.59]},
|
||||
{name:'渭南', geoCoord:[109.5, 34.52]},
|
||||
{name:'马鞍山', geoCoord:[118.48, 31.56]},
|
||||
{name:'宝鸡', geoCoord:[107.15, 34.38]},
|
||||
{name:'焦作', geoCoord:[113.21, 35.24]},
|
||||
{name:'句容', geoCoord:[119.16, 31.95]},
|
||||
{name:'北京', geoCoord:[116.46, 39.92]},
|
||||
{name:'徐州', geoCoord:[117.2, 34.26]},
|
||||
{name:'衡水', geoCoord:[115.72, 37.72]},
|
||||
{name:'包头', geoCoord:[110, 40.58]},
|
||||
{name:'绵阳', geoCoord:[104.73, 31.48]},
|
||||
{name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
|
||||
{name:'枣庄', geoCoord:[117.57, 34.86]},
|
||||
{name:'杭州', geoCoord:[120.19, 30.26]},
|
||||
{name:'淄博', geoCoord:[118.05, 36.78]},
|
||||
{name:'鞍山', geoCoord:[122.85, 41.12]},
|
||||
{name:'溧阳', geoCoord:[119.48, 31.43]},
|
||||
{name:'库尔勒', geoCoord:[86.06, 41.68]},
|
||||
{name:'安阳', geoCoord:[114.35, 36.1]},
|
||||
{name:'开封', geoCoord:[114.35, 34.79]},
|
||||
{name:'济南', geoCoord:[117, 36.65]},
|
||||
{name:'德阳', geoCoord:[104.37, 31.13]},
|
||||
{name:'温州', geoCoord:[120.65, 28.01]},
|
||||
{name:'九江', geoCoord:[115.97, 29.71]},
|
||||
{name:'邯郸', geoCoord:[114.47, 36.6]},
|
||||
{name:'临安', geoCoord:[119.72, 30.23]},
|
||||
{name:'兰州', geoCoord:[103.73, 36.03]},
|
||||
{name:'沧州', geoCoord:[116.83, 38.33]},
|
||||
{name:'临沂', geoCoord:[118.35, 35.05]},
|
||||
{name:'南充', geoCoord:[106.110698, 30.837793]},
|
||||
{name:'天津', geoCoord:[117.2, 39.13]},
|
||||
{name:'富阳', geoCoord:[119.95, 30.07]},
|
||||
{name:'泰安', geoCoord:[117.13, 36.18]},
|
||||
{name:'诸暨', geoCoord:[120.23, 29.71]},
|
||||
{name:'郑州', geoCoord:[113.65, 34.76]},
|
||||
{name:'哈尔滨', geoCoord:[126.63, 45.75]},
|
||||
{name:'聊城', geoCoord:[115.97, 36.45]},
|
||||
{name:'芜湖', geoCoord:[118.38, 31.33]},
|
||||
{name:'唐山', geoCoord:[118.02, 39.63]},
|
||||
{name:'平顶山', geoCoord:[113.29, 33.75]},
|
||||
{name:'邢台', geoCoord:[114.48, 37.05]},
|
||||
{name:'德州', geoCoord:[116.29, 37.45]},
|
||||
{name:'济宁', geoCoord:[116.59, 35.38]},
|
||||
{name:'荆州', geoCoord:[112.239741, 30.335165]},
|
||||
{name:'宜昌', geoCoord:[111.3, 30.7]},
|
||||
{name:'义乌', geoCoord:[120.06, 29.32]},
|
||||
{name:'丽水', geoCoord:[119.92, 28.45]},
|
||||
{name:'洛阳', geoCoord:[112.44, 34.7]},
|
||||
{name:'秦皇岛', geoCoord:[119.57, 39.95]},
|
||||
{name:'株洲', geoCoord:[113.16, 27.83]},
|
||||
{name:'石家庄', geoCoord:[114.48, 38.03]},
|
||||
{name:'莱芜', geoCoord:[117.67, 36.19]},
|
||||
{name:'常德', geoCoord:[111.69, 29.05]},
|
||||
{name:'保定', geoCoord:[115.48, 38.85]},
|
||||
{name:'湘潭', geoCoord:[112.91, 27.87]},
|
||||
{name:'金华', geoCoord:[119.64, 29.12]},
|
||||
{name:'岳阳', geoCoord:[113.09, 29.37]},
|
||||
{name:'长沙', geoCoord:[113, 28.21]},
|
||||
{name:'衢州', geoCoord:[118.88, 28.97]},
|
||||
{name:'廊坊', geoCoord:[116.7, 39.53]},
|
||||
{name:'菏泽', geoCoord:[115.480656, 35.23375]},
|
||||
{name:'合肥', geoCoord:[117.27, 31.86]},
|
||||
{name:'武汉', geoCoord:[114.31, 30.52]},
|
||||
{name:'大庆', geoCoord:[125.03, 46.58]}
|
||||
];
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data = [];
|
||||
var data2 = [];
|
||||
var len = 200;
|
||||
|
||||
var randomValue = function (geoCoord) {
|
||||
return [
|
||||
geoCoord[0] + Math.random() * 1 - 0.5,
|
||||
geoCoord[1] + Math.random() * 1 - 0.5,
|
||||
Math.random()
|
||||
];
|
||||
};
|
||||
|
||||
while(len--) {
|
||||
var geoCoord = placeList[len % placeList.length].geoCoord;
|
||||
data.push({
|
||||
name: placeList[len % placeList.length].name + len,
|
||||
value: randomValue(geoCoord)
|
||||
});
|
||||
|
||||
data2.push({
|
||||
name: placeList[len % placeList.length].name + len,
|
||||
value: randomValue(geoCoord)
|
||||
});
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2']
|
||||
},
|
||||
geo: [{
|
||||
map: 'china',
|
||||
roam: true,
|
||||
left: 10,
|
||||
width: 300,
|
||||
// zoom: 1.5,
|
||||
scaleLimit: {
|
||||
min: 1.5,
|
||||
max: 2
|
||||
},
|
||||
regions: [{
|
||||
name: '新疆',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#aaa'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
map: 'china',
|
||||
roam: true,
|
||||
selectedMode: 'single',
|
||||
left: null,
|
||||
right: 10,
|
||||
width: 300
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: 'geo',
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 20;
|
||||
},
|
||||
data: data
|
||||
}, {
|
||||
coordinateSystem: 'geo',
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 20;
|
||||
},
|
||||
data: data2
|
||||
}]
|
||||
});
|
||||
|
||||
chart.on('click', function (param) {
|
||||
console.log(param);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+145
@@ -0,0 +1,145 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
</style>
|
||||
<div>
|
||||
<input type="button" value="exchangeXY" onclick="go.exchangeXY();">
|
||||
<input type="button" value="illegal use getModel.option" onclick="go.illegal();">
|
||||
<input type="button" value="dataZoom restore (error if view changed)" onclick="go.dataZoomRestore();">
|
||||
</div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
var chart;
|
||||
var myChart;
|
||||
var go;
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markLine',
|
||||
|
||||
// dataZoom and toolbox is required for reproduct bug.
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/toolbox'
|
||||
|
||||
], function (echarts) {
|
||||
|
||||
chart = myChart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
|
||||
option = {
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {}
|
||||
}
|
||||
},
|
||||
dataZoom: [{
|
||||
show: true,
|
||||
end: 80
|
||||
}, {
|
||||
type: 'inside',
|
||||
end: 80
|
||||
}],
|
||||
legend: {
|
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
go = {
|
||||
exchangeXY: function () {
|
||||
var option = myChart.getOption();
|
||||
var temp;
|
||||
temp = option.xAxis;
|
||||
option.xAxis = option.yAxis;
|
||||
option.yAxis = temp;
|
||||
myChart.setOption(option);
|
||||
},
|
||||
|
||||
illegal: function () {
|
||||
try {
|
||||
var option = myChart.getModel.option;
|
||||
var temp;
|
||||
temp = option.xAxis;
|
||||
option.xAxis = option.yAxis;
|
||||
option.yAxis = temp;
|
||||
myChart.setOption(option);
|
||||
alert('error');
|
||||
}
|
||||
catch (e) {
|
||||
alert('ok');
|
||||
}
|
||||
},
|
||||
|
||||
dataZoomRestore: function () {
|
||||
var option = myChart.getOption();
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+90
@@ -0,0 +1,90 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/component/grid',
|
||||
'echarts/chart/graph',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox',
|
||||
'echarts/component/dataZoomInside',
|
||||
'zrender/vml/vml',
|
||||
|
||||
'theme/vintage'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), 'vintage');
|
||||
|
||||
|
||||
var axisData = ['周一','周二','周三','周四','周五','周六','周日'];
|
||||
var data = axisData.map(function (item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1));
|
||||
});
|
||||
var links = data.map(function (item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
};
|
||||
});
|
||||
links.pop();
|
||||
var option = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : axisData
|
||||
},
|
||||
yAxis: {
|
||||
type : 'value'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: false
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'inside'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/graph',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'zrender/vml/vml',
|
||||
|
||||
'theme/vintage'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), 'vintage');
|
||||
|
||||
var option = {
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series : [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '节点1',
|
||||
x: 300,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点2',
|
||||
x: 800,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100
|
||||
}, {
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500
|
||||
}],
|
||||
// links: [],
|
||||
links: [{
|
||||
source: 0,
|
||||
target: 1,
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: { curveness: 0.2 }
|
||||
}
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点4'
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点4'
|
||||
}],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
curveness: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+131
@@ -0,0 +1,131 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
|
||||
'extension/dataTool/gexf',
|
||||
|
||||
'echarts/chart/graph',
|
||||
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/visualMap',
|
||||
|
||||
'theme/vintage'
|
||||
], function (echarts, gexf) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), 'vintage', {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
$.get('./data/les-miserables.gexf', function (xml) {
|
||||
var graph = gexf.parse(xml);
|
||||
var categories = [];
|
||||
for (var i = 0; i < 9; i++) {
|
||||
categories[i] = {
|
||||
name: '类目' + i
|
||||
};
|
||||
}
|
||||
graph.nodes.forEach(function (node) {
|
||||
delete node.itemStyle;
|
||||
node.value = node.symbolSize;
|
||||
node.label = {
|
||||
normal: {
|
||||
show: node.symbolSize > 30
|
||||
}
|
||||
};
|
||||
node.category = node.attributes['modularity_class'];
|
||||
});
|
||||
graph.links.forEach(function (link) {
|
||||
delete link.lineStyle;
|
||||
});
|
||||
var option = {
|
||||
tooltip: {},
|
||||
legend: [{
|
||||
// selectedMode: 'single',
|
||||
data: categories.map(function (a) {
|
||||
return a.name;
|
||||
})
|
||||
}],
|
||||
// visualMap: {
|
||||
// max: 100,
|
||||
// inRange: {
|
||||
// colorSaturation: [1, 0.3]
|
||||
// }
|
||||
// },
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series : [
|
||||
{
|
||||
name: 'Les Miserables',
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
data: graph.nodes,
|
||||
links: graph.links,
|
||||
categories: categories,
|
||||
roam: true,
|
||||
draggable: true,
|
||||
// edgeSymbol: ['none', 'arrow'],
|
||||
// scaleLimit: {
|
||||
// min: 1.5,
|
||||
// max: 2
|
||||
// },
|
||||
label: {
|
||||
normal: {
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
curveness: 0.3
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
var config = {
|
||||
layout: 'none'
|
||||
};
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params, params.data);
|
||||
});
|
||||
|
||||
var gui = new dat.GUI();
|
||||
gui.add(config, 'layout', ['none', 'circular'])
|
||||
.onChange(function (value) {
|
||||
chart.setOption({
|
||||
series: [{
|
||||
name: 'Les Miserables',
|
||||
layout: value
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+471
@@ -0,0 +1,471 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/heatmap',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
require(['map/js/china'], function () {
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var geoCoordMap = {
|
||||
"海门":[121.15,31.89],
|
||||
"鄂尔多斯":[109.781327,39.608266],
|
||||
"招远":[120.38,37.35],
|
||||
"舟山":[122.207216,29.985295],
|
||||
"齐齐哈尔":[123.97,47.33],
|
||||
"盐城":[120.13,33.38],
|
||||
"赤峰":[118.87,42.28],
|
||||
"青岛":[120.33,36.07],
|
||||
"乳山":[121.52,36.89],
|
||||
"金昌":[102.188043,38.520089],
|
||||
"泉州":[118.58,24.93],
|
||||
"莱西":[120.53,36.86],
|
||||
"日照":[119.46,35.42],
|
||||
"胶南":[119.97,35.88],
|
||||
"南通":[121.05,32.08],
|
||||
"拉萨":[91.11,29.97],
|
||||
"云浮":[112.02,22.93],
|
||||
"梅州":[116.1,24.55],
|
||||
"文登":[122.05,37.2],
|
||||
"上海":[121.48,31.22],
|
||||
"攀枝花":[101.718637,26.582347],
|
||||
"威海":[122.1,37.5],
|
||||
"承德":[117.93,40.97],
|
||||
"厦门":[118.1,24.46],
|
||||
"汕尾":[115.375279,22.786211],
|
||||
"潮州":[116.63,23.68],
|
||||
"丹东":[124.37,40.13],
|
||||
"太仓":[121.1,31.45],
|
||||
"曲靖":[103.79,25.51],
|
||||
"烟台":[121.39,37.52],
|
||||
"福州":[119.3,26.08],
|
||||
"瓦房店":[121.979603,39.627114],
|
||||
"即墨":[120.45,36.38],
|
||||
"抚顺":[123.97,41.97],
|
||||
"玉溪":[102.52,24.35],
|
||||
"张家口":[114.87,40.82],
|
||||
"阳泉":[113.57,37.85],
|
||||
"莱州":[119.942327,37.177017],
|
||||
"湖州":[120.1,30.86],
|
||||
"汕头":[116.69,23.39],
|
||||
"昆山":[120.95,31.39],
|
||||
"宁波":[121.56,29.86],
|
||||
"湛江":[110.359377,21.270708],
|
||||
"揭阳":[116.35,23.55],
|
||||
"荣成":[122.41,37.16],
|
||||
"连云港":[119.16,34.59],
|
||||
"葫芦岛":[120.836932,40.711052],
|
||||
"常熟":[120.74,31.64],
|
||||
"东莞":[113.75,23.04],
|
||||
"河源":[114.68,23.73],
|
||||
"淮安":[119.15,33.5],
|
||||
"泰州":[119.9,32.49],
|
||||
"南宁":[108.33,22.84],
|
||||
"营口":[122.18,40.65],
|
||||
"惠州":[114.4,23.09],
|
||||
"江阴":[120.26,31.91],
|
||||
"蓬莱":[120.75,37.8],
|
||||
"韶关":[113.62,24.84],
|
||||
"嘉峪关":[98.289152,39.77313],
|
||||
"广州":[113.23,23.16],
|
||||
"延安":[109.47,36.6],
|
||||
"太原":[112.53,37.87],
|
||||
"清远":[113.01,23.7],
|
||||
"中山":[113.38,22.52],
|
||||
"昆明":[102.73,25.04],
|
||||
"寿光":[118.73,36.86],
|
||||
"盘锦":[122.070714,41.119997],
|
||||
"长治":[113.08,36.18],
|
||||
"深圳":[114.07,22.62],
|
||||
"珠海":[113.52,22.3],
|
||||
"宿迁":[118.3,33.96],
|
||||
"咸阳":[108.72,34.36],
|
||||
"铜川":[109.11,35.09],
|
||||
"平度":[119.97,36.77],
|
||||
"佛山":[113.11,23.05],
|
||||
"海口":[110.35,20.02],
|
||||
"江门":[113.06,22.61],
|
||||
"章丘":[117.53,36.72],
|
||||
"肇庆":[112.44,23.05],
|
||||
"大连":[121.62,38.92],
|
||||
"临汾":[111.5,36.08],
|
||||
"吴江":[120.63,31.16],
|
||||
"石嘴山":[106.39,39.04],
|
||||
"沈阳":[123.38,41.8],
|
||||
"苏州":[120.62,31.32],
|
||||
"茂名":[110.88,21.68],
|
||||
"嘉兴":[120.76,30.77],
|
||||
"长春":[125.35,43.88],
|
||||
"胶州":[120.03336,36.264622],
|
||||
"银川":[106.27,38.47],
|
||||
"张家港":[120.555821,31.875428],
|
||||
"三门峡":[111.19,34.76],
|
||||
"锦州":[121.15,41.13],
|
||||
"南昌":[115.89,28.68],
|
||||
"柳州":[109.4,24.33],
|
||||
"三亚":[109.511909,18.252847],
|
||||
"自贡":[104.778442,29.33903],
|
||||
"吉林":[126.57,43.87],
|
||||
"阳江":[111.95,21.85],
|
||||
"泸州":[105.39,28.91],
|
||||
"西宁":[101.74,36.56],
|
||||
"宜宾":[104.56,29.77],
|
||||
"呼和浩特":[111.65,40.82],
|
||||
"成都":[104.06,30.67],
|
||||
"大同":[113.3,40.12],
|
||||
"镇江":[119.44,32.2],
|
||||
"桂林":[110.28,25.29],
|
||||
"张家界":[110.479191,29.117096],
|
||||
"宜兴":[119.82,31.36],
|
||||
"北海":[109.12,21.49],
|
||||
"西安":[108.95,34.27],
|
||||
"金坛":[119.56,31.74],
|
||||
"东营":[118.49,37.46],
|
||||
"牡丹江":[129.58,44.6],
|
||||
"遵义":[106.9,27.7],
|
||||
"绍兴":[120.58,30.01],
|
||||
"扬州":[119.42,32.39],
|
||||
"常州":[119.95,31.79],
|
||||
"潍坊":[119.1,36.62],
|
||||
"重庆":[106.54,29.59],
|
||||
"台州":[121.420757,28.656386],
|
||||
"南京":[118.78,32.04],
|
||||
"滨州":[118.03,37.36],
|
||||
"贵阳":[106.71,26.57],
|
||||
"无锡":[120.29,31.59],
|
||||
"本溪":[123.73,41.3],
|
||||
"克拉玛依":[84.77,45.59],
|
||||
"渭南":[109.5,34.52],
|
||||
"马鞍山":[118.48,31.56],
|
||||
"宝鸡":[107.15,34.38],
|
||||
"焦作":[113.21,35.24],
|
||||
"句容":[119.16,31.95],
|
||||
"北京":[116.46,39.92],
|
||||
"徐州":[117.2,34.26],
|
||||
"衡水":[115.72,37.72],
|
||||
"包头":[110,40.58],
|
||||
"绵阳":[104.73,31.48],
|
||||
"乌鲁木齐":[87.68,43.77],
|
||||
"枣庄":[117.57,34.86],
|
||||
"杭州":[120.19,30.26],
|
||||
"淄博":[118.05,36.78],
|
||||
"鞍山":[122.85,41.12],
|
||||
"溧阳":[119.48,31.43],
|
||||
"库尔勒":[86.06,41.68],
|
||||
"安阳":[114.35,36.1],
|
||||
"开封":[114.35,34.79],
|
||||
"济南":[117,36.65],
|
||||
"德阳":[104.37,31.13],
|
||||
"温州":[120.65,28.01],
|
||||
"九江":[115.97,29.71],
|
||||
"邯郸":[114.47,36.6],
|
||||
"临安":[119.72,30.23],
|
||||
"兰州":[103.73,36.03],
|
||||
"沧州":[116.83,38.33],
|
||||
"临沂":[118.35,35.05],
|
||||
"南充":[106.110698,30.837793],
|
||||
"天津":[117.2,39.13],
|
||||
"富阳":[119.95,30.07],
|
||||
"泰安":[117.13,36.18],
|
||||
"诸暨":[120.23,29.71],
|
||||
"郑州":[113.65,34.76],
|
||||
"哈尔滨":[126.63,45.75],
|
||||
"聊城":[115.97,36.45],
|
||||
"芜湖":[118.38,31.33],
|
||||
"唐山":[118.02,39.63],
|
||||
"平顶山":[113.29,33.75],
|
||||
"邢台":[114.48,37.05],
|
||||
"德州":[116.29,37.45],
|
||||
"济宁":[116.59,35.38],
|
||||
"荆州":[112.239741,30.335165],
|
||||
"宜昌":[111.3,30.7],
|
||||
"义乌":[120.06,29.32],
|
||||
"丽水":[119.92,28.45],
|
||||
"洛阳":[112.44,34.7],
|
||||
"秦皇岛":[119.57,39.95],
|
||||
"株洲":[113.16,27.83],
|
||||
"石家庄":[114.48,38.03],
|
||||
"莱芜":[117.67,36.19],
|
||||
"常德":[111.69,29.05],
|
||||
"保定":[115.48,38.85],
|
||||
"湘潭":[112.91,27.87],
|
||||
"金华":[119.64,29.12],
|
||||
"岳阳":[113.09,29.37],
|
||||
"长沙":[113,28.21],
|
||||
"衢州":[118.88,28.97],
|
||||
"廊坊":[116.7,39.53],
|
||||
"菏泽":[115.480656,35.23375],
|
||||
"合肥":[117.27,31.86],
|
||||
"武汉":[114.31,30.52],
|
||||
"大庆":[125.03,46.58]
|
||||
};
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push(geoCoord.concat(data[i].value));
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
backgroundColor: '#404a59',
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 500,
|
||||
splitNumber: 5,
|
||||
inRange: {
|
||||
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'AQI',
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData([
|
||||
{name: "海门", value: 9},
|
||||
{name: "鄂尔多斯", value: 12},
|
||||
{name: "招远", value: 12},
|
||||
{name: "舟山", value: 12},
|
||||
{name: "齐齐哈尔", value: 14},
|
||||
{name: "盐城", value: 15},
|
||||
{name: "赤峰", value: 16},
|
||||
{name: "青岛", value: 18},
|
||||
{name: "乳山", value: 18},
|
||||
{name: "金昌", value: 19},
|
||||
{name: "泉州", value: 21},
|
||||
{name: "莱西", value: 21},
|
||||
{name: "日照", value: 21},
|
||||
{name: "胶南", value: 22},
|
||||
{name: "南通", value: 23},
|
||||
{name: "拉萨", value: 24},
|
||||
{name: "云浮", value: 24},
|
||||
{name: "梅州", value: 25},
|
||||
{name: "文登", value: 25},
|
||||
{name: "上海", value: 25},
|
||||
{name: "攀枝花", value: 25},
|
||||
{name: "威海", value: 25},
|
||||
{name: "承德", value: 25},
|
||||
{name: "厦门", value: 26},
|
||||
{name: "汕尾", value: 26},
|
||||
{name: "潮州", value: 26},
|
||||
{name: "丹东", value: 27},
|
||||
{name: "太仓", value: 27},
|
||||
{name: "曲靖", value: 27},
|
||||
{name: "烟台", value: 28},
|
||||
{name: "福州", value: 29},
|
||||
{name: "瓦房店", value: 30},
|
||||
{name: "即墨", value: 30},
|
||||
{name: "抚顺", value: 31},
|
||||
{name: "玉溪", value: 31},
|
||||
{name: "张家口", value: 31},
|
||||
{name: "阳泉", value: 31},
|
||||
{name: "莱州", value: 32},
|
||||
{name: "湖州", value: 32},
|
||||
{name: "汕头", value: 32},
|
||||
{name: "昆山", value: 33},
|
||||
{name: "宁波", value: 33},
|
||||
{name: "湛江", value: 33},
|
||||
{name: "揭阳", value: 34},
|
||||
{name: "荣成", value: 34},
|
||||
{name: "连云港", value: 35},
|
||||
{name: "葫芦岛", value: 35},
|
||||
{name: "常熟", value: 36},
|
||||
{name: "东莞", value: 36},
|
||||
{name: "河源", value: 36},
|
||||
{name: "淮安", value: 36},
|
||||
{name: "泰州", value: 36},
|
||||
{name: "南宁", value: 37},
|
||||
{name: "营口", value: 37},
|
||||
{name: "惠州", value: 37},
|
||||
{name: "江阴", value: 37},
|
||||
{name: "蓬莱", value: 37},
|
||||
{name: "韶关", value: 38},
|
||||
{name: "嘉峪关", value: 38},
|
||||
{name: "广州", value: 38},
|
||||
{name: "延安", value: 38},
|
||||
{name: "太原", value: 39},
|
||||
{name: "清远", value: 39},
|
||||
{name: "中山", value: 39},
|
||||
{name: "昆明", value: 39},
|
||||
{name: "寿光", value: 40},
|
||||
{name: "盘锦", value: 40},
|
||||
{name: "长治", value: 41},
|
||||
{name: "深圳", value: 41},
|
||||
{name: "珠海", value: 42},
|
||||
{name: "宿迁", value: 43},
|
||||
{name: "咸阳", value: 43},
|
||||
{name: "铜川", value: 44},
|
||||
{name: "平度", value: 44},
|
||||
{name: "佛山", value: 44},
|
||||
{name: "海口", value: 44},
|
||||
{name: "江门", value: 45},
|
||||
{name: "章丘", value: 45},
|
||||
{name: "肇庆", value: 46},
|
||||
{name: "大连", value: 47},
|
||||
{name: "临汾", value: 47},
|
||||
{name: "吴江", value: 47},
|
||||
{name: "石嘴山", value: 49},
|
||||
{name: "沈阳", value: 50},
|
||||
{name: "苏州", value: 50},
|
||||
{name: "茂名", value: 50},
|
||||
{name: "嘉兴", value: 51},
|
||||
{name: "长春", value: 51},
|
||||
{name: "胶州", value: 52},
|
||||
{name: "银川", value: 52},
|
||||
{name: "张家港", value: 52},
|
||||
{name: "三门峡", value: 53},
|
||||
{name: "锦州", value: 54},
|
||||
{name: "南昌", value: 54},
|
||||
{name: "柳州", value: 54},
|
||||
{name: "三亚", value: 54},
|
||||
{name: "自贡", value: 56},
|
||||
{name: "吉林", value: 56},
|
||||
{name: "阳江", value: 57},
|
||||
{name: "泸州", value: 57},
|
||||
{name: "西宁", value: 57},
|
||||
{name: "宜宾", value: 58},
|
||||
{name: "呼和浩特", value: 58},
|
||||
{name: "成都", value: 58},
|
||||
{name: "大同", value: 58},
|
||||
{name: "镇江", value: 59},
|
||||
{name: "桂林", value: 59},
|
||||
{name: "张家界", value: 59},
|
||||
{name: "宜兴", value: 59},
|
||||
{name: "北海", value: 60},
|
||||
{name: "西安", value: 61},
|
||||
{name: "金坛", value: 62},
|
||||
{name: "东营", value: 62},
|
||||
{name: "牡丹江", value: 63},
|
||||
{name: "遵义", value: 63},
|
||||
{name: "绍兴", value: 63},
|
||||
{name: "扬州", value: 64},
|
||||
{name: "常州", value: 64},
|
||||
{name: "潍坊", value: 65},
|
||||
{name: "重庆", value: 66},
|
||||
{name: "台州", value: 67},
|
||||
{name: "南京", value: 67},
|
||||
{name: "滨州", value: 70},
|
||||
{name: "贵阳", value: 71},
|
||||
{name: "无锡", value: 71},
|
||||
{name: "本溪", value: 71},
|
||||
{name: "克拉玛依", value: 72},
|
||||
{name: "渭南", value: 72},
|
||||
{name: "马鞍山", value: 72},
|
||||
{name: "宝鸡", value: 72},
|
||||
{name: "焦作", value: 75},
|
||||
{name: "句容", value: 75},
|
||||
{name: "北京", value: 79},
|
||||
{name: "徐州", value: 79},
|
||||
{name: "衡水", value: 80},
|
||||
{name: "包头", value: 80},
|
||||
{name: "绵阳", value: 80},
|
||||
{name: "乌鲁木齐", value: 84},
|
||||
{name: "枣庄", value: 84},
|
||||
{name: "杭州", value: 84},
|
||||
{name: "淄博", value: 85},
|
||||
{name: "鞍山", value: 86},
|
||||
{name: "溧阳", value: 86},
|
||||
{name: "库尔勒", value: 86},
|
||||
{name: "安阳", value: 90},
|
||||
{name: "开封", value: 90},
|
||||
{name: "济南", value: 92},
|
||||
{name: "德阳", value: 93},
|
||||
{name: "温州", value: 95},
|
||||
{name: "九江", value: 96},
|
||||
{name: "邯郸", value: 98},
|
||||
{name: "临安", value: 99},
|
||||
{name: "兰州", value: 99},
|
||||
{name: "沧州", value: 100},
|
||||
{name: "临沂", value: 103},
|
||||
{name: "南充", value: 104},
|
||||
{name: "天津", value: 105},
|
||||
{name: "富阳", value: 106},
|
||||
{name: "泰安", value: 112},
|
||||
{name: "诸暨", value: 112},
|
||||
{name: "郑州", value: 113},
|
||||
{name: "哈尔滨", value: 114},
|
||||
{name: "聊城", value: 116},
|
||||
{name: "芜湖", value: 117},
|
||||
{name: "唐山", value: 119},
|
||||
{name: "平顶山", value: 119},
|
||||
{name: "邢台", value: 119},
|
||||
{name: "德州", value: 120},
|
||||
{name: "济宁", value: 120},
|
||||
{name: "荆州", value: 127},
|
||||
{name: "宜昌", value: 130},
|
||||
{name: "义乌", value: 132},
|
||||
{name: "丽水", value: 133},
|
||||
{name: "洛阳", value: 134},
|
||||
{name: "秦皇岛", value: 136},
|
||||
{name: "株洲", value: 143},
|
||||
{name: "石家庄", value: 147},
|
||||
{name: "莱芜", value: 148},
|
||||
{name: "常德", value: 152},
|
||||
{name: "保定", value: 153},
|
||||
{name: "湘潭", value: 154},
|
||||
{name: "金华", value: 157},
|
||||
{name: "岳阳", value: 169},
|
||||
{name: "长沙", value: 175},
|
||||
{name: "衢州", value: 177},
|
||||
{name: "廊坊", value: 193},
|
||||
{name: "菏泽", value: 194},
|
||||
{name: "合肥", value: 229},
|
||||
{name: "武汉", value: 273},
|
||||
{name: "大庆", value: 279}
|
||||
])
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+86
@@ -0,0 +1,86 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/heatmap',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||||
'7a', '8a', '9a','10a','11a',
|
||||
'12p', '1p', '2p', '3p', '4p', '5p',
|
||||
'6p', '7p', '8p', '9p', '10p', '11p'];
|
||||
var days = ['Saturday', 'Friday', 'Thursday',
|
||||
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
|
||||
|
||||
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
|
||||
|
||||
data = data.map(function (item) {
|
||||
return [item[1], item[0], item[2] || '-'];
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
height: 300
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: hours
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: days
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
max: 10,
|
||||
calculable: true
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: data,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+977
@@ -0,0 +1,977 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="../dist/echarts.min.js"></script>
|
||||
<script src="../map/js/china.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
function makeChart () {
|
||||
var main = document.getElementById('main');
|
||||
var div = document.createElement('div');
|
||||
var width = document.body.clientWidth;
|
||||
div.style.cssText = width + 'px; height:400px';
|
||||
main.appendChild(div);
|
||||
return echarts.init(div);
|
||||
}
|
||||
|
||||
function makeLine () {
|
||||
var chart = makeChart();
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData[i] = [];
|
||||
data1[i] = [];
|
||||
for (var j = 0; j < 10; j++) {
|
||||
xAxisData[i].push('类目' + j);
|
||||
data1[i].push((Math.random() * 5).toFixed(2));
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
symbol: 'diamond',
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
symbol: 'square',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
symbol: 'triangle',
|
||||
data:[320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
symbol: 'triangle',
|
||||
symbolRotate: 180,
|
||||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
function makeBar () {
|
||||
var chart = makeChart();
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData[i] = [];
|
||||
data1[i] = [];
|
||||
for (var j = 0; j < 10; j++) {
|
||||
xAxisData[i].push('类目' + j);
|
||||
data1[i].push((Math.random() * 5).toFixed(2));
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makePie() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
hoverAnimation: false,
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
data:[
|
||||
{value:335, name:'直接访问'},
|
||||
{value:310, name:'邮件营销'},
|
||||
{value:234, name:'联盟广告'},
|
||||
{value:135, name:'视频广告'},
|
||||
{value:1548, name:'搜索引擎'}
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function makeScatter() {
|
||||
var chart = makeChart();
|
||||
var data1 = [];
|
||||
for (var j = 0; j < 20; j++) {
|
||||
data1.push([
|
||||
(Math.random() * 5).toFixed(2),
|
||||
(Math.random() * 5).toFixed(2),
|
||||
(Math.random() * 5).toFixed(2)
|
||||
]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: '男性女性身高体重分布',
|
||||
subtext: '抽样调查来自: Heinz 2003'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showDelay : 0,
|
||||
formatter : function (params) {
|
||||
if (params.value && params.value.length > 1) {
|
||||
return params.seriesName + ' :<br/>'
|
||||
+ params.value[0] + 'cm '
|
||||
+ params.value[1] + 'kg ';
|
||||
}
|
||||
else {
|
||||
return params.seriesName + ' :<br/>'
|
||||
+ params.name + ' : '
|
||||
+ params.value + 'kg ';
|
||||
}
|
||||
},
|
||||
axisPointer:{
|
||||
show: true,
|
||||
type : 'cross',
|
||||
lineStyle: {
|
||||
type : 'dashed',
|
||||
width : 1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['女性','男性']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataZoom : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
axisLabel : {
|
||||
formatter: '{value} cm'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
axisLabel : {
|
||||
formatter: '{value} kg'
|
||||
}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'女性',
|
||||
type:'scatter',
|
||||
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
|
||||
],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: '最大值'},
|
||||
{type : 'min', name: '最小值'}
|
||||
]
|
||||
},
|
||||
makeLine : {
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'男性',
|
||||
type:'scatter',
|
||||
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
|
||||
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
|
||||
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
|
||||
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
|
||||
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
|
||||
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
|
||||
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
|
||||
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
|
||||
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
|
||||
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
|
||||
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
|
||||
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
|
||||
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
|
||||
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
|
||||
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
|
||||
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
|
||||
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
|
||||
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
|
||||
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
|
||||
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
|
||||
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
|
||||
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
|
||||
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
|
||||
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
|
||||
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
|
||||
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
|
||||
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
|
||||
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
|
||||
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
|
||||
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
|
||||
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
|
||||
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
|
||||
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
|
||||
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
|
||||
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
|
||||
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
|
||||
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
|
||||
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
|
||||
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
|
||||
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
|
||||
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
|
||||
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
|
||||
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
|
||||
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
|
||||
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
|
||||
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
|
||||
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
|
||||
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
|
||||
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
|
||||
[180.3, 83.2], [180.3, 83.2]
|
||||
],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: '最大值'},
|
||||
{type : 'min', name: '最小值'}
|
||||
]
|
||||
},
|
||||
makeLine : {
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makeMap() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
series: [{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: []
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function makeFunnel() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
legend: {
|
||||
data : ['展现','点击','访问','咨询','订单']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'漏斗图',
|
||||
type:'funnel',
|
||||
gap: 3,
|
||||
sort: 'ascending',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:60, name:'访问'},
|
||||
{value:40, name:'咨询'},
|
||||
{value:20, name:'订单'},
|
||||
{value:80, name:'点击'},
|
||||
{value:100, name:'展现'}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function makeBar () {
|
||||
var chart = makeChart();
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
xAxisData[i] = [];
|
||||
data1[i] = [];
|
||||
for (var j = 0; j < 10; j++) {
|
||||
xAxisData[i].push('类目' + j);
|
||||
data1[i].push((Math.random() * 5).toFixed(2));
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'bar',
|
||||
stack: '总量',
|
||||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makePie() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
hoverAnimation: false,
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
data:[
|
||||
{value:0, name:'直接访问'},
|
||||
{value:310, name:'邮件营销'},
|
||||
{value:234, name:'联盟广告'},
|
||||
{value:135, name:'视频广告'},
|
||||
{value:1548, name:'搜索引擎'}
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function makeSinglePie() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data:['直接访问']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
hoverAnimation: false,
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
data:[
|
||||
{value:335, name:'直接访问'}
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function makeScatter() {
|
||||
var chart = makeChart();
|
||||
var data1 = [];
|
||||
for (var j = 0; j < 20; j++) {
|
||||
data1.push([
|
||||
(Math.random() * 5).toFixed(2),
|
||||
(Math.random() * 5).toFixed(2),
|
||||
(Math.random() * 5).toFixed(2)
|
||||
]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: '男性女性身高体重分布',
|
||||
subtext: '抽样调查来自: Heinz 2003'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showDelay : 0,
|
||||
formatter : function (params) {
|
||||
if (params.value.length > 1) {
|
||||
return params.seriesName + ' :<br/>'
|
||||
+ params.value[0] + 'cm '
|
||||
+ params.value[1] + 'kg ';
|
||||
}
|
||||
else {
|
||||
return params.seriesName + ' :<br/>'
|
||||
+ params.name + ' : '
|
||||
+ params.value + 'kg ';
|
||||
}
|
||||
},
|
||||
axisPointer:{
|
||||
show: true,
|
||||
type : 'cross',
|
||||
lineStyle: {
|
||||
type : 'dashed',
|
||||
width : 1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['女性','男性']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataZoom : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
axisLabel : {
|
||||
formatter: '{value} cm'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
scale:true,
|
||||
axisLabel : {
|
||||
formatter: '{value} kg'
|
||||
}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'女性',
|
||||
type:'scatter',
|
||||
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
|
||||
],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: '最大值'},
|
||||
{type : 'min', name: '最小值'}
|
||||
]
|
||||
},
|
||||
makeLine : {
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'男性',
|
||||
type:'scatter',
|
||||
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
|
||||
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
|
||||
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
|
||||
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
|
||||
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
|
||||
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
|
||||
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
|
||||
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
|
||||
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
|
||||
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
|
||||
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
|
||||
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
|
||||
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
|
||||
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
|
||||
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
|
||||
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
|
||||
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
|
||||
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
|
||||
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
|
||||
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
|
||||
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
|
||||
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
|
||||
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
|
||||
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
|
||||
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
|
||||
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
|
||||
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
|
||||
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
|
||||
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
|
||||
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
|
||||
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
|
||||
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
|
||||
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
|
||||
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
|
||||
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
|
||||
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
|
||||
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
|
||||
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
|
||||
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
|
||||
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
|
||||
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
|
||||
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
|
||||
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
|
||||
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
|
||||
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
|
||||
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
|
||||
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
|
||||
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
|
||||
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
|
||||
[180.3, 83.2], [180.3, 83.2]
|
||||
],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: '最大值'},
|
||||
{type : 'min', name: '最小值'}
|
||||
]
|
||||
},
|
||||
makeLine : {
|
||||
data : [
|
||||
{type : 'average', name: '平均值'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makeMap() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
series: [{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: []
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function makeFunnel() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
legend: {
|
||||
data : ['展现','点击','访问','咨询','订单']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'漏斗图',
|
||||
type:'funnel',
|
||||
gap: 3,
|
||||
sort: 'ascending',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:60, name:'访问'},
|
||||
{value:40, name:'咨询'},
|
||||
{value:20, name:'订单'},
|
||||
{value:80, name:'点击'},
|
||||
{value:100, name:'展现'}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makeDataZoom() {
|
||||
var chart = makeChart();
|
||||
var data = [];
|
||||
var categoryData = [];
|
||||
var y = Math.random() * 1000;
|
||||
for (var i = 0; i < 50; i++) {
|
||||
categoryData.push('C' + i);
|
||||
data.push(y);
|
||||
y += 100 * Math.random() - 50;
|
||||
}
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: categoryData
|
||||
},
|
||||
yAxis: {},
|
||||
dataZoom: [{
|
||||
start: 0,
|
||||
end: 30
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
animation: false,
|
||||
data: data
|
||||
// smooth: true
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function makeGraph() {
|
||||
var chart = makeChart();
|
||||
chart.setOption({
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series : [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '节点1',
|
||||
x: 300,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点2',
|
||||
x: 800,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100
|
||||
}, {
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500
|
||||
}],
|
||||
// links: [],
|
||||
links: [{
|
||||
source: '节点1',
|
||||
target: '节点2',
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: { curveness: 0.2 }
|
||||
}
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点4'
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点4'
|
||||
}],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
curveness: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
makeLine();
|
||||
}, 500);
|
||||
setTimeout(function () {
|
||||
makeBar();
|
||||
}, 1000);
|
||||
setTimeout(function () {
|
||||
makePie();
|
||||
}, 1500);
|
||||
setTimeout(function () {
|
||||
makeSinglePie();
|
||||
}, 1800);
|
||||
setTimeout(function () {
|
||||
makeScatter();
|
||||
}, 2000);
|
||||
setTimeout(function () {
|
||||
makeMap();
|
||||
}, 2500);
|
||||
setTimeout(function () {
|
||||
makeFunnel();
|
||||
}, 3000);
|
||||
setTimeout(function () {
|
||||
makeDataZoom();
|
||||
}, 3500);
|
||||
setTimeout(function () {
|
||||
makeGraph();
|
||||
}, 3500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+124
@@ -0,0 +1,124 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="timing"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/dataZoom',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
var myChart;
|
||||
var lineCount = 2;
|
||||
var pointCount = 10000;
|
||||
var chartCount = 5;
|
||||
|
||||
var option = {
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:[]
|
||||
},
|
||||
dataZoom: [{
|
||||
show: true,
|
||||
realtime: true,
|
||||
// showDataShadow: false,
|
||||
start: 50,
|
||||
end: 60
|
||||
}],
|
||||
xAxis : [
|
||||
{
|
||||
type : 'time'
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series: [],
|
||||
animation: false
|
||||
};
|
||||
|
||||
var lineStyle = {
|
||||
normal: {
|
||||
width: 2,
|
||||
opacity: 1
|
||||
}
|
||||
};
|
||||
|
||||
var date = [];
|
||||
var oneDay = 24 * 3600 * 1000;
|
||||
var base = +new Date(1897, 9, 3);
|
||||
for (var j = 0; j < pointCount; j++) {
|
||||
var now = new Date(base += oneDay);
|
||||
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
|
||||
}
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
var y = Math.random() * 1000;
|
||||
var values = [];
|
||||
for (var j = 0; j < pointCount; j++) {
|
||||
y += Math.round(10 + Math.random() * (-10 - 10));
|
||||
values.push(
|
||||
[
|
||||
date[j],
|
||||
// Math.random() < 0.1 ? '-' : y
|
||||
y
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
option.legend.data.push( 'line' + i );
|
||||
option.series.push({
|
||||
name: 'line' + i,
|
||||
type: 'line',
|
||||
sampling: 'average',
|
||||
hoverAnimation: false,
|
||||
showSymbol: false,
|
||||
data: values,
|
||||
lineStyle: lineStyle
|
||||
});
|
||||
}
|
||||
|
||||
function refresh(isBtnRefresh){
|
||||
var start = new Date();
|
||||
for( var n = 0; n < chartCount; n++ ) {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<h1>'+n+'</h1><div id="chart'+n+'" style="width: 860px; height: 320px"></div>';
|
||||
document.body.appendChild(el);
|
||||
|
||||
myChart = echarts.init(document.getElementById('chart'+n));
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
var end = new Date();
|
||||
|
||||
document.getElementById('timing').innerHTML = 'Graphs loaded in ' + ( end - start ) + ' ms.';
|
||||
};
|
||||
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+94
File diff suppressed because one or more lines are too long
+226
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* Simple draggable tool, just for demo or testing.
|
||||
* Use jquery.
|
||||
*/
|
||||
(function (global) {
|
||||
|
||||
var BORDER_WIDTH = 4;
|
||||
var $ = global.jQuery;
|
||||
|
||||
global.draggable = {
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} mainEl
|
||||
* @param {module:echarts/echarts~EChart} chart
|
||||
* @param {Object} [opt] {width: ..., height: ...}
|
||||
* @param {number} [opt.width] If not specified, use mainEl current width.
|
||||
* @param {number} [opt.height] If not specified, use mainEl current height.
|
||||
* @param {boolean} [opt.lockX=false]
|
||||
* @param {boolean} [opt.lockY=false]
|
||||
* @param {number} [opt.throttle=false]
|
||||
* @return {type} description
|
||||
*/
|
||||
init: function (mainEl, chart, opt) {
|
||||
opt = opt || {};
|
||||
|
||||
var chartResize = chart ? $.proxy(chart.resize, chart) : function () {};
|
||||
if (opt.throttle) {
|
||||
chartResize = throttle(chartResize, opt.throttle, true, false);
|
||||
}
|
||||
|
||||
var mainEl = $(mainEl);
|
||||
|
||||
$('.draggable-control').remove();
|
||||
|
||||
var controlEl = $(
|
||||
'<div class="draggable-control">DRAG<span class="draggable-label"></span></div>'
|
||||
);
|
||||
|
||||
controlEl.css({
|
||||
'position': 'absolute',
|
||||
'border-radius': '30px',
|
||||
'width': '60px',
|
||||
'height': '60px',
|
||||
'line-height': '60px',
|
||||
'text-align': 'center',
|
||||
'background': '#333',
|
||||
'color': '#fff',
|
||||
'cursor': 'pointer',
|
||||
'font-size': '18px',
|
||||
'box-shadow': '0 0 5px #333',
|
||||
'-webkit-user-select': 'none',
|
||||
'user-select': 'none'
|
||||
});
|
||||
|
||||
var label = controlEl.find('.draggable-label');
|
||||
|
||||
label.css({
|
||||
'display': 'block',
|
||||
'position': 'absolute',
|
||||
'color': '#000',
|
||||
'font-size': '12px',
|
||||
'text-align': 'center',
|
||||
'left': 0,
|
||||
'top': '65px',
|
||||
'width': '60px',
|
||||
'line-height': 1
|
||||
});
|
||||
|
||||
mainEl.css({
|
||||
'position': 'absolute',
|
||||
'left': mainEl[0].offsetLeft + 'px',
|
||||
'top': mainEl[0].offsetTop + 'px',
|
||||
'width': mainEl[0].offsetWidth + 'px',
|
||||
'height': mainEl[0].offsetHeight + 'px',
|
||||
'border-style': 'solid',
|
||||
'border-color': '#ddd',
|
||||
'border-width': BORDER_WIDTH + 'px',
|
||||
'padding': 0,
|
||||
'margin': 0
|
||||
});
|
||||
|
||||
mainEl.parent().append(controlEl);
|
||||
|
||||
var controlSize = controlEl[0].offsetWidth;
|
||||
|
||||
var boxSizing = mainEl.css('box-sizing');
|
||||
|
||||
var borderBoxBroder = boxSizing === 'border-box' ? 2 * BORDER_WIDTH : 0;
|
||||
var mainContentWidth = opt.width || (mainEl.width() + borderBoxBroder);
|
||||
var mainContentHeight = opt.height || (mainEl.height() + borderBoxBroder);
|
||||
|
||||
var mainOffset = mainEl.offset();
|
||||
resize(
|
||||
mainOffset.left + mainContentWidth + BORDER_WIDTH,
|
||||
mainOffset.top + mainContentHeight + BORDER_WIDTH,
|
||||
true
|
||||
);
|
||||
|
||||
var dragging = false;
|
||||
|
||||
controlEl.on('mousedown', function () {
|
||||
dragging = true;
|
||||
});
|
||||
|
||||
$(document).on('mousemove', function (e) {
|
||||
if (dragging) {
|
||||
resize(e.pageX, e.pageY);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseup', function () {
|
||||
dragging = false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
function resize(x, y, isInit) {
|
||||
var mainOffset = mainEl.offset();
|
||||
var mainPosition = mainEl.position();
|
||||
var mainContentWidth = x - mainOffset.left - BORDER_WIDTH;
|
||||
var mainContentHeight = y - mainOffset.top - BORDER_WIDTH;
|
||||
|
||||
if (isInit || !opt.lockX) {
|
||||
controlEl.css(
|
||||
'left',
|
||||
(mainPosition.left + mainContentWidth + BORDER_WIDTH - controlSize / 2) + 'px'
|
||||
);
|
||||
mainEl.css(
|
||||
'width',
|
||||
(mainContentWidth + borderBoxBroder) + 'px'
|
||||
);
|
||||
}
|
||||
|
||||
if (isInit || !opt.lockY) {
|
||||
controlEl.css(
|
||||
'top',
|
||||
(mainPosition.top + mainContentHeight + BORDER_WIDTH - controlSize / 2) + 'px'
|
||||
);
|
||||
mainEl.css(
|
||||
'height',
|
||||
(mainContentHeight + borderBoxBroder) + 'px'
|
||||
);
|
||||
}
|
||||
|
||||
label.text(Math.round(mainContentWidth) + ' x ' + Math.round(mainContentHeight));
|
||||
|
||||
chartResize();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function throttle(fn, delay, trailing, debounce) {
|
||||
|
||||
var currCall = (new Date()).getTime();
|
||||
var lastCall = 0;
|
||||
var lastExec = 0;
|
||||
var timer = null;
|
||||
var diff;
|
||||
var scope;
|
||||
var args;
|
||||
var isSingle = typeof fn === 'function';
|
||||
delay = delay || 0;
|
||||
|
||||
if (isSingle) {
|
||||
return createCallback();
|
||||
}
|
||||
else {
|
||||
var ret = [];
|
||||
for (var i = 0; i < fn.length; i++) {
|
||||
ret[i] = createCallback(i);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function createCallback(index) {
|
||||
|
||||
function exec() {
|
||||
lastExec = (new Date()).getTime();
|
||||
timer = null;
|
||||
(isSingle ? fn : fn[index]).apply(scope, args || []);
|
||||
}
|
||||
|
||||
var cb = function () {
|
||||
currCall = (new Date()).getTime();
|
||||
scope = this;
|
||||
args = arguments;
|
||||
diff = currCall - (debounce ? lastCall : lastExec) - delay;
|
||||
|
||||
clearTimeout(timer);
|
||||
|
||||
if (debounce) {
|
||||
if (trailing) {
|
||||
timer = setTimeout(exec, delay);
|
||||
}
|
||||
else if (diff >= 0) {
|
||||
exec();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (diff >= 0) {
|
||||
exec();
|
||||
}
|
||||
else if (trailing) {
|
||||
timer = setTimeout(exec, -diff);
|
||||
}
|
||||
}
|
||||
|
||||
lastCall = currCall;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear throttle.
|
||||
* @public
|
||||
*/
|
||||
cb.clear = function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
return cb;
|
||||
}
|
||||
}
|
||||
|
||||
})(window);
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
// Just for temporarily mobile debug.
|
||||
|
||||
(function () {
|
||||
|
||||
var infoDom;
|
||||
var msgs = [];
|
||||
|
||||
var count = 0;
|
||||
|
||||
window.facePrint = function (msg, printObj) {
|
||||
if (!infoDom) {
|
||||
infoDom = createInfoDom();
|
||||
}
|
||||
|
||||
if (printObj && isObject(msg)) {
|
||||
msg = window.facePrint.objToStr(msg);
|
||||
}
|
||||
|
||||
msgs.push(encodeHTML(msg));
|
||||
count++;
|
||||
|
||||
if (msgs.length > 30) {
|
||||
msgs.shift();
|
||||
}
|
||||
|
||||
var str = '';
|
||||
// Make some change in view, otherwise user may
|
||||
// be not aware that log is still printing.
|
||||
for (var i = 0; i < msgs.length; i++) {
|
||||
str += msgs[i] + ' ' + (count - msgs.length + i) + ' ';
|
||||
}
|
||||
infoDom.innerHTML = str;
|
||||
};
|
||||
|
||||
window.facePrint.objToStr = function (obj) {
|
||||
var msgArr = [];
|
||||
for (var key in obj) {
|
||||
msgArr.push(key + '=' + obj[key]);
|
||||
}
|
||||
return msgArr.join(', ');
|
||||
};
|
||||
|
||||
function createInfoDom() {
|
||||
var dom = document.createElement('div');
|
||||
|
||||
dom.style.cssText = [
|
||||
'position: fixed;',
|
||||
'top: 0;',
|
||||
'width: 100%;',
|
||||
'border: 1px solid red;',
|
||||
'height: 20px;',
|
||||
'line-height: 20px;',
|
||||
'z-index: 2147483647'
|
||||
].join('');
|
||||
|
||||
document.body.appendChild(dom);
|
||||
|
||||
return dom;
|
||||
}
|
||||
|
||||
function encodeHTML(source) {
|
||||
return source == null
|
||||
? ''
|
||||
: String(source)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function isObject(value) {
|
||||
// Avoid a V8 JIT bug in Chrome 19-20.
|
||||
// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
|
||||
var type = typeof value;
|
||||
return type === 'function' || (!!value && type == 'object');
|
||||
}
|
||||
|
||||
})();
|
||||
+5
File diff suppressed because one or more lines are too long
Vendored
+137
@@ -0,0 +1,137 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="info"></div>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoomInside'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
if (i < 5 && i > 1) {
|
||||
data1.push(0);
|
||||
}
|
||||
else {
|
||||
data1.push(+(Math.random() + 0.5).toFixed(3));
|
||||
}
|
||||
data2.push(+(Math.random() + 0.5).toFixed(3));
|
||||
data3.push(+(Math.random() + 0.5).toFixed(3));
|
||||
}
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
borderColor: 'white',
|
||||
borderWidth: 3,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
lineStyle: {
|
||||
width: 1
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
visualMap: null, // 用于测试 option 中含有null的情况。
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
// inverse: true,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%'
|
||||
},
|
||||
yAxis: {
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'inside',
|
||||
start: 10,
|
||||
end: 30
|
||||
},
|
||||
animation: false,
|
||||
series: [null, // 用于测试 option 中含有null的情况。
|
||||
{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
data: data1,
|
||||
itemStyle: itemStyle
|
||||
}, {
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
data: data2,
|
||||
itemStyle: itemStyle
|
||||
}, {
|
||||
name: 'line3',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbol: 'triangle',
|
||||
symbolSize: 10,
|
||||
data: data3,
|
||||
itemStyle: itemStyle
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+34
@@ -0,0 +1,34 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
chart.showLoading({
|
||||
text: '暂无数据'
|
||||
});
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+73
@@ -0,0 +1,73 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<script src='esl.js'></script>
|
||||
<script src='config.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id='main'></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/title',
|
||||
'echarts/component/dataZoom',
|
||||
|
||||
'echarts/scale/Log'
|
||||
], function (echarts) {
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
chart.setOption({
|
||||
title: {
|
||||
text: '对数轴示例',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}'
|
||||
},
|
||||
legend: {
|
||||
left: 'left',
|
||||
data: ['2的指数', '3的指数']
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
name: 'x',
|
||||
splitLine: {show: false},
|
||||
data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'log',
|
||||
name: 'y'
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '3的指数',
|
||||
type: 'line',
|
||||
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
|
||||
},
|
||||
{
|
||||
name: '2的指数',
|
||||
type: 'line',
|
||||
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
|
||||
},
|
||||
{
|
||||
name: '0.1 的指数',
|
||||
type: 'line',
|
||||
data: [1, 0.1, 0.01, 1e-3, 1e-4, 1e-5, 1e-6, 1e-7, 1e-8]
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/map',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/geo'
|
||||
], function (echarts) {
|
||||
|
||||
require(['map/js/china-contour', 'map/js/china'], function (contour) {
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var itemStyle = {
|
||||
normal:{
|
||||
borderColor: 'rgba(0, 0, 0, 0.2)'
|
||||
},
|
||||
emphasis:{
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
borderWidth: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: 'iphone销量',
|
||||
subtext: '纯属虚构',
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data:['iphone3','iphone4','iphone5']
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1500,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text:['高','低'], // 文本，默认为数值文本
|
||||
calculable : true
|
||||
},
|
||||
selectedMode: 'single',
|
||||
geo: [
|
||||
{
|
||||
name: 'detail',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: [],
|
||||
roam: true
|
||||
},
|
||||
{
|
||||
name: 'contour',
|
||||
type: 'map',
|
||||
roam: true,
|
||||
map: 'china-contour',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#000',
|
||||
areaColor: 'transparent',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series : []
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+193
@@ -0,0 +1,193 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/facePrint.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/map',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/markPoint'
|
||||
], function (echarts) {
|
||||
|
||||
require(['map/js/china'], function () {
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var itemStyle = {
|
||||
normal:{
|
||||
borderColor: 'rgba(0, 0, 0, 0.2)'
|
||||
},
|
||||
emphasis:{
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
borderWidth: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: 'iphone销量',
|
||||
subtext: '纯属虚构',
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data:['iphone3','iphone4','iphone5']
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1500,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text:['高','低'], // 文本，默认为数值文本
|
||||
calculable : true
|
||||
},
|
||||
selectedMode: 'single',
|
||||
series : [
|
||||
{
|
||||
name: 'iphone3',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
itemStyle: itemStyle,
|
||||
showLegendSymbol: true,
|
||||
zoom: 10,
|
||||
roam: true,
|
||||
center: [115.97, 29.71],
|
||||
markPoint: {
|
||||
data: [{
|
||||
coord: [115.97, 29.71]
|
||||
}]
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{name: '北京',value: Math.round(Math.random()*1000)},
|
||||
{name: '天津',value: Math.round(Math.random()*1000)},
|
||||
{name: '上海',value: Math.round(Math.random()*1000)},
|
||||
{name: '重庆',value: Math.round(Math.random()*1000)},
|
||||
{name: '河北',value: Math.round(Math.random()*1000)},
|
||||
{name: '河南',value: Math.round(Math.random()*1000)},
|
||||
{name: '云南',value: Math.round(Math.random()*1000)},
|
||||
{name: '辽宁',value: Math.round(Math.random()*1000)},
|
||||
{name: '黑龙江',value: Math.round(Math.random()*1000)},
|
||||
{name: '湖南',value: Math.round(Math.random()*1000)},
|
||||
{name: '安徽',value: Math.round(Math.random()*1000)},
|
||||
{name: '山东',value: Math.round(Math.random()*1000)},
|
||||
{name: '新疆',value: Math.round(Math.random()*1000)},
|
||||
{name: '江苏',value: Math.round(Math.random()*1000)},
|
||||
{name: '浙江',value: Math.round(Math.random()*1000)},
|
||||
{name: '江西',value: Math.round(Math.random()*1000)},
|
||||
{name: '湖北',value: Math.round(Math.random()*1000)},
|
||||
{name: '广西',value: Math.round(Math.random()*1000)},
|
||||
{name: '甘肃',value: Math.round(Math.random()*1000)},
|
||||
{name: '山西',value: Math.round(Math.random()*1000)},
|
||||
{name: '内蒙古',value: Math.round(Math.random()*1000)},
|
||||
{name: '陕西',value: Math.round(Math.random()*1000)},
|
||||
{name: '吉林',value: Math.round(Math.random()*1000)},
|
||||
{name: '福建',value: Math.round(Math.random()*1000)},
|
||||
{name: '贵州',value: Math.round(Math.random()*1000)},
|
||||
{name: '广东',value: Math.round(Math.random()*1000)},
|
||||
{name: '青海',value: Math.round(Math.random()*1000)},
|
||||
{name: '西藏',value: Math.round(Math.random()*1000)},
|
||||
{name: '四川',value: Math.round(Math.random()*1000)},
|
||||
{name: '宁夏',value: Math.round(Math.random()*1000)},
|
||||
{name: '海南',value: Math.round(Math.random()*1000)},
|
||||
{name: '台湾',value: Math.round(Math.random()*1000)},
|
||||
{name: '香港',value: Math.round(Math.random()*1000)},
|
||||
{name: '澳门',value: Math.round(Math.random()*1000)}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'iphone4',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
itemStyle: itemStyle,
|
||||
showLegendSymbol: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{name: '北京',value: Math.round(Math.random()*1000)},
|
||||
{name: '天津',value: Math.round(Math.random()*1000)},
|
||||
{name: '上海',value: Math.round(Math.random()*1000)},
|
||||
{name: '重庆',value: Math.round(Math.random()*1000)},
|
||||
{name: '河北',value: Math.round(Math.random()*1000)},
|
||||
{name: '安徽',value: Math.round(Math.random()*1000)},
|
||||
{name: '新疆',value: Math.round(Math.random()*1000)},
|
||||
{name: '浙江',value: Math.round(Math.random()*1000)},
|
||||
{name: '江西',value: Math.round(Math.random()*1000)},
|
||||
{name: '山西',value: Math.round(Math.random()*1000)},
|
||||
{name: '内蒙古',value: Math.round(Math.random()*1000)},
|
||||
{name: '吉林',value: Math.round(Math.random()*1000)},
|
||||
{name: '福建',value: Math.round(Math.random()*1000)},
|
||||
{name: '广东',value: Math.round(Math.random()*1000)},
|
||||
{name: '西藏',value: Math.round(Math.random()*1000)},
|
||||
{name: '四川',value: Math.round(Math.random()*1000)},
|
||||
{name: '宁夏',value: Math.round(Math.random()*1000)},
|
||||
{name: '香港',value: Math.round(Math.random()*1000)},
|
||||
{name: '澳门',value: Math.round(Math.random()*1000)}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'iphone5',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
itemStyle: itemStyle,
|
||||
showLegendSymbol: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{name: '北京',value: Math.round(Math.random()*1000)},
|
||||
{name: '天津',value: Math.round(Math.random()*1000)},
|
||||
{name: '上海',value: Math.round(Math.random()*1000)},
|
||||
{name: '广东',value: Math.round(Math.random()*1000)},
|
||||
{name: '台湾',value: Math.round(Math.random()*1000)},
|
||||
{name: '香港',value: Math.round(Math.random()*1000)},
|
||||
{name: '澳门',value: Math.round(Math.random()*1000)}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+269
@@ -0,0 +1,269 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/map',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/geo',
|
||||
'echarts/component/visualMap'
|
||||
], function (echarts) {
|
||||
|
||||
$.get('../map/json/world.json', function (worldJson) {
|
||||
echarts.registerMap('world', worldJson);
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var itemStyle = {
|
||||
normal:{
|
||||
borderWidth: 0.5,
|
||||
borderColor: 'black'
|
||||
},
|
||||
emphasis:{
|
||||
label:{show:true}
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowBlur: 20,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
title : {
|
||||
text: 'World Population (2010)',
|
||||
subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
|
||||
sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
|
||||
left: 'center',
|
||||
top: 'top'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter : function (params) {
|
||||
var value = (params.value + '').split('.');
|
||||
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
|
||||
+ '.' + value[1];
|
||||
return params.seriesName + '<br/>' + params.name + ' : ' + value;
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000000,
|
||||
text:['High','Low'],
|
||||
realtime: true,
|
||||
calculable : true,
|
||||
color: ['orangered','yellow','lightskyblue']
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: 'World Population (2010)',
|
||||
type: 'map',
|
||||
map: 'world',
|
||||
roam: true,
|
||||
top: 60,
|
||||
width: '80%',
|
||||
itemStyle: itemStyle,
|
||||
data:[
|
||||
{name : 'Afghanistan', value : 28397.812},
|
||||
{name : 'Angola', value : 19549.124},
|
||||
{name : 'Albania', value : 3150.143},
|
||||
{name : 'United Arab Emirates', value : 8441.537},
|
||||
{name : 'Argentina', value : 40374.224},
|
||||
{name : 'Armenia', value : 2963.496},
|
||||
{name : 'French Southern and Antarctic Lands', value : 268.065},
|
||||
{name : 'Australia', value : 22404.488},
|
||||
{name : 'Austria', value : 8401.924},
|
||||
{name : 'Azerbaijan', value : 9094.718},
|
||||
{name : 'Burundi', value : 9232.753},
|
||||
{name : 'Belgium', value : 10941.288},
|
||||
{name : 'Benin', value : 9509.798},
|
||||
{name : 'Burkina Faso', value : 15540.284},
|
||||
{name : 'Bangladesh', value : 151125.475},
|
||||
{name : 'Bulgaria', value : 7389.175},
|
||||
{name : 'The Bahamas', value : 66402.316},
|
||||
{name : 'Bosnia and Herzegovina', value : 3845.929},
|
||||
{name : 'Belarus', value : 9491.07},
|
||||
{name : 'Belize', value : 308.595},
|
||||
{name : 'Bermuda', value : 64.951},
|
||||
{name : 'Bolivia', value : 716.939},
|
||||
{name : 'Brazil', value : 195210.154},
|
||||
{name : 'Brunei', value : 27.223},
|
||||
{name : 'Bhutan', value : 716.939},
|
||||
{name : 'Botswana', value : 1969.341},
|
||||
{name : 'Central African Republic', value : 4349.921},
|
||||
{name : 'Canada', value : 34126.24},
|
||||
{name : 'Switzerland', value : 7830.534},
|
||||
{name : 'Chile', value : 17150.76},
|
||||
{name : 'China', value : 1359821.465},
|
||||
{name : 'Ivory Coast', value : 60508.978},
|
||||
{name : 'Cameroon', value : 20624.343},
|
||||
{name : 'Democratic Republic of the Congo', value : 62191.161},
|
||||
{name : 'Republic of the Congo', value : 3573.024},
|
||||
{name : 'Colombia', value : 46444.798},
|
||||
{name : 'Costa Rica', value : 4669.685},
|
||||
{name : 'Cuba', value : 11281.768},
|
||||
{name : 'Northern Cyprus', value : 1.468},
|
||||
{name : 'Cyprus', value : 1103.685},
|
||||
{name : 'Czech Republic', value : 10553.701},
|
||||
{name : 'Germany', value : 83017.404},
|
||||
{name : 'Djibouti', value : 834.036},
|
||||
{name : 'Denmark', value : 5550.959},
|
||||
{name : 'Dominican Republic', value : 10016.797},
|
||||
{name : 'Algeria', value : 37062.82},
|
||||
{name : 'Ecuador', value : 15001.072},
|
||||
{name : 'Egypt', value : 78075.705},
|
||||
{name : 'Eritrea', value : 5741.159},
|
||||
{name : 'Spain', value : 46182.038},
|
||||
{name : 'Estonia', value : 1298.533},
|
||||
{name : 'Ethiopia', value : 87095.281},
|
||||
{name : 'Finland', value : 5367.693},
|
||||
{name : 'Fiji', value : 860.559},
|
||||
{name : 'Falkland Islands', value : 49.581},
|
||||
{name : 'France', value : 63230.866},
|
||||
{name : 'Gabon', value : 1556.222},
|
||||
{name : 'United Kingdom', value : 62066.35},
|
||||
{name : 'Georgia', value : 4388.674},
|
||||
{name : 'Ghana', value : 24262.901},
|
||||
{name : 'Guinea', value : 10876.033},
|
||||
{name : 'Gambia', value : 1680.64},
|
||||
{name : 'Guinea Bissau', value : 10876.033},
|
||||
{name : 'Equatorial Guinea', value : 696.167},
|
||||
{name : 'Greece', value : 11109.999},
|
||||
{name : 'Greenland', value : 56.546},
|
||||
{name : 'Guatemala', value : 14341.576},
|
||||
{name : 'French Guiana', value : 231.169},
|
||||
{name : 'Guyana', value : 786.126},
|
||||
{name : 'Honduras', value : 7621.204},
|
||||
{name : 'Croatia', value : 4338.027},
|
||||
{name : 'Haiti', value : 9896.4},
|
||||
{name : 'Hungary', value : 10014.633},
|
||||
{name : 'Indonesia', value : 240676.485},
|
||||
{name : 'India', value : 1205624.648},
|
||||
{name : 'Ireland', value : 4467.561},
|
||||
{name : 'Iran', value : 240676.485},
|
||||
{name : 'Iraq', value : 30962.38},
|
||||
{name : 'Iceland', value : 318.042},
|
||||
{name : 'Israel', value : 7420.368},
|
||||
{name : 'Italy', value : 60508.978},
|
||||
{name : 'Jamaica', value : 2741.485},
|
||||
{name : 'Jordan', value : 6454.554},
|
||||
{name : 'Japan', value : 127352.833},
|
||||
{name : 'Kazakhstan', value : 15921.127},
|
||||
{name : 'Kenya', value : 40909.194},
|
||||
{name : 'Kyrgyzstan', value : 5334.223},
|
||||
{name : 'Cambodia', value : 14364.931},
|
||||
{name : 'South Korea', value : 51452.352},
|
||||
{name : 'Kosovo', value : 97.743},
|
||||
{name : 'Kuwait', value : 2991.58},
|
||||
{name : 'Laos', value : 6395.713},
|
||||
{name : 'Lebanon', value : 4341.092},
|
||||
{name : 'Liberia', value : 3957.99},
|
||||
{name : 'Libya', value : 6040.612},
|
||||
{name : 'Sri Lanka', value : 20758.779},
|
||||
{name : 'Lesotho', value : 2008.921},
|
||||
{name : 'Lithuania', value : 3068.457},
|
||||
{name : 'Luxembourg', value : 507.885},
|
||||
{name : 'Latvia', value : 2090.519},
|
||||
{name : 'Morocco', value : 31642.36},
|
||||
{name : 'Moldova', value : 103.619},
|
||||
{name : 'Madagascar', value : 21079.532},
|
||||
{name : 'Mexico', value : 117886.404},
|
||||
{name : 'Macedonia', value : 507.885},
|
||||
{name : 'Mali', value : 13985.961},
|
||||
{name : 'Myanmar', value : 51931.231},
|
||||
{name : 'Montenegro', value : 620.078},
|
||||
{name : 'Mongolia', value : 2712.738},
|
||||
{name : 'Mozambique', value : 23967.265},
|
||||
{name : 'Mauritania', value : 3609.42},
|
||||
{name : 'Malawi', value : 15013.694},
|
||||
{name : 'Malaysia', value : 28275.835},
|
||||
{name : 'Namibia', value : 2178.967},
|
||||
{name : 'New Caledonia', value : 246.379},
|
||||
{name : 'Niger', value : 15893.746},
|
||||
{name : 'Nigeria', value : 159707.78},
|
||||
{name : 'Nicaragua', value : 5822.209},
|
||||
{name : 'Netherlands', value : 16615.243},
|
||||
{name : 'Norway', value : 4891.251},
|
||||
{name : 'Nepal', value : 26846.016},
|
||||
{name : 'New Zealand', value : 4368.136},
|
||||
{name : 'Oman', value : 2802.768},
|
||||
{name : 'Pakistan', value : 173149.306},
|
||||
{name : 'Panama', value : 3678.128},
|
||||
{name : 'Peru', value : 29262.83},
|
||||
{name : 'Philippines', value : 93444.322},
|
||||
{name : 'Papua New Guinea', value : 6858.945},
|
||||
{name : 'Poland', value : 38198.754},
|
||||
{name : 'Puerto Rico', value : 3709.671},
|
||||
{name : 'North Korea', value : 1.468},
|
||||
{name : 'Portugal', value : 10589.792},
|
||||
{name : 'Paraguay', value : 6459.721},
|
||||
{name : 'Qatar', value : 1749.713},
|
||||
{name : 'Romania', value : 21861.476},
|
||||
{name : 'Russia', value : 21861.476},
|
||||
{name : 'Rwanda', value : 10836.732},
|
||||
{name : 'Western Sahara', value : 514.648},
|
||||
{name : 'Saudi Arabia', value : 27258.387},
|
||||
{name : 'Sudan', value : 35652.002},
|
||||
{name : 'South Sudan', value : 9940.929},
|
||||
{name : 'Senegal', value : 12950.564},
|
||||
{name : 'Solomon Islands', value : 526.447},
|
||||
{name : 'Sierra Leone', value : 5751.976},
|
||||
{name : 'El Salvador', value : 6218.195},
|
||||
{name : 'Somaliland', value : 9636.173},
|
||||
{name : 'Somalia', value : 9636.173},
|
||||
{name : 'Republic of Serbia', value : 3573.024},
|
||||
{name : 'Suriname', value : 524.96},
|
||||
{name : 'Slovakia', value : 5433.437},
|
||||
{name : 'Slovenia', value : 2054.232},
|
||||
{name : 'Sweden', value : 9382.297},
|
||||
{name : 'Swaziland', value : 1193.148},
|
||||
{name : 'Syria', value : 7830.534},
|
||||
{name : 'Chad', value : 11720.781},
|
||||
{name : 'Togo', value : 6306.014},
|
||||
{name : 'Thailand', value : 66402.316},
|
||||
{name : 'Tajikistan', value : 7627.326},
|
||||
{name : 'Turkmenistan', value : 5041.995},
|
||||
{name : 'East Timor', value : 10016.797},
|
||||
{name : 'Trinidad and Tobago', value : 1328.095},
|
||||
{name : 'Tunisia', value : 10631.83},
|
||||
{name : 'Turkey', value : 72137.546},
|
||||
{name : 'United Republic of Tanzania', value : 44973.33},
|
||||
{name : 'Uganda', value : 33987.213},
|
||||
{name : 'Ukraine', value : 46050.22},
|
||||
{name : 'Uruguay', value : 3371.982},
|
||||
{name : 'United States of America', value : 312247.116},
|
||||
{name : 'Uzbekistan', value : 27769.27},
|
||||
{name : 'Venezuela', value : 236.299},
|
||||
{name : 'Vietnam', value : 89047.397},
|
||||
{name : 'Vanuatu', value : 236.299},
|
||||
{name : 'West Bank', value : 13.565},
|
||||
{name : 'Yemen', value : 22763.008},
|
||||
{name : 'South Africa', value : 51452.352},
|
||||
{name : 'Zambia', value : 13216.985},
|
||||
{name : 'Zimbabwe', value : 13076.978}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+121
@@ -0,0 +1,121 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(+Math.random().toFixed(2));
|
||||
data2.push(+Math.random().toFixed(2));
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: true,
|
||||
// inverse: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 6,
|
||||
data: data1,
|
||||
|
||||
markLine: {
|
||||
data: [{
|
||||
name: '平均值',
|
||||
type: 'average',
|
||||
valueIndex: 1
|
||||
}, {
|
||||
name: '指定值',
|
||||
yAxis: 1
|
||||
}, [{
|
||||
name: '标签位置为中间',
|
||||
type: 'min',
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'middle'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '标签位置为中间',
|
||||
type: 'max'
|
||||
}]]
|
||||
}
|
||||
}, {
|
||||
name: 'line2',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 6,
|
||||
data: data2,
|
||||
|
||||
markLine: {
|
||||
data: [{
|
||||
name: '平均值',
|
||||
type: 'average',
|
||||
valueIndex: 0
|
||||
}, {
|
||||
name: '指定值',
|
||||
xAxis: 3
|
||||
}]
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params, params.data);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+191
@@ -0,0 +1,191 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push(+Math.random().toFixed(2));
|
||||
data2.push(+Math.random().toFixed(2));
|
||||
}
|
||||
|
||||
if (console && console.log) {
|
||||
console.log(data1);
|
||||
console.log(data2);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line-stack', 'line2-stack', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
// inverse: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line-stack',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 6,
|
||||
areaStyle: {normal: {}},
|
||||
data: data1,
|
||||
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: '最大值',
|
||||
type: 'max',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
xAxis: '类目3',
|
||||
yAxis: 0.5,
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'line2-stack',
|
||||
type: 'line',
|
||||
stack: 'all',
|
||||
symbolSize: 6,
|
||||
areaStyle: {normal: {}},
|
||||
data: data2,
|
||||
|
||||
markPoint: {
|
||||
label: {
|
||||
normal: {
|
||||
formatter: function (param) {
|
||||
return param.name + ' ' + param.value;
|
||||
},
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '最小值stack',
|
||||
type: 'min',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '最大值stack',
|
||||
type: 'max',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '平均值stack',
|
||||
type: 'average',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'line3',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
data: data2,
|
||||
|
||||
markPoint: {
|
||||
label: {
|
||||
normal: {
|
||||
formatter: function (param) {
|
||||
return param.name + ' ' + param.value;
|
||||
},
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '000000000',
|
||||
coord: ['类目2', 0.6],
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '最小值',
|
||||
type: 'min',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '最大值x',
|
||||
type: 'max',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '最大值y',
|
||||
type: 'max',
|
||||
valueIndex: 0,
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '平均值',
|
||||
type: 'average',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params, params.data);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/title',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
$.get('data/masterPainterColorChoice.json', function (json) {
|
||||
|
||||
var data = json[0].x.map(function (x, idx) {
|
||||
return [+x, +json[0].y[idx]];
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
title: {
|
||||
text: 'Master Painter Color Choices Throughout History',
|
||||
subtext: 'Data From Plot.ly',
|
||||
x: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
scale: true,
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
formatter: function (val) {
|
||||
return val + 's';
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 360,
|
||||
splitNumber: 6,
|
||||
name: 'Hue',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: function (val, param) {
|
||||
return json[0].marker.size[param.dataIndex] / json[0].marker.sizeref;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (param) {
|
||||
return json[0].marker.color[param.dataIndex];
|
||||
}
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+196
@@ -0,0 +1,196 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/draggable.js"></script>
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 700px;
|
||||
height: 650px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<script src="data/timelineGDP.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/dataZoom'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
draggable.init(
|
||||
document.getElementById('main'),
|
||||
chart,
|
||||
{throttle: 70}
|
||||
);
|
||||
|
||||
var data1 = [];
|
||||
|
||||
var random = function (max) {
|
||||
return (Math.random() * max).toFixed(3);
|
||||
};
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data1.push([random(15), random(10), random(1)]);
|
||||
}
|
||||
|
||||
option = {
|
||||
baseOption: {
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
dataView: {},
|
||||
dataZoom: {show: true},
|
||||
restore: {show: true},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'sliderX',
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 10,
|
||||
end: 70
|
||||
},
|
||||
{
|
||||
id: 'sliderY',
|
||||
show: true,
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 10,
|
||||
end: 70
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.8
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 40;
|
||||
},
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
},
|
||||
media: [
|
||||
{
|
||||
query: {maxWidth: 450},
|
||||
option: {
|
||||
dataZoom: [
|
||||
{id: 'sliderY', width: 10}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {minWidth: 450},
|
||||
option: {
|
||||
dataZoom: [
|
||||
{id: 'sliderY', width: 40}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {maxHeight: 450},
|
||||
option: {
|
||||
dataZoom: [
|
||||
{id: 'sliderX', height: 10}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {minHeight: 450},
|
||||
option: {
|
||||
dataZoom: [
|
||||
{id: 'sliderX', height: 40}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
chart.on('legendSelected', function () {
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+548
@@ -0,0 +1,548 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/draggable.js"></script>
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 700px;
|
||||
height: 650px;
|
||||
background: #fff;
|
||||
}
|
||||
.code-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 200px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
.code-line {
|
||||
margin: 15px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.code-line textarea{
|
||||
width: 190px;
|
||||
height: 80px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<div class="code-panel">
|
||||
<div class="code-line">
|
||||
<textarea id="code1">
|
||||
chart.setOption({backgroundColor: '#000'});
|
||||
</textarea>
|
||||
<input type="button" value="run" onclick="runCode('code1');"/>
|
||||
Then press restore buttton.
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<textarea id="code2">
|
||||
chart.setOption({backgroundColor: '#fff'});
|
||||
</textarea>
|
||||
<input type="button" value="run" onclick="runCode('code2');"/>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<textarea id="code3">
|
||||
chart.setOption({
|
||||
series: [
|
||||
{id: 'pie0', label: {normal: {position: 'inside'}}}
|
||||
]
|
||||
});
|
||||
</textarea>
|
||||
<input type="button" value="run" onclick="runCode('code3');"/>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<textarea id="code4">
|
||||
chart.setOption({
|
||||
timeline: {
|
||||
currentIndex: 5
|
||||
}
|
||||
});
|
||||
</textarea>
|
||||
<input type="button" value="run" onclick="runCode('code4');"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="data/timelineGDP.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var chart;
|
||||
var echarts;
|
||||
|
||||
// markLine: {
|
||||
// symbol: ['arrow','none'],
|
||||
// symbolSize: [4, 2],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// lineStyle: {color:'orange'},
|
||||
// barBorderColor:'orange',
|
||||
// label: {
|
||||
// position:'left',
|
||||
// formatter:function(params){
|
||||
// return Math.round(params.value);
|
||||
// },
|
||||
// textStyle:{color:'orange'}
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [{type: 'average', name: '平均值'}]
|
||||
// }
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/timeline',
|
||||
'echarts/component/toolbox'
|
||||
], function (ec) {
|
||||
echarts = ec;
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
draggable.init(
|
||||
document.getElementById('main'),
|
||||
chart,
|
||||
{throttle: 70}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var categoryData = [
|
||||
'北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江',
|
||||
'上海','江苏','浙江','安徽','福建','江西','山东','河南',
|
||||
'湖北','湖南','广东','广西','海南','重庆','四川','贵州',
|
||||
'云南','西藏','陕西','甘肃','青海','宁夏','新疆'
|
||||
];
|
||||
var categoryDataWithReturn = [];
|
||||
for (var i = 0; i < categoryData.length; i++) {
|
||||
var word = categoryData[i];
|
||||
if (i % 2 === 0) {
|
||||
word = '\n' + word;
|
||||
}
|
||||
categoryDataWithReturn.push(word);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var categoryData = [
|
||||
'北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江',
|
||||
'上海','江苏','浙江','安徽','福建','江西','山东','河南',
|
||||
'湖北','湖南','广东','广西','海南','重庆','四川','贵州',
|
||||
'云南','西藏','陕西','甘肃','青海','宁夏','新疆'
|
||||
];
|
||||
|
||||
|
||||
option = {
|
||||
baseOption: {
|
||||
timeline: {
|
||||
axisType: 'category',
|
||||
autoPlay: true,
|
||||
playInterval: 1000,
|
||||
data: [
|
||||
'2002-01-01', '2003-01-01', '2004-01-01',
|
||||
'2005-01-01', '2006-01-01', '2007-01-01',
|
||||
'2008-01-01', '2009-01-01', '2010-01-01',
|
||||
'2011-01-01'
|
||||
],
|
||||
label: {
|
||||
formatter : function(s) {
|
||||
return (new Date(s)).getFullYear();
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
feature: {
|
||||
restore: {}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
subtext: 'Media Query 示例'
|
||||
},
|
||||
tooltip: {
|
||||
trigger:'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'GDP（亿元）',
|
||||
max: 30000,
|
||||
data: null
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: categoryData,
|
||||
axisLabel: {interval: 0},
|
||||
splitLine: {show: false}
|
||||
},
|
||||
legend: {
|
||||
data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
|
||||
selected: {
|
||||
'GDP': false, '金融': false, '房地产': false
|
||||
}
|
||||
},
|
||||
calculable : true,
|
||||
series: [
|
||||
{name: 'GDP', type: 'bar'},
|
||||
{name: '金融', type: 'bar'},
|
||||
{name: '房地产', type: 'bar'},
|
||||
{name: '第一产业', type: 'bar'},
|
||||
{name: '第二产业', type: 'bar'},
|
||||
{name: '第三产业', type: 'bar'},
|
||||
{name: 'GDP占比', type: 'pie', id: 'pie0'}
|
||||
]
|
||||
},
|
||||
media: [
|
||||
{
|
||||
option: {
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 'right',
|
||||
itemGap: 10
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: 80,
|
||||
right: 90,
|
||||
bottom: 100
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto'
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
show: true,
|
||||
orient: 'horizontal',
|
||||
inverse: false,
|
||||
left: '20%',
|
||||
right: '20%',
|
||||
bottom: 10,
|
||||
height: 40
|
||||
},
|
||||
series: [
|
||||
{name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {maxWidth: 670, minWidth: 550},
|
||||
option: {
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 200,
|
||||
itemGap: 5
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: 80,
|
||||
right: 90,
|
||||
bottom: 100
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
splitLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 'auto'
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
show: true,
|
||||
orient: 'horizontal',
|
||||
inverse: false,
|
||||
left: '20%',
|
||||
right: '20%',
|
||||
bottom: 10,
|
||||
height: 40
|
||||
},
|
||||
series: [
|
||||
{name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {maxWidth: 550},
|
||||
option: {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
itemGap: 5
|
||||
},
|
||||
grid: {
|
||||
left: 55,
|
||||
top: '32%',
|
||||
right: 100,
|
||||
bottom: 50
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
nameGap: 25,
|
||||
axisLabel: {
|
||||
interval: 1
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
inverse: true,
|
||||
right: 10,
|
||||
top: 150,
|
||||
bottom: 10,
|
||||
width: 55
|
||||
},
|
||||
series: [
|
||||
{name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {maxWidth: 350},
|
||||
option: {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
itemGap: 5
|
||||
},
|
||||
grid: {
|
||||
left: 55,
|
||||
top: '32%',
|
||||
right: 100,
|
||||
bottom: 50
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
nameGap: 25,
|
||||
axisLabel: {
|
||||
interval: 1
|
||||
}
|
||||
},
|
||||
timeline: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
options: [
|
||||
{
|
||||
title: {text: '2002全国宏观经济指标'},
|
||||
series: [
|
||||
{data: dataMap.dataGDP['2002']},
|
||||
{data: dataMap.dataFinancial['2002']},
|
||||
{data: dataMap.dataEstate['2002']},
|
||||
{data: dataMap.dataPI['2002']},
|
||||
{data: dataMap.dataSI['2002']},
|
||||
{data: dataMap.dataTI['2002']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2002sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2002sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2002sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2003全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2003']},
|
||||
{data: dataMap.dataFinancial['2003']},
|
||||
{data: dataMap.dataEstate['2003']},
|
||||
{data: dataMap.dataPI['2003']},
|
||||
{data: dataMap.dataSI['2003']},
|
||||
{data: dataMap.dataTI['2003']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2003sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2003sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2003sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2004全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2004']},
|
||||
{data: dataMap.dataFinancial['2004']},
|
||||
{data: dataMap.dataEstate['2004']},
|
||||
{data: dataMap.dataPI['2004']},
|
||||
{data: dataMap.dataSI['2004']},
|
||||
{data: dataMap.dataTI['2004']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2004sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2004sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2004sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2005全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2005']},
|
||||
{data: dataMap.dataFinancial['2005']},
|
||||
{data: dataMap.dataEstate['2005']},
|
||||
{data: dataMap.dataPI['2005']},
|
||||
{data: dataMap.dataSI['2005']},
|
||||
{data: dataMap.dataTI['2005']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2005sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2005sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2005sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2006全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2006']},
|
||||
{data: dataMap.dataFinancial['2006']},
|
||||
{data: dataMap.dataEstate['2006']},
|
||||
{data: dataMap.dataPI['2006']},
|
||||
{data: dataMap.dataSI['2006']},
|
||||
{data: dataMap.dataTI['2006']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2006sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2006sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2006sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2007全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2007']},
|
||||
{data: dataMap.dataFinancial['2007']},
|
||||
{data: dataMap.dataEstate['2007']},
|
||||
{data: dataMap.dataPI['2007']},
|
||||
{data: dataMap.dataSI['2007']},
|
||||
{data: dataMap.dataTI['2007']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2007sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2007sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2007sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2008全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2008']},
|
||||
{data: dataMap.dataFinancial['2008']},
|
||||
{data: dataMap.dataEstate['2008']},
|
||||
{data: dataMap.dataPI['2008']},
|
||||
{data: dataMap.dataSI['2008']},
|
||||
{data: dataMap.dataTI['2008']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2008sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2008sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2008sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2009全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2009']},
|
||||
{data: dataMap.dataFinancial['2009']},
|
||||
{data: dataMap.dataEstate['2009']},
|
||||
{data: dataMap.dataPI['2009']},
|
||||
{data: dataMap.dataSI['2009']},
|
||||
{data: dataMap.dataTI['2009']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2009sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2009sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2009sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2010全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2010']},
|
||||
{data: dataMap.dataFinancial['2010']},
|
||||
{data: dataMap.dataEstate['2010']},
|
||||
{data: dataMap.dataPI['2010']},
|
||||
{data: dataMap.dataSI['2010']},
|
||||
{data: dataMap.dataTI['2010']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2010sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2010sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2010sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
},
|
||||
{
|
||||
title : {text: '2011全国宏观经济指标'},
|
||||
series : [
|
||||
{data: dataMap.dataGDP['2011']},
|
||||
{data: dataMap.dataFinancial['2011']},
|
||||
{data: dataMap.dataEstate['2011']},
|
||||
{data: dataMap.dataPI['2011']},
|
||||
{data: dataMap.dataSI['2011']},
|
||||
{data: dataMap.dataTI['2011']},
|
||||
{data: [
|
||||
{name: '第一产业', value: dataMap.dataPI['2011sum']},
|
||||
{name: '第二产业', value: dataMap.dataSI['2011sum']},
|
||||
{name: '第三产业', value: dataMap.dataTI['2011sum']}
|
||||
], id: 'pie0'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
chart.on('legendSelected', function () {
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function runCode(id) {
|
||||
var textarea = document.getElementById(id);
|
||||
var code = textarea.value;
|
||||
(new Function('chart', 'echarts', code))(chart, echarts);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+237
@@ -0,0 +1,237 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/draggable.js"></script>
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 700px;
|
||||
height: 650px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<script src="data/timelineGDP.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
draggable.init(
|
||||
document.getElementById('main'),
|
||||
chart,
|
||||
{throttle: 70}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
option = {
|
||||
baseOption: {
|
||||
title : {
|
||||
text: '南丁格尔玫瑰图',
|
||||
subtext: '纯属虚构',
|
||||
x:'center'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
mark : {show: true},
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {
|
||||
show: true,
|
||||
type: ['pie', 'funnel']
|
||||
},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
calculable : true,
|
||||
series : [
|
||||
{
|
||||
name:'半径模式',
|
||||
type:'pie',
|
||||
roseType : 'radius',
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lableLine: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:10, name:'rose1'},
|
||||
{value:5, name:'rose2'},
|
||||
{value:15, name:'rose3'},
|
||||
{value:25, name:'rose4'},
|
||||
{value:20, name:'rose5'},
|
||||
{value:35, name:'rose6'},
|
||||
{value:30, name:'rose7'},
|
||||
{value:40, name:'rose8'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'面积模式',
|
||||
type:'pie',
|
||||
roseType : 'area',
|
||||
data:[
|
||||
{value:10, name:'rose1'},
|
||||
{value:5, name:'rose2'},
|
||||
{value:15, name:'rose3'},
|
||||
{value:25, name:'rose4'},
|
||||
{value:20, name:'rose5'},
|
||||
{value:35, name:'rose6'},
|
||||
{value:30, name:'rose7'},
|
||||
{value:40, name:'rose8'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
media: [
|
||||
{
|
||||
option: {
|
||||
legend: {
|
||||
right: 'center',
|
||||
bottom: 0,
|
||||
orient: 'horizontal'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
radius: [20, 110],
|
||||
center: ['25%', 200]
|
||||
},
|
||||
{
|
||||
radius: [30, 110],
|
||||
center: ['75%', 200]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {
|
||||
minAspectRatio: 1
|
||||
},
|
||||
option: {
|
||||
legend: {
|
||||
right: 'center',
|
||||
bottom: 0,
|
||||
orient: 'horizontal'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
radius: [20, 110],
|
||||
center: ['25%', 200]
|
||||
},
|
||||
{
|
||||
radius: [30, 110],
|
||||
center: ['75%', 200]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {
|
||||
maxAspectRatio: 1
|
||||
},
|
||||
option: {
|
||||
legend: {
|
||||
right: 'center',
|
||||
bottom: 0,
|
||||
orient: 'horizontal'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
radius: [20, 110],
|
||||
center: [200, '30%']
|
||||
},
|
||||
{
|
||||
radius: [30, 110],
|
||||
center: [200, '70%']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
query: {
|
||||
maxWidth: 500
|
||||
},
|
||||
option: {
|
||||
legend: {
|
||||
right: 10,
|
||||
top: '15%',
|
||||
orient: 'vertical'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
radius: [20, 110],
|
||||
center: [200, '30%']
|
||||
},
|
||||
{
|
||||
radius: [30, 110],
|
||||
center: [200, '75%']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
chart.on('legendSelected', function () {
|
||||
});
|
||||
|
||||
window.onresize = chart.resize;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+85
@@ -0,0 +1,85 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['蒸发量','降水量','平均温度']
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
name : '水量',
|
||||
axisLabel : {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'value',
|
||||
name : '温度',
|
||||
position: 'right',
|
||||
axisLabel : {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
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]
|
||||
},
|
||||
{
|
||||
name:'平均温度',
|
||||
type:'line',
|
||||
yAxisIndex: 1,
|
||||
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/bar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
}
|
||||
};
|
||||
console.profile('setOption');
|
||||
|
||||
var main = document.getElementById('main');
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var div = document.createElement('div');
|
||||
div.style.cssText = 'width: 400px; height:200px;';
|
||||
main.appendChild(div);
|
||||
var chart = echarts.init(div, null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var j = 0; j < 10; j++) {
|
||||
xAxisData.push('类目' + j);
|
||||
data1.push((Math.random() * 5).toFixed(2));
|
||||
data2.push(-Math.random().toFixed(2));
|
||||
data3.push((Math.random() + 0.5).toFixed(2));
|
||||
data4.push((Math.random() + 0.3).toFixed(2));
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
animation: false,
|
||||
// legend: {
|
||||
// data: [{
|
||||
// name: 'bar'
|
||||
// }, 'bar2', 'bar3', 'bar4'],
|
||||
// selected: {
|
||||
// // 'bar': false
|
||||
// },
|
||||
// orient: 'vertical',
|
||||
// x: 'right',
|
||||
// y: 'bottom',
|
||||
// align: 'right'
|
||||
// },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
onZero: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
inverse: true,
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
itemStyle: itemStyle,
|
||||
data: data1
|
||||
}, {
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
itemStyle: itemStyle,
|
||||
data: data2
|
||||
}, {
|
||||
name: 'bar3',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
itemStyle: itemStyle,
|
||||
data: data3
|
||||
}, {
|
||||
name: 'bar4',
|
||||
type: 'bar',
|
||||
stack: 'two',
|
||||
itemStyle: itemStyle,
|
||||
data: data4
|
||||
}]
|
||||
});
|
||||
}
|
||||
console.profileEnd('setOption');
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+173
File diff suppressed because one or more lines are too long
+181
@@ -0,0 +1,181 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./esl.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<link rel="stylesheet" href="./reset.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
/*background: #000;*/
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Schema:
|
||||
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||||
var schema = [
|
||||
{name: 'date', index: 0, text: '日期'},
|
||||
{name: 'AQIindex', index: 1, text: 'AQI指数'},
|
||||
{name: 'PM25', index: 2, text: 'PM2.5'},
|
||||
{name: 'PM10', index: 3, text: 'PM10'},
|
||||
{name: 'CO', index: 4, text: '一氧化碳 (CO)'},
|
||||
{name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
|
||||
{name: 'SO2', index: 6, text: '二氧化硫 (SO2)'},
|
||||
{name: '等级', index: 7, text: '等级'}
|
||||
];
|
||||
|
||||
require([
|
||||
'data/aqi/BJdata',
|
||||
'data/aqi/GZdata',
|
||||
'data/aqi/SHdata',
|
||||
'zrender/core/util',
|
||||
'echarts',
|
||||
'echarts/chart/parallel',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/visualMap',
|
||||
'echarts/component/parallel',
|
||||
], function (dataBJ, dataGZ, dataSH, zrUtil, echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var lineStyle = {
|
||||
normal: {
|
||||
width: 1
|
||||
// opacity: 0.5,
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
bottom: 30,
|
||||
data: ['北京', '上海', '广州'],
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
// color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
padding: 10,
|
||||
backgroundColor: '#222',
|
||||
borderColor: '#777',
|
||||
borderWidth: 1,
|
||||
formatter: function (obj) {
|
||||
var value = obj[0].value;
|
||||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||||
+ obj[0].seriesName + ' ' + value[0] + '日期：'
|
||||
+ value[7]
|
||||
+ '</div>'
|
||||
+ schema[1].text + '：' + value[1] + '<br>'
|
||||
+ schema[2].text + '：' + value[2] + '<br>'
|
||||
+ schema[3].text + '：' + value[3] + '<br>'
|
||||
+ schema[4].text + '：' + value[4] + '<br>'
|
||||
+ schema[5].text + '：' + value[5] + '<br>'
|
||||
+ schema[6].text + '：' + value[6] + '<br>';
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 150,
|
||||
dimension: 2,
|
||||
inRange: {
|
||||
color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
|
||||
// colorAlpha: [0, 1]
|
||||
}
|
||||
},
|
||||
// dataZoom: {
|
||||
// show: true,
|
||||
// orient: 'vertical',
|
||||
// parallelAxisIndex: [0]
|
||||
// },
|
||||
parallelAxis: [
|
||||
{dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
|
||||
{dim: 1, name: schema[1].text},
|
||||
{dim: 2, name: schema[2].text},
|
||||
{dim: 3, name: schema[3].text},
|
||||
{dim: 4, name: schema[4].text},
|
||||
{dim: 5, name: schema[5].text},
|
||||
{dim: 6, name: schema[6].text},
|
||||
{dim: 7, name: schema[7].text,
|
||||
type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}
|
||||
],
|
||||
parallel: {
|
||||
bottom: 100,
|
||||
parallelAxisDefault: {
|
||||
type: 'value',
|
||||
name: 'AQI指数',
|
||||
nameLocation: 'end',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
// color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: '#aaa'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
// color: '#777'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
// color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'parallel',
|
||||
lineStyle: lineStyle,
|
||||
data: dataBJ
|
||||
// data: [
|
||||
// [ 1, 32,12 , 19, 28,1.39,24, 8,"优"],
|
||||
// ]
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'parallel',
|
||||
lineStyle: lineStyle,
|
||||
data: dataSH
|
||||
// data: [
|
||||
// [ 1, 332,212 , 119, 128,12.39,124, 18,"良"],
|
||||
// ]
|
||||
},
|
||||
{
|
||||
name: '广州',
|
||||
type: 'parallel',
|
||||
lineStyle: lineStyle,
|
||||
data: dataGZ
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
chart.on('axisAreaSelected', function (event) {
|
||||
|
||||
var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
||||
console.log('北京: ', indices);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+107
@@ -0,0 +1,107 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="lib/dat.gui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/toolbox'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
||||
},
|
||||
toolbox: {
|
||||
left: 'left',
|
||||
feature: {
|
||||
dataView: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
data:[
|
||||
{value:335, name:'直接访问'},
|
||||
{value:310, name:'邮件营销'},
|
||||
{value:234, name:'联盟广告'},
|
||||
{value:135, name:'视频广告'},
|
||||
{value:1548, name:'搜索引擎'}
|
||||
],
|
||||
itemStyle: itemStyle
|
||||
}]
|
||||
});
|
||||
|
||||
var config = {
|
||||
labelPosition: 'outside',
|
||||
clockwise: true,
|
||||
labelLineLen: 20,
|
||||
labelLineLen2: 5
|
||||
};
|
||||
|
||||
function update() {
|
||||
chart.setOption({
|
||||
series: [{
|
||||
name: 'pie',
|
||||
clockwise: config.clockwise,
|
||||
label: {
|
||||
normal: {
|
||||
position: config.labelPosition
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: config.labelLineLen,
|
||||
length2: config.labelLineLen2
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
var gui = new dat.GUI();
|
||||
gui.add(config, 'clockwise')
|
||||
.onChange(update);
|
||||
gui.add(config, 'labelPosition', ['inside', 'outside'])
|
||||
.onChange(update);
|
||||
gui.add(config, 'labelLineLen', 0, 100)
|
||||
.onChange(update);
|
||||
gui.add(config, 'labelLineLen2', 0, 100)
|
||||
.onChange(update);
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+220
@@ -0,0 +1,220 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/title',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
var labelTop = {
|
||||
normal : {
|
||||
label : {
|
||||
show : true,
|
||||
position : 'center',
|
||||
formatter : '{b}',
|
||||
textStyle: {
|
||||
baseline : 'bottom'
|
||||
}
|
||||
},
|
||||
labelLine : {
|
||||
show : false
|
||||
}
|
||||
}
|
||||
};
|
||||
var labelFromatter = {
|
||||
normal : {
|
||||
label : {
|
||||
formatter : function (params){
|
||||
return 100 - params.value + '%'
|
||||
},
|
||||
textStyle: {
|
||||
baseline : 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
var labelBottom = {
|
||||
normal : {
|
||||
color: '#ccc',
|
||||
label : {
|
||||
show : true,
|
||||
position : 'center'
|
||||
},
|
||||
labelLine : {
|
||||
show : false
|
||||
}
|
||||
}
|
||||
};
|
||||
var radius = [40, 55];
|
||||
chart.setOption({
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
data:[
|
||||
'GoogleMaps','Facebook','Youtube','Google+','Weixin',
|
||||
'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'
|
||||
]
|
||||
},
|
||||
title: {
|
||||
text: 'The App World',
|
||||
subtext: 'from global web index',
|
||||
x: 'center'
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
dataView : {show: true, readOnly: false},
|
||||
magicType : {
|
||||
show: true,
|
||||
type: ['pie', 'funnel'],
|
||||
option: {
|
||||
funnel: {
|
||||
width: '20%',
|
||||
height: '30%',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
label : {
|
||||
formatter : function (params){
|
||||
return 'other\n' + params.value + '%\n'
|
||||
},
|
||||
textStyle: {
|
||||
baseline : 'middle'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['10%', '30%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:46, itemStyle : labelBottom},
|
||||
{name:'GoogleMaps', value:54,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['30%', '30%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:56, itemStyle : labelBottom},
|
||||
{name:'Facebook', value:44,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['50%', '30%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:65, itemStyle : labelBottom},
|
||||
{name:'Youtube', value:35,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['70%', '30%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:70, itemStyle : labelBottom},
|
||||
{name:'Google+', value:30,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['90%', '30%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:73, itemStyle : labelBottom},
|
||||
{name:'Weixin', value:27,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['10%', '70%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:78, itemStyle : labelBottom},
|
||||
{name:'Twitter', value:22,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['30%', '70%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:78, itemStyle : labelBottom},
|
||||
{name:'Skype', value:22,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['50%', '70%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:78, itemStyle : labelBottom},
|
||||
{name:'Messenger', value:22,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['70%', '70%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:83, itemStyle : labelBottom},
|
||||
{name:'Whatsapp', value:17,itemStyle : labelTop}
|
||||
]
|
||||
},
|
||||
{
|
||||
type : 'pie',
|
||||
center : ['90%', '70%'],
|
||||
radius : radius,
|
||||
itemStyle : labelFromatter,
|
||||
data : [
|
||||
{name:'other', value:89, itemStyle : labelBottom},
|
||||
{name:'Instagram', value:11,itemStyle : labelTop}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+87
@@ -0,0 +1,87 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tooltip-content {
|
||||
color: #000;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
margin-left: -100px;
|
||||
margin-top: -80px;
|
||||
}
|
||||
.tooltip-content h4 {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
.tooltip-content h5 {
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
position: ['50%', '50%'],
|
||||
backgroundColor: 'trasparent',
|
||||
formatter: function (params) {
|
||||
return '<div class="tooltip-content">\
|
||||
<h4>' + params.name + '</h4>\
|
||||
<h5>' + (params.percent * 100).toFixed(1) + '%</h5>\
|
||||
</div>\
|
||||
';
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
radius: ['20%', '40%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:[
|
||||
{value:379.5, name:'前任2：备胎反击战', selected: true},
|
||||
{value:252.7, name:'移动迷宫：烧痕审判'},
|
||||
{value:173.4, name:'绝命海拔'},
|
||||
{value:153.1, name:'剩者为王'},
|
||||
{value:49.4, name:'史努比：花生大电影'},
|
||||
{value:32.2, name:'山河故人'},
|
||||
{value:21.9, name:'蚁人'},
|
||||
{value:19.5, name:'夏洛特烦恼'}
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+79
@@ -0,0 +1,79 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<button id="random"></button>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/pie',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var randomData = function () {
|
||||
return [
|
||||
{value:Math.random().toFixed(3), name:'a'},
|
||||
{value:Math.random().toFixed(3), name:'b'},
|
||||
{value:Math.random().toFixed(3), name:'c'},
|
||||
{value:Math.random().toFixed(3), name:'d'},
|
||||
{value:Math.random().toFixed(3), name:'e'}
|
||||
];
|
||||
}
|
||||
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
||||
}
|
||||
};
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data:['a','b','c','d','e']
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
stack: 'all',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
data: randomData(),
|
||||
itemStyle: itemStyle
|
||||
}]
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
chart.setOption({
|
||||
series: [{
|
||||
name: 'pie',
|
||||
data: randomData()
|
||||
}]
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+114
@@ -0,0 +1,114 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/markPoint',
|
||||
'echarts/component/markLine'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('类目' + i);
|
||||
data1.push((Math.random() * 2 + 1).toFixed(3));
|
||||
data3.push((Math.random() + 0.5).toFixed(3));
|
||||
data2.push((Math.random() + 0.5).toFixed(3));
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line', 'line2', 'line3']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
polar: {},
|
||||
angleAxis: {
|
||||
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
||||
data: xAxisData
|
||||
},
|
||||
radiusAxis: {
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
stack: 'all',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [{
|
||||
type: 'max'
|
||||
}]
|
||||
},
|
||||
data: data1
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line2',
|
||||
stack: 'all',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
data: [[{
|
||||
type: 'max'
|
||||
}, {
|
||||
type: 'min'
|
||||
}]]
|
||||
},
|
||||
data: data2
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line3',
|
||||
stack: 'all',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
data: data3
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+67
@@ -0,0 +1,67 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/line',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var theta = i / 100 * 360;
|
||||
var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
|
||||
data.push([r, theta]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
polar: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 10,
|
||||
max: 20
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
data: data
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/polar'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data1.push([Math.random() * 5, Math.random() * 360]);
|
||||
data2.push([Math.random() * 5, Math.random() * 360]);
|
||||
data3.push([Math.random() * 10, Math.random() * 360]);
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['scatter', 'scatter2', 'scatter3']
|
||||
},
|
||||
polar: {
|
||||
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
radiusAxis: {
|
||||
axisAngle: 0
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'scatter',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data1
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
name: 'scatter2',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data2
|
||||
}, {
|
||||
coordinateSystem: 'polar',
|
||||
name: 'scatter3',
|
||||
type: 'scatter',
|
||||
symbolSize: 10,
|
||||
data: data3
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+93
@@ -0,0 +1,93 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/polar',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'), null, {
|
||||
renderer: 'canvas'
|
||||
});
|
||||
|
||||
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||||
'7a', '8a', '9a','10a','11a',
|
||||
'12p', '1p', '2p', '3p', '4p', '5p',
|
||||
'6p', '7p', '8p', '9p', '10p', '11p'];
|
||||
var days = ['Saturday', 'Friday', 'Thursday',
|
||||
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
|
||||
|
||||
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: ['Punch Card']
|
||||
},
|
||||
polar: {},
|
||||
tooltip: {
|
||||
},
|
||||
animation: false,
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
data: hours,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ddd',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
data: days,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 45
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d14a61'
|
||||
}
|
||||
},
|
||||
symbolSize: function (val) {
|
||||
return val[2] * 2;
|
||||
},
|
||||
data: data
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+71
@@ -0,0 +1,71 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="esl.js"></script>
|
||||
<script src="config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
|
||||
require([
|
||||
'echarts',
|
||||
'echarts/chart/radar',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip'
|
||||
], function (echarts) {
|
||||
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ text: '销售（sales）', max: 6500},
|
||||
{ text: '管理（Administration）', max: 16000},
|
||||
{ text: '信息技术（Information Techology）', max: 30000},
|
||||
{ text: '客服（Customer Support）', max: 38000},
|
||||
{ text: '研发（Development）', max: 52000},
|
||||
{ text: '市场（Marketing）', max: 25000}
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
name: '预算 vs 开销（Budget vs spending）',
|
||||
type: 'radar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name : '预算分配（Allocated Budget）'
|
||||
},
|
||||
{
|
||||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name : '实际开销（Actual Spending）'
|
||||
}
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
chart.on('click', function (params) {
|
||||
console.log(params)
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user