@@ -78,6 +78,15 @@ watch(() => store.stockinfoG,async (newValue: any) => {
7878const upColor = ' rgba(255,255,255,0.6)' ;
7979const bColor = ' #ec0000' ;
8080const downColor = ' rgb(55,150,55)' ;
81+ const buyPath = " M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m204.8 204.8v584.9088h259.6864c59.8016 0 107.3152-12.288 141.7216-35.2256 40.1408-27.8528 60.6208-70.4512 60.6208-127.7952 0-39.3216-11.4688-70.4512-32.768-95.0272-21.2992-24.576-50.7904-40.96-89.2928-47.5136 29.4912-9.8304 53.248-25.3952 71.2704-46.6944 17.2032-23.7568 26.2144-52.4288 26.2144-85.1968 0-45.8752-15.5648-81.92-46.6944-108.1344C666.0096 217.9072 622.592 204.8 568.5248 204.8H307.2z m67.1744 56.5248H552.96c40.96 0 72.0896 7.3728 93.3888 23.7568 21.2992 16.384 31.9488 40.96 31.9488 73.728 0 33.5872-11.4688 58.9824-32.768 76.1856-21.2992 16.384-52.4288 25.3952-93.3888 25.3952H374.3744V261.3248z m0 254.7712H561.152c45.056 0 79.4624 8.192 103.2192 26.2144 24.576 18.0224 37.6832 45.8752 37.6832 83.5584 0 37.6832-14.7456 66.3552-43.4176 84.3776-24.576 14.7456-56.5248 22.9376-97.4848 22.9376H374.3744V516.096z" ;
82+ const sellPath = "M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m434.176 204.8c-60.6208 0-110.592 13.1072-149.0944 39.3216a133.4272 133.4272 0 0 0-64.7168 118.784c0 49.152 22.1184 86.8352 67.1744 113.0496 18.8416 9.8304 63.8976 26.2144 134.3488 47.5136 65.536 18.8416 107.3152 32.768 123.6992 42.5984 38.5024 20.48 58.1632 49.152 58.1632 86.016 0 31.1296-14.7456 55.7056-44.2368 73.728-29.4912 18.0224-68.8128 27.0336-116.3264 27.0336-52.4288 0-91.7504-11.4688-118.784-32.768-29.4912-23.7568-47.5136-61.44-53.248-112.2304H307.2c4.9152 72.0896 30.3104 125.3376 76.1856 160.5632 39.3216 29.4912 93.3888 44.2368 162.2016 44.2368 69.632 0 124.5184-14.7456 165.4784-43.4176 40.96-29.4912 61.44-70.4512 61.44-121.2416 0-53.248-24.576-94.208-72.9088-123.6992-24.576-14.7456-75.3664-33.5872-152.3712-56.5248-56.5248-16.384-92.5696-28.672-107.3152-36.864-33.5872-18.0224-49.9712-41.7792-49.9712-71.2704 0-33.5872 13.9264-58.1632 41.7792-74.5472 24.576-14.7456 58.1632-21.2992 101.5808-21.2992 47.5136 0 84.3776 9.8304 110.592 31.1296 25.3952 20.48 41.7792 51.6096 49.152 94.208h66.3552c-5.7344-61.44-27.8528-108.1344-67.1744-139.264C654.5408 219.5456 602.112 204.8 536.576 204.8z";
83+ const buySvg = ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">' +
84+ ' <rect width="100%" height="100%" fill="white" transform="scale(0.7, 0.7) translate(15%, 15%)" />' + // 缩放矩形,挡住透明区域,缩放是因为边框圆弧和直角的问题
85+ ' <path fill="red" d="' + buyPath + ' " /></svg>' ;
86+ const sellSvg = ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">' +
87+ ' <rect width="100%" height="100%" fill="white" transform="scale(0.7, 0.7) translate(15%, 15%)" />' + // 缩放矩形,挡住透明区域
88+ ' <path fill="rgb(18, 150, 219)" d="' + sellPath + ' " /></svg>' ;
89+
8190const nowDate = getFormattedDate ();
8291
8392const contextMenuShow = ref (false );
@@ -363,6 +372,7 @@ function handleGraphicData(graphics: Graphic[]=graphicData.value){
363372 x2: end [0 ],
364373 y2: end [1 ],
365374 },
375+ z:10 ,
366376 style: {
367377 lineWidth: style ?.line_width ? style ?.line_width : 1 ,
368378 fill: style ?.color ,
@@ -960,15 +970,14 @@ function init_option(){
960970 // left: 'left',
961971 left: ' 4%' ,
962972 data: [' K线' , ' MA5' , ' MA10' , ' MA20' , ' MA60' ," 买卖点" ," 图线" ]
963- // data: ['K线', ]
964973 },
965974 tooltip: {
966975 // trigger: 'axis',// https://echarts.apache.org/zh/option.html#grid.tooltip.trigger
967976 trigger: ' item' ,
968977 axisPointer: {
969978 type: ' cross' ,
970979 animation:false ,
971- snap:true // 坐标轴指示器是否自动吸附到点上。默认自动判断。好像是默认启用 https://echarts.apache.org/zh/option.html#grid.tooltip.axisPointer.snap
980+ // snap:true //坐标轴指示器是否自动吸附到点上。默认自动判断。好像是默认启用 https://echarts.apache.org/zh/option.html#grid.tooltip.axisPointer.snap
972981 },
973982 transitionDuration: 0 ,
974983 borderWidth: 1 ,
@@ -1064,9 +1073,11 @@ function init_option(){
10641073 ],
10651074 },
10661075 grid: [
1067- {
1068- left: ' 4%' ,
1069- right: ' 3%' ,
1076+ {// 上下两个图表的位置
1077+ // left: '4%',
1078+ left: ' 3%' ,
1079+ // right: '3%',
1080+ right: ' 4%' ,
10701081 height: ' 65%'
10711082 },
10721083 {
@@ -1285,17 +1296,19 @@ function init_option(){
12851296 // 参见第269行的结构
12861297 if (params .data [4 ].includes (" 买入" )){
12871298 // return "rect"
1288- return " path://M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m204.8 204.8v584.9088h259.6864c59.8016 0 107.3152-12.288 141.7216-35.2256 40.1408-27.8528 60.6208-70.4512 60.6208-127.7952 0-39.3216-11.4688-70.4512-32.768-95.0272-21.2992-24.576-50.7904-40.96-89.2928-47.5136 29.4912-9.8304 53.248-25.3952 71.2704-46.6944 17.2032-23.7568 26.2144-52.4288 26.2144-85.1968 0-45.8752-15.5648-81.92-46.6944-108.1344C666.0096 217.9072 622.592 204.8 568.5248 204.8H307.2z m67.1744 56.5248H552.96c40.96 0 72.0896 7.3728 93.3888 23.7568 21.2992 16.384 31.9488 40.96 31.9488 73.728 0 33.5872-11.4688 58.9824-32.768 76.1856-21.2992 16.384-52.4288 25.3952-93.3888 25.3952H374.3744V261.3248z m0 254.7712H561.152c45.056 0 79.4624 8.192 103.2192 26.2144 24.576 18.0224 37.6832 45.8752 37.6832 83.5584 0 37.6832-14.7456 66.3552-43.4176 84.3776-24.576 14.7456-56.5248 22.9376-97.4848 22.9376H374.3744V516.096z"
1299+ return ' image://data:image/svg+xml;charset=utf8,' + buySvg
1300+ // return "path://M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m204.8 204.8v584.9088h259.6864c59.8016 0 107.3152-12.288 141.7216-35.2256 40.1408-27.8528 60.6208-70.4512 60.6208-127.7952 0-39.3216-11.4688-70.4512-32.768-95.0272-21.2992-24.576-50.7904-40.96-89.2928-47.5136 29.4912-9.8304 53.248-25.3952 71.2704-46.6944 17.2032-23.7568 26.2144-52.4288 26.2144-85.1968 0-45.8752-15.5648-81.92-46.6944-108.1344C666.0096 217.9072 622.592 204.8 568.5248 204.8H307.2z m67.1744 56.5248H552.96c40.96 0 72.0896 7.3728 93.3888 23.7568 21.2992 16.384 31.9488 40.96 31.9488 73.728 0 33.5872-11.4688 58.9824-32.768 76.1856-21.2992 16.384-52.4288 25.3952-93.3888 25.3952H374.3744V261.3248z m0 254.7712H561.152c45.056 0 79.4624 8.192 103.2192 26.2144 24.576 18.0224 37.6832 45.8752 37.6832 83.5584 0 37.6832-14.7456 66.3552-43.4176 84.3776-24.576 14.7456-56.5248 22.9376-97.4848 22.9376H374.3744V516.096z"
12891301 }else {
1290- return "path://M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m434.176 204.8c-60.6208 0-110.592 13.1072-149.0944 39.3216a133.4272 133.4272 0 0 0-64.7168 118.784c0 49.152 22.1184 86.8352 67.1744 113.0496 18.8416 9.8304 63.8976 26.2144 134.3488 47.5136 65.536 18.8416 107.3152 32.768 123.6992 42.5984 38.5024 20.48 58.1632 49.152 58.1632 86.016 0 31.1296-14.7456 55.7056-44.2368 73.728-29.4912 18.0224-68.8128 27.0336-116.3264 27.0336-52.4288 0-91.7504-11.4688-118.784-32.768-29.4912-23.7568-47.5136-61.44-53.248-112.2304H307.2c4.9152 72.0896 30.3104 125.3376 76.1856 160.5632 39.3216 29.4912 93.3888 44.2368 162.2016 44.2368 69.632 0 124.5184-14.7456 165.4784-43.4176 40.96-29.4912 61.44-70.4512 61.44-121.2416 0-53.248-24.576-94.208-72.9088-123.6992-24.576-14.7456-75.3664-33.5872-152.3712-56.5248-56.5248-16.384-92.5696-28.672-107.3152-36.864-33.5872-18.0224-49.9712-41.7792-49.9712-71.2704 0-33.5872 13.9264-58.1632 41.7792-74.5472 24.576-14.7456 58.1632-21.2992 101.5808-21.2992 47.5136 0 84.3776 9.8304 110.592 31.1296 25.3952 20.48 41.7792 51.6096 49.152 94.208h66.3552c-5.7344-61.44-27.8528-108.1344-67.1744-139.264C654.5408 219.5456 602.112 204.8 536.576 204.8z"
1302+ return ' image://data:image/svg+xml;charset=utf8,' + sellSvg
1303+ // return "path://M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m434.176 204.8c-60.6208 0-110.592 13.1072-149.0944 39.3216a133.4272 133.4272 0 0 0-64.7168 118.784c0 49.152 22.1184 86.8352 67.1744 113.0496 18.8416 9.8304 63.8976 26.2144 134.3488 47.5136 65.536 18.8416 107.3152 32.768 123.6992 42.5984 38.5024 20.48 58.1632 49.152 58.1632 86.016 0 31.1296-14.7456 55.7056-44.2368 73.728-29.4912 18.0224-68.8128 27.0336-116.3264 27.0336-52.4288 0-91.7504-11.4688-118.784-32.768-29.4912-23.7568-47.5136-61.44-53.248-112.2304H307.2c4.9152 72.0896 30.3104 125.3376 76.1856 160.5632 39.3216 29.4912 93.3888 44.2368 162.2016 44.2368 69.632 0 124.5184-14.7456 165.4784-43.4176 40.96-29.4912 61.44-70.4512 61.44-121.2416 0-53.248-24.576-94.208-72.9088-123.6992-24.576-14.7456-75.3664-33.5872-152.3712-56.5248-56.5248-16.384-92.5696-28.672-107.3152-36.864-33.5872-18.0224-49.9712-41.7792-49.9712-71.2704 0-33.5872 13.9264-58.1632 41.7792-74.5472 24.576-14.7456 58.1632-21.2992 101.5808-21.2992 47.5136 0 84.3776 9.8304 110.592 31.1296 25.3952 20.48 41.7792 51.6096 49.152 94.208h66.3552c-5.7344-61.44-27.8528-108.1344-67.1744-139.264C654.5408 219.5456 602.112 204.8 536.576 204.8z"
12911304 }
12921305 },
1293- symbolSize: 16 ,
1294- itemStyle: {
1295- color : function (params ) {
1296- return params .data [4 ].includes (" 买入" ) ? ' red' : ' rgba(18,150,219,1)' ;
1297- },
1298- },
1306+ symbolSize: 13 ,
1307+ // itemStyle: {
1308+ // color: function(params) {
1309+ // return params.data[4].includes("买入") ? 'red' : 'rgba(18,150,219,1)';
1310+ // },
1311+ // },
12991312 tooltip: {
13001313 trigger: ' item' ,
13011314 // backgroundColor:"red", //这个背景色只能静态的
@@ -1308,7 +1321,7 @@ function init_option(){
13081321 const data = params .data ;
13091322 const backgroundColor = data [4 ].includes (" 买入" ) ? ' rgba(255,165,0,1)' : ' rgba(18, 150, 219, 1)' ;
13101323 // 这里可以通过设置 HTML 来应用背景颜色
1311- return ` <div style="background-color: ${backgroundColor };padding:3px ;font-size: 18px ">
1324+ return ` <div style="background-color: ${backgroundColor };padding:5px ;font-size: 18px ">
13121325 ${data [2 ]}以均价${data [1 ]}${data [4 ]}${data [3 ]}手,理由是${data [5 ]}。
13131326 </div> ` ;
13141327 },
0 commit comments