首页echarts 3d柱状图 demo

echarts 3d柱状图 demo

时间: 2023-10-05 14:06:42 浏览: 179

以下是一个基本的echarts 3D柱状图demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 3D Bar Chart Example</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 data = [ [0, 0, 0, 2], [0, 1, 0, 3], [0, 2, 0, 4], [1, 0, 0, 5], [1, 1, 0, 6], [1, 2, 0, 7], [2, 0, 0, 8], [2, 1, 0, 9], [2, 2, 0, 10] ]; myChart.setOption({ tooltip: {}, visualMap: { max: 10, inRange: { color: ['#e0ffff', '#006edd'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C'] }, yAxis3D: { type: 'category', data: ['X', 'Y', 'Z'] }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // projection: 'orthographic' }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2], item[3]] } }), shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 }, formatter: function (param) { return param.value[3]; } }, itemStyle: { opacity: 0.8 }, emphasis: { label: { textStyle: { fontSize: 20, color: '#900' } }, itemStyle: { color: '#900' } } }] }); </script> </body> </html> ``` 在这个demo中，我们使用了echarts 5.2.1版本，定义了一个3D柱状图，并设置了x、y、z轴的数据和光照等参数。你可以根据需要自定义数据和样式。

阅读全文