echarts-pareto图

作者: 转身丶即天涯 | 来源:发表于2018-03-08 19:45 被阅读146次

echarts-pareto图
图图图图图！
视觉图图图图图
haproxy
图图图
图图图
keepalived
软件工程基本术语(一、各种图)
嘻嘻嘻嘻嘻嘻
小学生作品点评，题为“爱岗敬业”

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/echarts.js"></script>
    </head>

    <body>
        <div id="main" style="width: 700px;height: 500px;"></div>

        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById("main"));

            //  计算百分比数据
            var rec = [0.7, 0.73, 0.80, 0.82, 0.90, 0.91, 0.92, 0.93, 0.98, 1];
            var res = [];
            for(var i in rec){
                res.push(rec[i] * 100);
            };
            
            //  获取X轴数据
            var data_xaxis = ['导入收费信息',
                        'Start Tenant...',
                        '病例',
                        '刷全部诊所...',
                        '更新病例汇...',
                        '导入预约模块',
                        '导入患者',
                        '随访',
                        '新增患者家...',
                        '修正患者联...'];
                        
            //  获取左侧Y轴数据(分钟)
            var data_yaxis_left = [1380, 300, 198, 120, 115,
                        78, 75, 56, 56, 48];
            
            
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                legend: {
                    data: ['分钟', '百分比']
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    data: data_xaxis,
                    axisLabel:{
                        rotate: 45,
                        interval: 0,
                        margin:5
                    }
                }, {
                    type: 'category',
                    boundaryGap: true,
                    data: []
                }],
                yAxis: [{
                    type: 'value',
                    scale: true,
                    name: '分钟',
                    max: 1500,
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                }, {
                    axisLabel: {
                        formatter: function(value){
                            return value + '%';
                        }
                    },
                    type: 'value',
                    scale: true,
                    name: '耗时占比',
                    max: 100,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }],
                series: [{
                    name: '分钟',
                    type: 'bar',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: data_yaxis_left
                }, {
                    name: '百分比',
                    yAxisIndex: 1,
                    data: res,
                    type: 'line',
                    smooth: true
                }]

            };

            myChart.setOption(option);
        </script>
    </body>

</html>

pareto