257 lines
11 KiB
HTML
Generated
257 lines
11 KiB
HTML
Generated
<!DOCTYPE html>
|
||
<!--
|
||
Licensed to the Apache Software Foundation (ASF) under one
|
||
or more contributor license agreements. See the NOTICE file
|
||
distributed with this work for additional information
|
||
regarding copyright ownership. The ASF licenses this file
|
||
to you under the Apache License, Version 2.0 (the
|
||
"License"); you may not use this file except in compliance
|
||
with the License. You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing,
|
||
software distributed under the License is distributed on an
|
||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
KIND, either express or implied. See the License for the
|
||
specific language governing permissions and limitations
|
||
under the License.
|
||
-->
|
||
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="lib/simpleRequire.js"></script>
|
||
<script src="lib/config.js"></script>
|
||
<script src="lib/jquery.min.js"></script>
|
||
<script src="lib/facePrint.js"></script>
|
||
<script src="lib/testHelper.js"></script>
|
||
<link rel="stylesheet" href="lib/reset.css">
|
||
</head>
|
||
<body>
|
||
<style>
|
||
h1 {
|
||
line-height: 60px;
|
||
height: 60px;
|
||
background: #a60;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #eee;
|
||
font-size: 14px;
|
||
}
|
||
.chart {
|
||
height: 500px;
|
||
}
|
||
</style>
|
||
|
||
<div class="chart" id="map"></div>
|
||
<div class="chart" id="line-symbol"></div>
|
||
|
||
<script>
|
||
require([
|
||
'echarts',
|
||
'map/js/china'
|
||
], function (echarts) {
|
||
const option = {
|
||
title : [{
|
||
text: '订单量',
|
||
subtext: '纯属虚构',
|
||
x:'center'
|
||
}, {
|
||
text: '地图数据来源：天地图 cloudcenter.tianditu.gov.cn',
|
||
subtext: '仅作为功能测试使用，线上产品应从天地图获取最新地图数据并申请审图号',
|
||
link: 'https://cloudcenter.tianditu.gov.cn/',
|
||
bottom: 15,
|
||
left: 15,
|
||
textStyle: {
|
||
color: '#ccc',
|
||
fontSize: 12
|
||
},
|
||
subtextStyle: {
|
||
color: '#aaa',
|
||
fontSize: 12
|
||
}
|
||
}],
|
||
tooltip : {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x:'left',
|
||
data:['订单量']
|
||
},
|
||
visualMap: {
|
||
text: ['Map Result'],
|
||
showLabel: true,
|
||
right: 20,
|
||
pieces: [
|
||
{min: 1500},
|
||
{min: 900, max: 1500},
|
||
{min: 310, max: 1000},
|
||
{min: 200, max: 400},
|
||
{min: 10, max: 200, label: '10 到 200（自定义label）'},
|
||
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'},
|
||
{min: 5, max: 5, label: '5（自定义特殊颜色）', color: 'black'},
|
||
{max: 5}
|
||
],
|
||
color: ['#E0022B', '#E09107', '#A3E00B'],
|
||
textStyle: {
|
||
textShadowColor: "rgba(255, 0, 255, 1)",
|
||
textShadowBlur: 5,
|
||
textShadowOffsetX: 5,
|
||
textShadowOffsetY: 5
|
||
}
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient : 'vertical',
|
||
x: 'right',
|
||
y: 'center',
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
roamController: {
|
||
show: true,
|
||
x: 'right',
|
||
mapTypeControl: {
|
||
'china': true
|
||
}
|
||
},
|
||
series : [
|
||
{
|
||
name: '订单量',
|
||
type: 'map',
|
||
map: 'china',
|
||
roam: false,
|
||
label: {
|
||
show: true
|
||
},
|
||
center: [104.2, 36],
|
||
zoom: 1.4,
|
||
data: [
|
||
{name: '北京市', value: 5},
|
||
{name: '天津市', value: Math.round(Math.random()*2000)},
|
||
{name: '上海市', value: Math.round(Math.random()*2000)},
|
||
{name: '重庆市', value: Math.round(Math.random()*2000)},
|
||
{name: '河北省', value: 0},
|
||
{name: '河南省', value: Math.round(Math.random()*2000)},
|
||
{name: '云南省', value: 123},
|
||
{name: '辽宁省', value: 305},
|
||
{name: '黑龙江省', value: Math.round(Math.random()*2000), visualMap: false},
|
||
{name: '湖南省', value: 200},
|
||
{name: '安徽省', value: Math.round(Math.random()*2000)},
|
||
{name: '山东省', value: Math.round(Math.random()*2000)},
|
||
{name: '新疆维吾尔自治区', value: Math.round(Math.random()*2000)},
|
||
{name: '江苏省', itemStyle: {color: 'red'}, value: Math.round(Math.random()*2000), visualMap: false},
|
||
{name: '浙江省', value: Math.round(Math.random()*2000)},
|
||
{name: '江西省', value: Math.round(Math.random()*2000)},
|
||
{name: '湖北省', value: Math.round(Math.random()*2000)},
|
||
{name: '广西壮族自治区', value: Math.round(Math.random()*2000)},
|
||
{name: '甘肃省', value: Math.round(Math.random()*2000)},
|
||
{name: '山西省', value: Math.round(Math.random()*2000)},
|
||
{name: '内蒙古自治区', value: Math.round(Math.random()*2000)},
|
||
{name: '陕西省', value: Math.round(Math.random()*2000)},
|
||
{name: '吉林省', value: Math.round(Math.random()*2000)},
|
||
{name: '福建省', value: Math.round(Math.random()*2000)},
|
||
{name: '贵州省', value: Math.round(Math.random()*2000)},
|
||
{name: '广东省', value: Math.round(Math.random()*2000)},
|
||
{name: '青海省', value: Math.round(Math.random()*2000)},
|
||
{name: '西藏自治区', value: Math.round(Math.random()*2000)},
|
||
{name: '四川省', value: Math.round(Math.random()*2000)},
|
||
{name: '宁夏回族自治区', value: Math.round(Math.random()*2000)},
|
||
{name: '海南省', value: Math.round(Math.random()*2000)},
|
||
{name: '台湾省', value: Math.round(Math.random()*2000)},
|
||
{name: '香港特别行政区', value: Math.round(Math.random()*2000)},
|
||
{name: '澳门特别行政区', value: Math.round(Math.random()*2000)}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
const chart = testHelper.create(echarts, 'map', {
|
||
title: [
|
||
'All provinces should be "blue", except that',
|
||
'北京 is "black"',
|
||
'黑龙江 is "grey" (visualMap: false)',
|
||
'江苏 is "red" (visualMap: false)',
|
||
'the shadowColor of visualMap text "Map Result" is magenta'
|
||
],
|
||
option
|
||
});
|
||
})
|
||
</script>
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
const option = {
|
||
title: {
|
||
text: '未来一周气温变化',
|
||
subtext: '纯属虚构'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['最高气温']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: 'none'
|
||
},
|
||
dataView: {readOnly: false},
|
||
magicType: {type: ['line', 'bar']},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
visualMap: {
|
||
type: 'piecewise',
|
||
orient: 'horizontal',
|
||
left: 'center',
|
||
pieces: [
|
||
{gt: 10, lte: 15, label: 'weixian', symbol: 'emptyCircle', color: 'red'},
|
||
{gt: 5, lte: 10, label: 'weixian', symbol: 'emptyCircle', color: 'green'}
|
||
],
|
||
outOfRange: {
|
||
color: '#ccc',
|
||
symbol: 'emptyCircle'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value} °C'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name:'最高气温',
|
||
type:'line',
|
||
data:[11, 11, 15, 13, 12, 13, 10]
|
||
}
|
||
]
|
||
};
|
||
|
||
const chart = testHelper.create(echarts, 'line-symbol', {
|
||
title: 'line symbol (check toggle normally)',
|
||
option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |