更换 ECharts 散点图图标
使用
symbol关键字
- 主要代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更换 ECharts 散点图图标</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<script src="../plugins/echarts/jquery.min.js"></script>
<link rel="stylesheet" href="../plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css">
<!-- 引入 echarts.js -->
<script src="../plugins/echarts/echarts.js"></script>
<script src="../plugins/echarts/macarons.js"></script>
</head>
<body>
<div style="text-align: center;margin: 10px auto;width:980px;">
<div class="alert alert-danger" role="alert">
更换 ECharts 散点图图标
</div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px;width:1000px;margin:0 auto;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '轮船 速度-航向 图',
x: 'center'
},
xAxis: {
name: '速度(km/h)',
"splitLine": {
"show": true // 是否显示网格线
}
},
yAxis: {
name: '航行区域',
"splitLine": {
"show": true // 是否显示网格线
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function(params) {
var html = '';
if (params.length > 0) {
for (var intx = 0; intx < params.length; intx++) {
html += params[intx].seriesName + '<br>' +
'速度 : ' + params[intx].data[0] + ' km/h<br>' +
'航行区域 : ' + params[intx].data[1] + ' n mile<br>';
}
}
return html;
}
},
grid: {
left: '10',
right: '10',
containLabel: true
},
series: [{
name: '速度-航向图',
showAllSymbol: true,
symbol: 'path://M52.536 542.42833336l77.777 184.496h699.928l143.271-184.496h-920.977zM813.884 664.03533336c-15.822 0-28.64-13.153-28.64-29.375 0-16.19 12.818-29.342 28.64-29.342 15.823 0 28.641 13.153 28.641 29.342 0 16.223-12.818 29.375-28.641 29.375zM785.243 160.88633336h-79.045v243.18h79.045v-243.18zM650.151 160.88633336h-79.013v243.18h79.013v-243.18zM842.525 425.02833336h-329.503v-50.305h-362.247v136.895h691.751v-86.59zM226.315 471.16133336c-15.822 0-28.64-13.153-28.64-29.375 0-16.19 12.818-29.342 28.64-29.342 15.822 0 28.641 13.153 28.641 29.342 0 16.222-12.818 29.375-28.641 29.375zM332.733 472.52933336c-15.822 0-28.64-13.153-28.64-29.341 0-16.223 12.818-29.375 28.64-29.375 15.822 0 28.641 13.153 28.641 29.375 0 16.189-12.818 29.341-28.641 29.341zM433.477 472.96333336c-15.822 0-28.64-13.119-28.64-29.342s12.818-29.342 28.64-29.342c15.822 0 28.674 13.119 28.674 29.342s-12.852 29.342-28.674 29.342z',
symbolSize: [40, 20],
label: {
emphasis: {
show: true,
formatter: function(params) {
var value = params.data[1];
var HeadingAreaList = ['遮蔽航区', '沿海航区', '近海航区', '远海航区'];
if (value >= 0 && value <= 50) {
return HeadingAreaList[0]; // 遮蔽航区
} else if (value > 50 && value <= 150) {
return HeadingAreaList[1]; // 沿海航区
} else if (value > 150 && value <= 250) {
return HeadingAreaList[2]; // 近海航区
} else {
return HeadingAreaList[3]; // 远海航区
}
},
textStyle: {
fontSize: 20,
},
position: 'top'
}
},
data: [
[10.0, 25],
[8.0, 95],
[13.0, 155],
[9.0, 80],
[11.0, 60],
[14.0, 250],
[6.0, 280],
[4.0, 120],
[12.0, 135],
[7.0, 45],
[5.0, 180]
],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#C1232B', // 红色
'#FCCE10', // 黄色
'#19C719', // 绿色
'#000000' // 黑色
];
var value = params.value[1];
if (value >= 0 && value <= 50) {
return colorList[3]; // 黑色
} else if (value > 50 && value <= 150) {
return colorList[2]; // 绿色
} else if (value > 150 && value <= 250) {
return colorList[1]; // 黄色
} else {
return colorList[0]; // 红色
}
}
}
},
type: 'scatter'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>