Open ywAlexyw opened 1 month ago
5.3.2
https://echarts.apache.org/examples/zh/editor.html?c=bar-background&code=PYBwLglsB2AEC8sDeBYAUASAEQHMBOEAJlgFzLobYA2ApgGZimwAMANBdgTgBaNlYBWAKRZ2mbACNgYMMAC2TQSLGUsskIoCMzZRywBjGGACGEaABljEmlSZg8AVxoUAvirXBgVSBrKpxalw4NHiKxgAeEADOonpR3MAA7gDCRjTQfLB0xlRRNCrYEdEACsBmYCFM_pTYYACeIDSKVGZNBdStAMr1tFUcqvWNilFeRLHiqoZUwKH8AMTMACxLmgJY_S4cm5huFFi0wdDEfnEJiUzZuc477uEAgpExJwGDTfz6xhU4M3XjqkVRAAqEH0AGs-hMsPEkhccnktgUsADzK0ITUoWdYVd2vsuj03uQJtgpjNFHMABx3ckAUQAnLT1hNtpRdgFCJ9jEwANpYZjMEh80SwXn87RCkUkABMzHFfJIAGYZaxhXLlrL-QIlSrNAKtbydWLlfqpXrmDrFbKdWqcWaSJrZZLdQ6SIaVY7pc6LUbmI7rW67ab5U7vUHXbygx6Qwqlf1wyQ_XH7d7FsGVSmw0sTbKU160_HTSmkyqBKneSWMyXI7HmCXc2X87KS0XeQA2UvMNsZtuRlVtusdhvetvN5gAdnb48N1fHPd54_744TY4DsvJ7bXGbXs-Ya_7a6Xa5HtOD1ePGeP2-P_ePS-Pze0pYfYYfs4fdYfCYfSdjmh1gqNv4unqgGvuawFWuBK4AY6_7CpojrPu6wGOu-voxpC8FQXBQawVgmihsBEaEdG4r4YO2FYXhKa4Zo6bASmr45uh6K0eRVGUasj7lsBlY8SRAElp-TbAW2NGdiJWY4pofYSZ-w7AeONGTgpklwfOKmfuO95rjRG7MaomhbsBu7GWxhkcceNFnsBF42fxcE3nZzbSiekIuWGLmzi5dYuQmLnOX-eqSgaQU6l5YHisFbFRd-bkwUFCEJapWCSihSV-Y6zk4UFBGRUReX2SlQbWrGkpBvaHAALquO4dQPNEaK1A0BJYAAbjkTh_NgUQgC0YAotABLVKoLSDd0dS9M8NRNUM_DsvENDEO0xJeKS8zJAAQgAIswW3UoyNTMhgrL_I8A1DbG0LnGQlx5Dio00ONk2EtNBirbMwoUlSdIMhsCJ6ACwJgo13WYjdcLXCyiLlCE7W2GQ0AOFQVCInIZhMOSbB6HIERMNozA1Xs7ImAAWp4ChkFyw1qM1ihmFERBtHEJh4JkWMBOkxywPjqNmJ0IDGNATDSoidAQN4IQALLAIQLXQDATSuJV7h5AQNBPLAVN6MTnKU8N2Bw51ZC0i2OIQBUchPRdRJvdMH1YHMixbRt1Lkmsy1YKAxj6ObvxkMwAB0Ah_eIbgvaohsEojyM4gztAZHYjj5LG5s0Jb-IgytdtktSPp511qhez79RMIHwdMgi4cGx1BL0mbFtW5nttrZ9Tsu27BfYEXvul0HIdQ1XbU10w0co5d4vpJk9hOPXaeN1N6Ikvbcy59KVY293Jf-33Feh8q-tD1QRuwHXKcNxnC-TO9ZJt677v9F3AvF37LA74dlcH5HTCn5CqfpxN1tXpLxvs7O-ndPZPx7tvcu7896Dy_sbWks9_7PX1lnFuDtb4dw9pvF-Zd-7HX3rGBBJ9yTIPnlXdBy8sH3w3pArer8YEsg_sQ4exsyFnznhfShzdqGgOwQ_CB3soGMIIWHT-bCT5IM4SgwBi9r7zBoeA3BvcmHHRYZCEhP90R_woWg3hID260Neio6BYiiGaMkdo1QujuH6OAYo_hxj0SmNEbvAeEij612kb_c-ACm4ONbk45R9C8Fv2YXAzxx9rHYFsf4y-VDDFgJwaE1R5j4FWI4b4rh8SeGBMwcElJwiGH4PcYQjJXjv4-J0X41Bgj8mO0KYI1xpTYEeNYZU9h5C7H1IUUEoxITilhLUUdcRHTommxkXo3p2dHEDKKc_NJZSxmWM6SfSZ2TZEBL6QU-ZzTUlmOWRY9EWiBDdNyfYnZjS9l0KGUstp5Som1w2TUnJdSbYNKUQskRrSIntNWRM857ygFXK-fsu5hyHkrJOVYs5UyekfNBU025izIV_MeeM7xQK5FX1mf05J4LUVuKhcciOVjqk2NqTixJcyCUop-eE9RkTMVVOxdsvFuy6UmIOcS9F0KyVrJiVgOJwL5EcuuVylxPLflMv-TCwVWTXlbISQY2lAj6UlMZaM0l1cFVspVZ85F3KIW8tlRigFtdFWUredS1V-L1XGqJTK7VFTokUtiVS9lGCJUOqlSa51Gj5Vuv1XkpFNzHUMpGYGgV0T2ZKumYi8VAAxUcG1NT6ULtKrV0bdXBvhRcmZ3qwUauGekp538XnWuVaG8VxaI2aqjcyi1FaQ2XNrUav1Trs1NqDZa1tha-Hhs7ZGstLLEH9sTUWjtmb_XdrlTGvt-bRW4qnUOmdXbG3ztzVipdtrDVrsfrOzd5re3fytR6m1XrB2SvXSOo5rrF2bITSC9tB6hEbtHc2rpu6r1JN9behtn7T3jp_QasNN7D0fvveW79T6EUvtXRB99d6SUPtZaBmtiH_2QZQ3ynVh881wYLZO692HkOAeg2OqRE6EOkecQB0tlGv3UYw22rD9GcMUdQzB2Ao8aNiu9avfO3yuN4bQwjJGY8iPLppZ9IT6962Me41R2ko5-Mrro4MqDynmN8dYwOnOecFPDtE2a_l26R6SfU7Jh28mM2caU2JnjqnrN2s5WRlpc6T0LsszHfTJHDNr3s-RxzZn8NaPdcKz1YHX1Ic88e8zBHH3xvgwJzTInQsup43p6Te6rl2a07hsL4n1muf3XFrNCXwuZLK-BjzlWgM-Yk353Lv75gFYy_cpzVGcspeI7RwLwnCVFayz1qz_mBvtaM8F-LjWLMgdazF9jhXTOjd0-NxbmHl4deG6tnNSXfNSb6zJtzK9psrcy_tkhvWq3PrS4N4zDGuvFec-eqLl6lvpd25dntTXSsTfu2qjjIXntreA7xjbx28vip2yW0HV2asA403-4Hs2mPg5uxe6tbHtvnc62il7Y2WtQ7a3JvH334e_fm_9zbOOUcXcp1ug7zWju3dS8jqbQWGcE7B39k2tXYv1aPXN5nJ81NI5sz61HDX0d88iyK6Hy38emt59ToVCvSfuel8L2X1PMfvexwZznQ24c84R2s_XGvPsPZmzLnT4PaRvat1t-nyuA1U9F5b6LLvjePYc4z7zevIds_64DsnXO3decS9d4PWO7sc_DybxTAfo-I9p0b-12vtPdeY-r73dOgfc5V-b4-XuPs-8T37kHZuPdaMrXH9nku60mZ-0zmPxOQ8nYabD5PNe29p5J9bwvkeqslbL4bgLvvbc6_t3zp3-eM9a6L-7_vgr5cL8n5n5fUfqsW9jwb-Pkue8t5T7v0v-_ncF8r9P7PhPc_z_L1fpfI-RdaIfxPybW-X-69F47gXSuKc-9A9f919H9F8pdt9R9ssL8N9P9bNydTdi9a9yV_8vtECV9gD29WcG9Q8E94CI9ACkDV9CNB8K9n9CCMDU9BVxd09N9yD0Cd8St-cJdTtm8nsgCqCSDO9Fc0De8iDMDJFx9D9Ttj92D-DOCo4YCwC6CzsCCGCoCVNQCP8w96C-DKCz8d1aC4CIDv9Z9qdyRJRUCyQk07gWxlgb8RsS9NDSCn8dCKDGDnMlDhDyshdb9VcQCjDh97CFD79PCv9vDX8B9uDNc7D5DAi9UWCXCs9LDkC98O8cCu98sEC1CHCidsCD9G8RDkiT8OCNDDs_D8Ck8cjxC8iWcCjZCiixD1Cx8pDlC8CKiq80c9DPdajnCki5CUifCMdWjMju9siqjUj1t4iMjcCj9-j_dciajhjL9wDRCJiSipj0iZiZC5jq8FjoDpjYCVCGiLC9tYjz9NjpDtDVimic9ujDi6ixiOjijqiNilitj6iTi7czi_shDej2jKj5jbjFDyi2CvjBjzj7ijjtiniZ8Xig8Li2iYdxi1jvjc968RjEjBdoi9jiDJDIT3joTriBiujXiejRisjsT_jcSISgTLjCTPjYSAS8SMSCS-iiSqSSSWjaSkTBMYTTi79ATyjQS3CthlY9BXhFAJBjBQhEQ04QBuBjAGYNYD5li-DNAxElZ0AXAgA
import * as echarts from 'echarts';
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option;
option = { grid: { left: 0, right: '5%', bottom: '5%', top: '10%', containLabel: true }, tooltip: { trigger: 'axis', showContent: false, axisPointer: { type: 'line', lineStyle: { type: 'solid', color: '#040415' } } }, legend: { show: false }, xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, data: [ '00:00', '00:10', '00:20', '00:30', '00:40', '00:50', '01:00', '01:10', '01:20', '01:30', '01:40', '01:50', '02:00', '02:10', '02:20', '02:30', '02:40', '02:50', '03:00', '03:10', '03:20', '03:30', '03:40', '03:50', '04:00', '04:10', '04:20', '04:30', '04:40', '04:50', '05:00', '05:10', '05:20', '05:30', '05:40', '05:50', '06:00', '06:10', '06:20', '06:30', '06:40', '06:50', '07:00', '07:10', '07:20', '07:30', '07:40', '07:50', '08:00', '08:10', '08:20', '08:30', '08:40', '08:50', '09:00', '09:10', '09:20', '09:30', '09:40', '09:50', '10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20', '11:30', '11:40', '11:50', '12:00', '12:10', '12:20', '12:30', '12:40', '12:50', '13:00', '13:10', '13:20', '13:30', '13:40', '13:50', '14:00', '14:10', '14:20', '14:30', '14:40', '14:50', '15:00', '15:10', '15:20', '15:30', '15:40', '15:50', '16:00', '16:10', '16:20', '16:30', '16:40', '16:50', '17:00', '17:10', '17:20', '17:30', '17:40', '17:50', '18:00', '18:10', '18:20', '18:30', '18:40', '18:50', '19:00', '19:10', '19:20', '19:30', '19:40', '19:50', '20:00', '20:10', '20:20', '20:30', '20:40', '20:50', '21:00', '21:10', '21:20', '21:30', '21:40', '21:50', '22:00', '22:10', '22:20', '22:30', '22:40', '22:50', '23:00', '23:10', '23:20', '23:30', '23:40', '23:50' ] }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#CBD0DE' } }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, axisTick: { show: false }, interval: null, min: 80, max: 100 }, dataZoom: [ { type: 'inside', start: 0, end: 100, minSpan: 20, filterMode: 'none' } ], series: [ { data: [ { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 90, itemStyle: { color: '#F7B500', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 82, itemStyle: { color: '#FA6400', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } } ], type: 'bar', emphasis: { itemStyle: { opacity: 1 } } } ] };
option && myChart.setOption(option);
The emphasis highlighting and shadow focus are incorrect when clicking on the bar chart.
I hope the tooltip and emphasis can focus on the same item and stay consistent.
- OS: Window 11 - Browser: Chrome 129.0.6668.101 - Framework: Vue@2
In the H5 environment, especially when clicking on a blank area, it is easy to highlight nearby values.
@ywAlexyw It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
Version
5.3.2
Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=bar-background&code=PYBwLglsB2AEC8sDeBYAUASAEQHMBOEAJlgFzLobYA2ApgGZimwAMANBdgTgBaNlYBWAKRZ2mbACNgYMMAC2TQSLGUsskIoCMzZRywBjGGACGEaABljEmlSZg8AVxoUAvirXBgVSBrKpxalw4NHiKxgAeEADOonpR3MAA7gDCRjTQfLB0xlRRNCrYEdEACsBmYCFM_pTYYACeIDSKVGZNBdStAMr1tFUcqvWNilFeRLHiqoZUwKH8AMTMACxLmgJY_S4cm5huFFi0wdDEfnEJiUzZuc477uEAgpExJwGDTfz6xhU4M3XjqkVRAAqEH0AGs-hMsPEkhccnktgUsADzK0ITUoWdYVd2vsuj03uQJtgpjNFHMABx3ckAUQAnLT1hNtpRdgFCJ9jEwANpYZjMEh80SwXn87RCkUkABMzHFfJIAGYZaxhXLlrL-QIlSrNAKtbydWLlfqpXrmDrFbKdWqcWaSJrZZLdQ6SIaVY7pc6LUbmI7rW67ab5U7vUHXbygx6Qwqlf1wyQ_XH7d7FsGVSmw0sTbKU160_HTSmkyqBKneSWMyXI7HmCXc2X87KS0XeQA2UvMNsZtuRlVtusdhvetvN5gAdnb48N1fHPd54_744TY4DsvJ7bXGbXs-Ya_7a6Xa5HtOD1ePGeP2-P_ePS-Pze0pYfYYfs4fdYfCYfSdjmh1gqNv4unqgGvuawFWuBK4AY6_7CpojrPu6wGOu-voxpC8FQXBQawVgmihsBEaEdG4r4YO2FYXhKa4Zo6bASmr45uh6K0eRVGUasj7lsBlY8SRAElp-TbAW2NGdiJWY4pofYSZ-w7AeONGTgpklwfOKmfuO95rjRG7MaomhbsBu7GWxhkcceNFnsBF42fxcE3nZzbSiekIuWGLmzi5dYuQmLnOX-eqSgaQU6l5YHisFbFRd-bkwUFCEJapWCSihSV-Y6zk4UFBGRUReX2SlQbWrGkpBvaHAALquO4dQPNEaK1A0BJYAAbjkTh_NgUQgC0YAotABLVKoLSDd0dS9M8NRNUM_DsvENDEO0xJeKS8zJAAQgAIswW3UoyNTMhgrL_I8A1DbG0LnGQlx5Dio00ONk2EtNBirbMwoUlSdIMhsCJ6ACwJgo13WYjdcLXCyiLlCE7W2GQ0AOFQVCInIZhMOSbB6HIERMNozA1Xs7ImAAWp4ChkFyw1qM1ihmFERBtHEJh4JkWMBOkxywPjqNmJ0IDGNATDSoidAQN4IQALLAIQLXQDATSuJV7h5AQNBPLAVN6MTnKU8N2Bw51ZC0i2OIQBUchPRdRJvdMH1YHMixbRt1Lkmsy1YKAxj6ObvxkMwAB0Ah_eIbgvaohsEojyM4gztAZHYjj5LG5s0Jb-IgytdtktSPp511qhez79RMIHwdMgi4cGx1BL0mbFtW5nttrZ9Tsu27BfYEXvul0HIdQ1XbU10w0co5d4vpJk9hOPXaeN1N6Ikvbcy59KVY293Jf-33Feh8q-tD1QRuwHXKcNxnC-TO9ZJt677v9F3AvF37LA74dlcH5HTCn5CqfpxN1tXpLxvs7O-ndPZPx7tvcu7896Dy_sbWks9_7PX1lnFuDtb4dw9pvF-Zd-7HX3rGBBJ9yTIPnlXdBy8sH3w3pArer8YEsg_sQ4exsyFnznhfShzdqGgOwQ_CB3soGMIIWHT-bCT5IM4SgwBi9r7zBoeA3BvcmHHRYZCEhP90R_woWg3hID260Neio6BYiiGaMkdo1QujuH6OAYo_hxj0SmNEbvAeEij612kb_c-ACm4ONbk45R9C8Fv2YXAzxx9rHYFsf4y-VDDFgJwaE1R5j4FWI4b4rh8SeGBMwcElJwiGH4PcYQjJXjv4-J0X41Bgj8mO0KYI1xpTYEeNYZU9h5C7H1IUUEoxITilhLUUdcRHTommxkXo3p2dHEDKKc_NJZSxmWM6SfSZ2TZEBL6QU-ZzTUlmOWRY9EWiBDdNyfYnZjS9l0KGUstp5Som1w2TUnJdSbYNKUQskRrSIntNWRM857ygFXK-fsu5hyHkrJOVYs5UyekfNBU025izIV_MeeM7xQK5FX1mf05J4LUVuKhcciOVjqk2NqTixJcyCUop-eE9RkTMVVOxdsvFuy6UmIOcS9F0KyVrJiVgOJwL5EcuuVylxPLflMv-TCwVWTXlbISQY2lAj6UlMZaM0l1cFVspVZ85F3KIW8tlRigFtdFWUredS1V-L1XGqJTK7VFTokUtiVS9lGCJUOqlSa51Gj5Vuv1XkpFNzHUMpGYGgV0T2ZKumYi8VAAxUcG1NT6ULtKrV0bdXBvhRcmZ3qwUauGekp538XnWuVaG8VxaI2aqjcyi1FaQ2XNrUav1Trs1NqDZa1tha-Hhs7ZGstLLEH9sTUWjtmb_XdrlTGvt-bRW4qnUOmdXbG3ztzVipdtrDVrsfrOzd5re3fytR6m1XrB2SvXSOo5rrF2bITSC9tB6hEbtHc2rpu6r1JN9behtn7T3jp_QasNN7D0fvveW79T6EUvtXRB99d6SUPtZaBmtiH_2QZQ3ynVh881wYLZO692HkOAeg2OqRE6EOkecQB0tlGv3UYw22rD9GcMUdQzB2Ao8aNiu9avfO3yuN4bQwjJGY8iPLppZ9IT6962Me41R2ko5-Mrro4MqDynmN8dYwOnOecFPDtE2a_l26R6SfU7Jh28mM2caU2JnjqnrN2s5WRlpc6T0LsszHfTJHDNr3s-RxzZn8NaPdcKz1YHX1Ic88e8zBHH3xvgwJzTInQsup43p6Te6rl2a07hsL4n1muf3XFrNCXwuZLK-BjzlWgM-Yk353Lv75gFYy_cpzVGcspeI7RwLwnCVFayz1qz_mBvtaM8F-LjWLMgdazF9jhXTOjd0-NxbmHl4deG6tnNSXfNSb6zJtzK9psrcy_tkhvWq3PrS4N4zDGuvFec-eqLl6lvpd25dntTXSsTfu2qjjIXntreA7xjbx28vip2yW0HV2asA403-4Hs2mPg5uxe6tbHtvnc62il7Y2WtQ7a3JvH334e_fm_9zbOOUcXcp1ug7zWju3dS8jqbQWGcE7B39k2tXYv1aPXN5nJ81NI5sz61HDX0d88iyK6Hy38emt59ToVCvSfuel8L2X1PMfvexwZznQ24c84R2s_XGvPsPZmzLnT4PaRvat1t-nyuA1U9F5b6LLvjePYc4z7zevIds_64DsnXO3decS9d4PWO7sc_DybxTAfo-I9p0b-12vtPdeY-r73dOgfc5V-b4-XuPs-8T37kHZuPdaMrXH9nku60mZ-0zmPxOQ8nYabD5PNe29p5J9bwvkeqslbL4bgLvvbc6_t3zp3-eM9a6L-7_vgr5cL8n5n5fUfqsW9jwb-Pkue8t5T7v0v-_ncF8r9P7PhPc_z_L1fpfI-RdaIfxPybW-X-69F47gXSuKc-9A9f919H9F8pdt9R9ssL8N9P9bNydTdi9a9yV_8vtECV9gD29WcG9Q8E94CI9ACkDV9CNB8K9n9CCMDU9BVxd09N9yD0Cd8St-cJdTtm8nsgCqCSDO9Fc0De8iDMDJFx9D9Ttj92D-DOCo4YCwC6CzsCCGCoCVNQCP8w96C-DKCz8d1aC4CIDv9Z9qdyRJRUCyQk07gWxlgb8RsS9NDSCn8dCKDGDnMlDhDyshdb9VcQCjDh97CFD79PCv9vDX8B9uDNc7D5DAi9UWCXCs9LDkC98O8cCu98sEC1CHCidsCD9G8RDkiT8OCNDDs_D8Ck8cjxC8iWcCjZCiixD1Cx8pDlC8CKiq80c9DPdajnCki5CUifCMdWjMju9siqjUj1t4iMjcCj9-j_dciajhjL9wDRCJiSipj0iZiZC5jq8FjoDpjYCVCGiLC9tYjz9NjpDtDVimic9ujDi6ixiOjijqiNilitj6iTi7czi_shDej2jKj5jbjFDyi2CvjBjzj7ijjtiniZ8Xig8Li2iYdxi1jvjc968RjEjBdoi9jiDJDIT3joTriBiujXiejRisjsT_jcSISgTLjCTPjYSAS8SMSCS-iiSqSSSWjaSkTBMYTTi79ATyjQS3CthlY9BXhFAJBjBQhEQ04QBuBjAGYNYD5li-DNAxElZ0AXAgA
Steps to Reproduce
import * as echarts from 'echarts';
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option;
option = { grid: { left: 0, right: '5%', bottom: '5%', top: '10%', containLabel: true }, tooltip: { trigger: 'axis', showContent: false, axisPointer: { type: 'line', lineStyle: { type: 'solid', color: '#040415' } } }, legend: { show: false }, xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, data: [ '00:00', '00:10', '00:20', '00:30', '00:40', '00:50', '01:00', '01:10', '01:20', '01:30', '01:40', '01:50', '02:00', '02:10', '02:20', '02:30', '02:40', '02:50', '03:00', '03:10', '03:20', '03:30', '03:40', '03:50', '04:00', '04:10', '04:20', '04:30', '04:40', '04:50', '05:00', '05:10', '05:20', '05:30', '05:40', '05:50', '06:00', '06:10', '06:20', '06:30', '06:40', '06:50', '07:00', '07:10', '07:20', '07:30', '07:40', '07:50', '08:00', '08:10', '08:20', '08:30', '08:40', '08:50', '09:00', '09:10', '09:20', '09:30', '09:40', '09:50', '10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20', '11:30', '11:40', '11:50', '12:00', '12:10', '12:20', '12:30', '12:40', '12:50', '13:00', '13:10', '13:20', '13:30', '13:40', '13:50', '14:00', '14:10', '14:20', '14:30', '14:40', '14:50', '15:00', '15:10', '15:20', '15:30', '15:40', '15:50', '16:00', '16:10', '16:20', '16:30', '16:40', '16:50', '17:00', '17:10', '17:20', '17:30', '17:40', '17:50', '18:00', '18:10', '18:20', '18:30', '18:40', '18:50', '19:00', '19:10', '19:20', '19:30', '19:40', '19:50', '20:00', '20:10', '20:20', '20:30', '20:40', '20:50', '21:00', '21:10', '21:20', '21:30', '21:40', '21:50', '22:00', '22:10', '22:20', '22:30', '22:40', '22:50', '23:00', '23:10', '23:20', '23:30', '23:40', '23:50' ] }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#CBD0DE' } }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, axisTick: { show: false }, interval: null, min: 80, max: 100 }, dataZoom: [ { type: 'inside', start: 0, end: 100, minSpan: 20, filterMode: 'none' } ], series: [ { data: [ { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 90, itemStyle: { color: '#F7B500', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 82, itemStyle: { color: '#FA6400', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } } ], type: 'bar', emphasis: { itemStyle: { opacity: 1 } } } ] };
option && myChart.setOption(option);
Current Behavior
The emphasis highlighting and shadow focus are incorrect when clicking on the bar chart.
Expected Behavior
I hope the tooltip and emphasis can focus on the same item and stay consistent.
Environment
Any additional comments?
In the H5 environment, especially when clicking on a blank area, it is easy to highlight nearby values.