681 lines
20 KiB
HTML
681 lines
20 KiB
HTML
<!DOCTYPE>
|
|
<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/facePrint.js"></script>
|
|
<script src="data/pie-texture.js"></script>
|
|
<script src="data/symbols.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
}
|
|
.chart {
|
|
position: relative;
|
|
height: 500px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
font-weight: normal;
|
|
background: #dde;
|
|
margin: 0;
|
|
}
|
|
strong {
|
|
color: #971f3c;
|
|
}
|
|
</style>
|
|
|
|
<h2>repeatDirection | dynamic</h2>
|
|
<div class="chart" id="paper-and-hill"></div>
|
|
<h2>texture</h2>
|
|
<div class="chart" id="texture"></div>
|
|
<h2>horizontal | no clip | symbolOffset</h2>
|
|
<div class="chart" id="velocity"></div>
|
|
<h2>clip</h2>
|
|
<div class="chart" id="clip"></div>
|
|
<h2>dotted | gradient</h2>
|
|
<div class="chart" id="dotted"></div>
|
|
|
|
<script>
|
|
|
|
function makeChart(id, option, cb) {
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/pictorialBar',
|
|
'echarts/chart/bar',
|
|
'echarts/chart/line',
|
|
'echarts/chart/scatter',
|
|
'echarts/component/grid',
|
|
'echarts/component/legend',
|
|
'echarts/component/markLine',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
if (typeof option === 'function') {
|
|
option = option(echarts);
|
|
}
|
|
|
|
var main = document.getElementById(id);
|
|
if (main) {
|
|
var chartMain = document.createElement('div');
|
|
chartMain.style.cssText = 'height:100%';
|
|
main.appendChild(chartMain);
|
|
var chart = echarts.init(chartMain);
|
|
chart.setOption(option);
|
|
|
|
window.addEventListener('resize', chart.resize);
|
|
|
|
cb && cb(echarts, chart);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
makeChart('paper-and-hill', {
|
|
backgroundColor: '#0f375f',
|
|
tooltip: {},
|
|
legend: {
|
|
data: ['all'],
|
|
textStyle: {color: '#ddd'}
|
|
},
|
|
xAxis: [{
|
|
data: ['圣诞节儿童愿望清单', '', '珠穆朗玛', '乞力马扎罗'],
|
|
axisTick: {show: false},
|
|
axisLine: {show: false},
|
|
axisLabel: {
|
|
margin: 20,
|
|
textStyle: {
|
|
color: '#ddd',
|
|
fontSize: 14
|
|
}
|
|
}
|
|
}],
|
|
yAxis: {
|
|
splitLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLine: {show: false},
|
|
axisLabel: {show: false}
|
|
},
|
|
markLine: {
|
|
z: -1
|
|
},
|
|
animationEasing: 'elasticOut',
|
|
series: [{
|
|
type: 'pictorialBar',
|
|
name: 'all',
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c} km',
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: '#e54035'
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
value: 13000,
|
|
symbol: imageSymbols.paper,
|
|
symbolRepeat: true,
|
|
symbolSize: ['130%', '20%'],
|
|
symbolOffset: [0, 10],
|
|
symbolMargin: '-30%',
|
|
animationDelay: function (dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
value: '-',
|
|
symbol: 'none',
|
|
}, {
|
|
value: 8844,
|
|
symbol: 'image://./data/hill-Qomolangma.png',
|
|
symbolSize: ['200%', '105%'],
|
|
symbolPosition: 'end',
|
|
z: 10
|
|
}, {
|
|
value: 5895,
|
|
symbol: 'image://./data/hill-Kilimanjaro.png',
|
|
symbolSize: ['200%', '105%'],
|
|
symbolPosition: 'end'
|
|
}],
|
|
markLine: {
|
|
symbol: ['none', 'none'],
|
|
label: {
|
|
normal: {show: false}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#e54035',
|
|
width: 2
|
|
}
|
|
},
|
|
data: [{
|
|
yAxis: 8844
|
|
}]
|
|
}
|
|
}, {
|
|
name: 'all',
|
|
type: 'pictorialBar',
|
|
symbol: 'circle',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#185491'
|
|
}
|
|
},
|
|
silent: true,
|
|
symbolOffset: [0, '50%'],
|
|
z: -10,
|
|
data: [{
|
|
value: 1,
|
|
symbolSize: ['150%', 50]
|
|
}, {
|
|
value: '-'
|
|
}, {
|
|
value: 1,
|
|
symbolSize: ['200%', 50]
|
|
}, {
|
|
value: 1,
|
|
symbolSize: ['200%', 50]
|
|
}]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var img = new Image();
|
|
img.src = window.pieTexture;
|
|
|
|
makeChart('texture', {
|
|
backgroundColor: '#13978b',
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: ['a', 'b', 'c'],
|
|
axisTick: {show: false}
|
|
},
|
|
yAxis: {
|
|
splitLine: {show: false},
|
|
axisTick: {show: false}
|
|
},
|
|
animationEasing: 'elasticOut',
|
|
series: [{
|
|
name: 'all',
|
|
type: 'pictorialBar',
|
|
barCategoryGap: '40%',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#e54035'
|
|
}
|
|
}
|
|
},
|
|
hoverAnimation: true,
|
|
data: [{
|
|
value: 8844,
|
|
symbol: 'circle',
|
|
label: {
|
|
normal: {formatter: 'symbolPatternSize: default'}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
image: img,
|
|
repeat: 'repeat'
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: 8844,
|
|
symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
|
label: {
|
|
normal: {formatter: 'symbolPatternSize: 800'}
|
|
},
|
|
symbolPatternSize: 800,
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
image: img,
|
|
repeat: 'repeat'
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: 8844,
|
|
symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
|
label: {
|
|
normal: {formatter: 'symbolPatternSize: 50'}
|
|
},
|
|
symbolPatternSize: 50,
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
image: img,
|
|
repeat: 'repeat'
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var rawData = [
|
|
{name: '驯鹿', velocity: 123, symbol: 'reindeer'},
|
|
{name: '火箭', velocity: 60, symbol: 'rocket'},
|
|
{name: '飞机', velocity: 25, symbol: 'plane'},
|
|
{name: '高铁', velocity: 18, symbol: 'train'},
|
|
{name: '轮船', velocity: 12, symbol: 'ship'},
|
|
{name: '汽车', velocity: 9, symbol: 'car'},
|
|
{name: '跑步', velocity: 2, symbol: 'run'},
|
|
{name: '步行', velocity: 1, symbol: 'walk'}
|
|
];
|
|
|
|
// 真实数据：
|
|
// {name: '驯鹿', velocity: 4705882, symbol: 'reindeer'},
|
|
// {name: '火箭', velocity: 38880, symbol: 'thunder'},
|
|
// {name: '飞机', velocity: 1028, symbol: 'plane'},
|
|
// {name: '高铁', velocity: 300, symbol: 'train'},
|
|
// {name: '汽车', velocity: 60, symbol: 'car'},
|
|
// {name: '轮船', velocity: 30, symbol: 'ship'},
|
|
// {name: '跑步', velocity: 15, symbol: 'run'},
|
|
// {name: '步行', velocity: 5, symbol: 'walk'}
|
|
|
|
makeChart('velocity', {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'none'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: rawData.map(function (item) {
|
|
return item.name;
|
|
}),
|
|
axisTick: {show: false},
|
|
axisLine: {show: false},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#e54035'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLine: {show: false},
|
|
axisLabel: {show: false}
|
|
},
|
|
color: ['#e54035'],
|
|
series: [{
|
|
name: 'hill',
|
|
type: 'pictorialBar',
|
|
barCategoryGap: '-50%',
|
|
symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.5
|
|
},
|
|
emphasis: {
|
|
opacity: 1
|
|
}
|
|
},
|
|
data: rawData.map(function (item) {
|
|
return item.velocity;
|
|
}),
|
|
z: 10
|
|
}, {
|
|
name: 'glyph',
|
|
type: 'pictorialBar',
|
|
symbolPosition: 'end',
|
|
symbolSize: [25, 25],
|
|
symbolOffset: [0, -35],
|
|
itemStyle: {
|
|
emphasis: {
|
|
color: 'green'
|
|
}
|
|
},
|
|
data: rawData.map(function (item) {
|
|
return {
|
|
value: item.velocity,
|
|
symbol: pathSymbols[item.symbol]
|
|
};
|
|
})
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function getBodyImage(index) {
|
|
return pathSymbols['body' + index];
|
|
}
|
|
|
|
var bodyMax = 150;
|
|
|
|
makeChart('clip', {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
data: ['typeA', 'typeB'],
|
|
selectedMode: 'single'
|
|
},
|
|
xAxis: {
|
|
data: ['a', 'b', 'c', 'd', 'e'],
|
|
axisTick: {show: false},
|
|
axisLine: {show: false},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#e54035'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
max: bodyMax,
|
|
splitLine: {show: false}
|
|
},
|
|
grid: {
|
|
left: 'center',
|
|
top: 100,
|
|
width: 800,
|
|
height: 230
|
|
},
|
|
series: [{
|
|
name: 'typeA',
|
|
type: 'pictorialBar',
|
|
symbolClip: true,
|
|
symbolBoundingData: bodyMax,
|
|
data: [{
|
|
value: 123,
|
|
symbol: getBodyImage(0)
|
|
}, {
|
|
value: 34,
|
|
symbol: getBodyImage(1)
|
|
}, {
|
|
value: 101,
|
|
symbol: getBodyImage(2)
|
|
}, {
|
|
value: 89,
|
|
symbol: getBodyImage(3)
|
|
}, {
|
|
value: 72,
|
|
symbol: getBodyImage(4)
|
|
}],
|
|
z: 10
|
|
}, {
|
|
name: 'typeB',
|
|
type: 'pictorialBar',
|
|
symbolClip: true,
|
|
symbolBoundingData: bodyMax,
|
|
data: [{
|
|
value: 12,
|
|
symbol: getBodyImage(0)
|
|
}, {
|
|
value: 44,
|
|
symbol: getBodyImage(1)
|
|
}, {
|
|
value: 131,
|
|
symbol: getBodyImage(2)
|
|
}, {
|
|
value: 33,
|
|
symbol: getBodyImage(3)
|
|
}, {
|
|
value: 142,
|
|
symbol: getBodyImage(4)
|
|
}],
|
|
z: 10
|
|
}, {
|
|
name: 'full',
|
|
type: 'pictorialBar',
|
|
symbolBoundingData: bodyMax,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ccc'
|
|
}
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
symbol: getBodyImage(0)
|
|
}, {
|
|
value: 1,
|
|
symbol: getBodyImage(1)
|
|
}, {
|
|
value: 1,
|
|
symbol: getBodyImage(2)
|
|
}, {
|
|
value: 1,
|
|
symbol: getBodyImage(3)
|
|
}, {
|
|
value: 1,
|
|
symbol: getBodyImage(4)
|
|
}]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('dotted', function (echarts) {
|
|
var bgColor = '#0f375f';
|
|
var category = [];
|
|
var count = 20;
|
|
var dottedBase = +new Date();
|
|
var lineData = [];
|
|
var barData = [];
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
var date = new Date(dottedBase + 3600 * 24);
|
|
category.push([
|
|
date.getFullYear(),
|
|
date.getMonth() + 1,
|
|
date.getDate()
|
|
].join('-'));
|
|
var b = Math.random() * 200;
|
|
var d = Math.random() * 200;
|
|
barData.push(b)
|
|
lineData.push(d + b);
|
|
}
|
|
|
|
return {
|
|
backgroundColor: bgColor,
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
data: ['line', 'bar'],
|
|
textStyle: {
|
|
color: '#ccc'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: category,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ccc'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {show: false},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ccc'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
smooth: true,
|
|
showAllSymbol: true,
|
|
symbol: 'emptyCircle',
|
|
symbolSize: 15,
|
|
data: lineData
|
|
}, {
|
|
name: 'bar',
|
|
type: 'bar',
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#14c8d4'},
|
|
{offset: 1, color: '#43eec6'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: barData
|
|
}, {
|
|
name: 'line',
|
|
type: 'bar',
|
|
barWidth: 10,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: 'rgba(20,200,212,0.5)'},
|
|
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
|
|
{offset: 1, color: 'rgba(20,200,212,0)'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
z: -12,
|
|
data: lineData
|
|
}, {
|
|
name: 'dotted',
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
itemStyle: {
|
|
normal: {
|
|
color: bgColor
|
|
}
|
|
},
|
|
symbolRepeat: true,
|
|
symbolSize: [12, 4],
|
|
symbolMargin: 1,
|
|
z: -10,
|
|
data: lineData
|
|
}]
|
|
};
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |