echarts + highcharts 柱状图

 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

https://www.highcharts.com.cn/docs/basic-chart

posted @ 2019-09-03 14:26  不会游泳的鱼~~  阅读(340)  评论(0)  编辑  收藏  举报