JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://unpkg.com/echarts-gl/dist/echarts-gl.min.js"></script>
<div id="main" style="width: 600px;height:600px;"></div>
JavaScript
var myChart = echarts.init(document.getElementById('main'));
var option = {
legend: {
data: ['a', 'b', 'c', 'd']
},
xAxis3D: {
type: 'value',
show: false
},
yAxis3D: {
type: 'value',
},
zAxis3D: {
type: 'value',
},
grid3D: {
show: false,
viewControl: {
// zoomSensitivity: 0,
// rotateSensitivity: 0,
// panSensitivity: 0,
animation: true,
panMouseButton: 'right'
},
light: {
main: {
shadow: true,
quality: 'ultra',
intensity: 1.5
}
}
},
series: [
{
type: 'bar3D',
label: {
show: true,
distance: 2,
textStyle: {
color: '#000'
}
},
itemStyle: {
opacity: 0.8
},
name: 'a',
shading: 'lambert',
stack: 'stack',
data: [
[0, 10, 10]
]
},
{
type: 'bar3D',
label: {
show: true,
distance: 2,
textStyle: {
color: '#000'
}
},
itemStyle: {
opacity: 0.8
},
name: 'b',
shading: 'lambert',
stack: 'stack',
data: [
[0, 10, 20]
]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);