Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

Highcharts图表之堆叠3D柱状图

$(document).ready(function() {  
   var chart = {      
      type: 'column',
      marginTop: 80,
      marginRight: 40,
      options3d: {
         enabled: true,
         alpha: 15,
         beta: 15,
         viewDistance: 25,
         depth: 40
      }
   };
   var title = {
      text: 'Highcharts图表之堆叠3D柱形图'   
   };   
   var xAxis = {
      categories: ['vue', 'html', 'css', 'jquery', 'node']
   };
   var yAxis = {
      allowDecimals: false,
      min: 0,
      title: {
         text: '访问量'
      }
   };  

   var tooltip = {
      headerFormat: '{point.key}
',
      pointFormat: '\u25CF {series.name}: {point.y} / {point.stackTotal}'
   };

   var plotOptions = {
      column: {
         stacking: 'normal',
         depth: 40
      }
   };   
   var series= [{
         name: '成年男性',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
         }, {
            name: '未成年男性',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
         }, {
            name: '成年女性',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
         }, {
            name: '未成年女性',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;      
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.tooltip = tooltip; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $('#myChart').highcharts(json);
});

点击运行 》

点击展开全文

相关文章

  1. 如何利用Highcharts中使用盒须图来展示数据
  2. 百度Echarts柱状图系列之3d自定义效果
  3. Highcharts图表之测量图
  4. Highcharts图表之3D圆环图
  5. Highcharts图表之3D饼图系列