highCharts 3D版数据监控

                 <el-table-column lazy label="视图" width="120" align="center">
                    <template slot-scope="scope">
                        <highcharts :options="scope.row.chartOptions" class="high-chart">                    
                         </highcharts>
                        <!-- <div :ref="'contentEchart' + scope.row.apiId" -->
                                <!-- style="width:100%; height:60px;"> -->
                        <!-- </div> -->
                   </template>
                </el-table-column>
const dataName = ['200','500','400','0','401','504','503','429','404','402'];
                var seriesArr = [];
                dataName.forEach((item,index) => {
                    let obj = {
                        name: item,
                        data: chartData[`total${item}`],
                        color: item == '200' ? '#82D6C5' : item == '总量' ? '#CACCCE' :          
                        '#EE6666',
                        stack: 'male'
                    }
                    if(obj)
                    seriesArr.push(obj)
                })
                this.chartOptions = {
                    chart: {
                        type: 'column',
                        options3d: {
                            enabled: true,
                            alpha: 10,
                            beta: 0,
                            viewDistance: 25,
                            depth: 30
                        },
                        marginTop: 30,
                        marginRight: 40
                    },
                    title: {
                        text: '标题'
                    },
                    credits: {  //去掉highcharts.com
                        enabled:false
                    },
                    xAxis: {
                        categories: chartData.xAxisData
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: '调用量'
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            depth: 40
                        }
                    },
                    series: seriesArr
                }

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值