echarts：
highcharts 3D柱状图 ,代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script> <script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script> <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script> <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> </head> <body> <div id="container" style="height: 400px"></div> <script type="text/javascript"> /* var chart = Highcharts.chart('container',{ chart: { type: 'column', margin: 75, options3d: { enabled: true, alpha: 6, beta: -20, depth: 90, viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图 frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成 // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、 // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色 bottom: { size: 10 }, side: { size: 1, color: 'transparent' }, back: { size: 1, color: 'transparent' } } }, }, title: { text: '包含空值的3D柱状图' }, subtitle: { text: '请注意值为 0 和 null 的区别' }, plotOptions: { column: { depth: 25 } }, xAxis: { categories: Highcharts.getOptions().lang.shortMonths }, yAxis: { title: { text: null } }, series: [{ name: '销售', data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3] }] }); */ var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', options3d: { enabled: true, alpha: 6, beta: -10, depth: 50, viewDistance: 100 } }, title: { text: '交互性3D柱状图' }, subtitle: { text: '可通过滑动下方滑块测试' }, plotOptions: { column: { depth: 25 } }, xAxis: { //categories: Highcharts.getOptions().lang.shortMonths categories: ['1', '2', '3', '4', '5','6','7','8','9','10','11','12'] }, yAxis: { allowDecimals: false, min: 0, title: { text: '水果数量' } /* title: { text: null } */ }, series: [{ name:'图例1', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); </script> </body> </html>
tips:
1. 如何不显示某个图例
设置 showInLegend
series: [{ data: [], name: "", showInLegend: false // 设置为 false 即为不显示在图例中 }, { data: [], name: "", showInLegend: true // 默认值 }]
2. 值显示在柱状图的里面
plotOptions: { column: { depth: 25, dataLabels: { enabled: true, inside: true, style:{ color:"#fff" } }, },
基础数据 ： https://api.highcharts.com.cn/highcharts
https://www.highcharts.com.cn/demo/highcharts/3d-column-interactive