首页我想要一个echarts表现开关状态的例子

我想要一个echarts表现开关状态的例子

时间: 2023-05-22 17:02:07 浏览: 88

好的，以下是一个使用 ECharts 表现开关状态的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 表现开关状态的例子</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> var myChart = echarts.init(document.getElementById('chart')); var option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 1, axisLine: { lineStyle: { width: 10, color: [[0.5, '#1e90ff'], [1, '#ff4500']] } }, pointer: { show: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, detail: { show: false }, data: [{value: 0.5, name: '开关'}] } ] }; myChart.setOption(option); // 切换开关状态 function toggleSwitch() { var data = myChart.getOption().series[0].data[0]; data.value = 1 - data.value; myChart.setOption({ series: [{ data: [data] }] }); } // 点击图表切换开关状态 myChart.on('click', toggleSwitch); </script> </body> </html> ``` 这个例子使用了 ECharts 的仪表盘（gauge）系列来表现开关状态，通过点击图表可以切换开关状态。

阅读全文