更換 ECharts 散點圖圖示(散點圖中symbol的使用)
阿新 • • 發佈:2019-01-07
更換 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>