R R*_*jan 5 javascript graph echarts
I have created a bar graph using the echarts library. How can I highlight the bar graph when the user clicks on a bar, or else apply the bar border when a bar is clicked?
有没有办法在触发栏的单击事件时突出显示该栏？
是的，有一种方法可以在单击时突出显示一个栏。
\n\n当点击事件被触发时，你可以从参数中获取到被点击的具体数据（单条），然后你只需要改变这个数据的颜色（例如减少alpha）就可以达到“突出显示”的目的。
\n\n同时不要忘记其他数据（未单击的）的恢复颜色。
\n\n检查这个演示
\n\nlet echartsObj = echarts.init(document.querySelector(\'#canvas\'));\r\n\r\n\r\noption = {\r\n\r\n\r\n grid: {\r\n left: \'3%\',\r\n right: \'4%\',\r\n bottom: \'3%\',\r\n containLabel: true\r\n },\r\n xAxis: [{\r\n type: \'category\',\r\n data: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\'],\r\n\r\n }],\r\n yAxis: [{\r\n type: \'value\'\r\n }],\r\n series: [{\r\n name: \'\xe7\x9b\xb4\xe6\x8e\xa5\xe8\xae\xbf\xe9\x97\xae\',\r\n type: \'bar\',\r\n barWidth: \'60%\',\r\n data: [{\r\n value: 10,\r\n itemStyle: {\r\n color: \'hsl(200,60%,45%)\'\r\n }\r\n }, {\r\n value: 52,\r\n itemStyle: {\r\n color: \'hsl(200,60%,45%)\'\r\n }\r\n }, {\r\n value: 200,\r\n itemStyle: {\r\n color: \'hsl(60,60%,45%)\'\r\n }\r\n }, {\r\n value: 334,\r\n itemStyle: {\r\n color: \'hsl(150,60%,45%)\'\r\n }\r\n }, {\r\n value: 390,\r\n itemStyle: {\r\n color: \'hsl(220,60%,45%)\'\r\n }\r\n }, {\r\n value: 330,\r\n itemStyle: {\r\n color: \'hsl(200,60%,45%)\'\r\n }\r\n }, {\r\n value: 220,\r\n itemStyle: {\r\n color: \'hsl(150,60%,45%)\'\r\n }\r\n }]\r\n }]\r\n};\r\n\r\nechartsObj.setOption(option)\r\n\r\nechartsObj.on(\'click\', function(params) {\r\n console.log(params)\r\n option.series[0].data.forEach((data, index) => {\r\n if (index === params.dataIndex) {\r\n if (!data.isChecked) {\r\n data.itemStyle.color = getHighLightColor(data.itemStyle.color);\r\n data.isChecked = true;\r\n }\r\n } else {\r\n if (data.isChecked) {\r\n data.itemStyle.color = getOrigColor(data.itemStyle.color);\r\n data.isChecked = false;\r\n }\r\n\r\n }\r\n })\r\n echartsObj.setOption(option)\r\n});\r\n\r\n\r\nfunction getHighLightColor(color) {\r\n return color.replace(/(\\d+)%\\)/, (...args) => {\r\n return 20 + Number(args[1]) + \'%)\'\r\n });\r\n}\r\n\r\n\r\nfunction getOrigColor(highlightColor) {\r\n return highlightColor.replace(/(\\d+)%\\)/, (...args) => {\r\n return Number(args[1]) - 20 + \'%)\'\r\n });\r\n} <html>\r\n <header>\r\n <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>\r\n </header>\r\n <body>\r\n <div id="canvas" style="width: 100%; height: 200px">\r\n\r\n</div>\r\n </body>\r\n </html>| 归档时间： |
|
| 查看次数： |
8134 次 |
| 最近记录： |