更換 ECharts 散點圖圖標(散點圖中symbol的使用)

更換 ECharts 散點圖圖標javascript

使用symbol關鍵字 👉 http://echarts.baidu.com/option.html#series-scatter.symbolcss

使用visualMap關鍵字 👉 https://echarts.baidu.com/option.html#visualMaphtml

更換 ECharts 散點圖圖標 <a href="https://www.hgnulb.cn/freedom/JavaScript/scatter-symbol.html" target="_blank" data-toggle="tooltip" data-original-title="點擊查看 Demo">👉 點擊查看散點圖</a>java

主要實現代碼 jquery

<span class="badge badge-pill badge-danger" data-toggle="collapse" data-target="#scatter-symbol">點擊查看所有代碼</span>bootstrap

<div class="collapse" id="scatter-symbol"> ```html <!DOCTYPE html> <html>echarts

<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">  <script src="../plugins/echarts/echarts.js"></script> <script src="../plugins/echarts/macarons.js"></script> </head>dom

<body> <div style="text-align: center;margin: 10px"> <div class="alert alert-danger" role="alert"> 更換 ECharts 散點圖圖標 </div> </div>  <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: 'left' }, 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: '80', right: '80', containLabel: true }, visualMap: { type: 'piecewise', selectedMode: 'multiple', orient: 'horizontal', top: 10, left: 'center', pieces: [ { gt: 0, lte: 50, label: '遮蔽航區' }, { gt: 50, lte: 150, label: '沿海航區' }, { gt: 150, lte: 250, label: '近海航區' }, { gt: 250, label: '遠海航區' } ], inRange: { color: ['#000000', '#19C719', '#FCCE10', '#C1232B'], // 黑、綠、黃、紅 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' } }, 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' }] };spa

// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);
</script>

</body>3d

</html> ``` </div>

參考連接