地图上自定义系列画多边形无法显示echarts custom配置项内容和展示
地图上自定义系列画多边形无法显示
配置项如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts测试</title>
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="dark.js"></script>
<script src="vintage.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="china.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<input>
<div id="map" style="height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart1 = echarts.init(document.getElementById('map'), "macarons");
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
];
function renderItem(params, api) {
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
var option1 = {
geo: {
map: 'china',
roam: true,
itemStyle: { // 定义样式
normal: { // 普通状态下的样式
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: { // 高亮状态下的样式
areaColor: '#2a333d'
}
}
},
tooltip: {
trigger: 'item',
},
backgroundColor: '#404a59', // 图表背景色
series: [
{
type: 'custom',
coordinateSystem: 'geo',
geoIndex: 0,
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.5
}
},
animation: false,
silent: true,
data: [0],
z: -10
}
],
}
// 为echarts对象加载数据
myChart1.setOption(option1);
//窗体自适应
window.onresize = function () {
myChart1.resize();
}
</script>
</body>
</html>
截图如下
