首页echarts双向柱状图设置不显示坐标轴

echarts双向柱状图设置不显示坐标轴

时间: 2024-12-06 13:15:29 浏览: 34

在ECharts中，如果你想创建一个双向柱状图并且不显示坐标轴，可以通过设置xAxis和yAxis的配置项来实现。以下是一个示例代码，展示了如何创建一个双向柱状图并且不显示坐标轴： ```html <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <title>ECharts</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="main" style="height: 100%"></div> <script type="text/javascript"> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { show: false // 不显示x轴 }, yAxis: { show: false // 不显示y轴 }, series: [ { type: 'bar', data: [10, 20, 30, 40, 50], label: { show: true, position: 'right' }, name: '正向柱状图' }, { type: 'bar', data: [-10, -20, -30, -40, -50], label: { show: true, position: 'left' }, name: '负向柱状图' } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['正向柱状图', '负向柱状图'] } }; option && myChart.setOption(option); </script> </body> </html> ``` 在这个示例中，通过设置`xAxis`和`yAxis`的`show`属性为`false`，我们实现了不显示坐标轴的效果。同时，我们创建了两个柱状图系列，一个正向一个负向，分别通过`label`属性来显示数据标签。

阅读全文