苍南县损失情况V2ECharts Gallery

20:11:45图表已生成
代码
var data = [
    [0, 0.995],
    [
        0,
        0.99
    ],
    [
        0,
        0.985
    ],
    [
        0,
        0.98
    ],
    [
        0,
        0.975
    ],
    [
        0,
        0.97
    ],
    [
        0,
        0.965
    ],
    [
        0,
        0.96
    ],
    [
        0,
        0.955
    ],
    [
        0,
        0.95
    ],
    [
        0,
        0.945
    ],
    [
        0,
        0.94
    ],
    [
        0,
        0.935
    ],
    [
        0,
        0.93
    ],
    [
        0,
        0.925
    ],
    [
        0,
        0.92
    ],
    [
        0,
        0.915
    ],
    [
        0,
        0.91
    ],
    [
        0,
        0.905
    ],
    [
        0,
        0.9
    ],
    [
        0,
        0.895
    ],
    [
        0,
        0.89
    ],
    [
        0,
        0.885
    ],
    [
        0,
        0.88
    ],
    [
        0,
        0.875
    ],
    [
        0,
        0.87
    ],
    [
        0,
        0.865
    ],
    [
        0,
        0.86
    ],
    [
        0,
        0.855
    ],
    [
        0,
        0.85
    ],
    [
        0,
        0.845
    ],
    [
        0,
        0.84
    ],
    [
        0.54701,
        0.835
    ],
    [
        0.76724,
        0.83
    ],
    [
        1.1782,
        0.825
    ],
    [
        1.2414,
        0.82
    ],
    [
        1.244,
        0.815
    ],
    [
        1.3969,
        0.81
    ],
    [
        1.4442,
        0.805
    ],
    [
        1.558,
        0.8
    ],
    [
        1.5899,
        0.795
    ],
    [
        1.7392,
        0.79
    ],
    [
        1.9467,
        0.785
    ],
    [
        1.9492,
        0.78
    ],
    [
        1.9604,
        0.775
    ],
    [
        2.0361,
        0.77
    ],
    [
        2.0751,
        0.765
    ],
    [
        2.1306,
        0.76
    ],
    [
        2.1558,
        0.755
    ],
    [
        2.207,
        0.75
    ],
    [
        2.5176,
        0.745
    ],
    [
        2.6749,
        0.74
    ],
    [
        2.9763,
        0.735
    ],
    [
        3.0372,
        0.73
    ],
    [
        3.2238,
        0.725
    ],
    [
        3.3803,
        0.72
    ],
    [
        3.4128,
        0.715
    ],
    [
        3.4341,
        0.71
    ],
    [
        3.5502,
        0.705
    ],
    [
        3.6421,
        0.7
    ],
    [
        3.6857,
        0.695
    ],
    [
        3.7361,
        0.69
    ],
    [
        3.7451,
        0.685
    ],
    [
        3.7613,
        0.68
    ],
    [
        3.7754,
        0.675
    ],
    [
        3.7949,
        0.67
    ],
    [
        3.8618,
        0.665
    ],
    [
        3.876,
        0.66
    ],
    [
        3.9345,
        0.655
    ],
    [
        3.9349,
        0.65
    ],
    [
        3.9491,
        0.645
    ],
    [
        3.956,
        0.64
    ],
    [
        3.9694,
        0.635
    ],
    [
        4.0463,
        0.63
    ],
    [
        4.238,
        0.625
    ],
    [
        4.3304,
        0.62
    ],
    [
        4.3598,
        0.615
    ],
    [
        4.3809,
        0.61
    ],
    [
        4.4273,
        0.605
    ],
    [
        4.4719,
        0.6
    ],
    [
        4.4791,
        0.595
    ],
    [
        4.5748,
        0.59
    ],
    [
        4.6843,
        0.585
    ],
    [
        4.8747,
        0.58
    ],
    [
        4.8858,
        0.575
    ],
    [
        4.8894,
        0.57
    ],
    [
        4.917,
        0.565
    ],
    [
        4.9471,
        0.56
    ],
    [
        4.9772,
        0.555
    ],
    [
        5.061,
        0.55
    ],
    [
        5.2877,
        0.545
    ],
    [
        5.463,
        0.54
    ],
    [
        5.4738,
        0.535
    ],
    [
        5.6132,
        0.53
    ],
    [
        5.8283,
        0.525
    ],
    [
        5.9676,
        0.52
    ],
    [
        6.0144,
        0.515
    ],
    [
        6.059,
        0.51
    ],
    [
        6.0835,
        0.505
    ],
    [
        6.1071,
        0.5
    ],
    [
        6.1412,
        0.495
    ],
    [
        6.2581,
        0.49
    ],
    [
        6.2659,
        0.485
    ],
    [
        6.2966,
        0.48
    ],
    [
        6.4998,
        0.475
    ],
    [
        6.6804,
        0.47
    ],
    [
        6.6838,
        0.465
    ],
    [
        6.6998,
        0.46
    ],
    [
        6.7745,
        0.455
    ],
    [
        6.7846,
        0.45
    ],
    [
        7.0839,
        0.445
    ],
    [
        7.1471,
        0.44
    ],
    [
        7.1757,
        0.435
    ],
    [
        7.5157,
        0.43
    ],
    [
        7.6989,
        0.425
    ],
    [
        7.7513,
        0.42
    ],
    [
        7.884,
        0.415
    ],
    [
        8.0428,
        0.41
    ],
    [
        8.1024,
        0.405
    ],
    [
        8.1523,
        0.4
    ],
    [
        8.1764,
        0.395
    ],
    [
        8.1993,
        0.39
    ],
    [
        8.4714,
        0.385
    ],
    [
        8.5124,
        0.38
    ],
    [
        8.5714,
        0.375
    ],
    [
        8.7199,
        0.37
    ],
    [
        8.7563,
        0.365
    ],
    [
        8.9765,
        0.36
    ],
    [
        9.0494,
        0.355
    ],
    [
        9.0752,
        0.35
    ],
    [
        9.1734,
        0.345
    ],
    [
        9.3418,
        0.34
    ],
    [
        9.3917,
        0.335
    ],
    [
        9.5489,
        0.33
    ],
    [
        9.5499,
        0.325
    ],
    [
        9.6828,
        0.32
    ],
    [
        9.7362,
        0.315
    ],
    [
        9.8034,
        0.31
    ],
    [
        9.921,
        0.305
    ],
    [
        10.02,
        0.3
    ],
    [
        10.172,
        0.295
    ],
    [
        10.375,
        0.29
    ],
    [
        10.592,
        0.285
    ],
    [
        10.616,
        0.28
    ],
    [
        10.691,
        0.275
    ],
    [
        10.7,
        0.27
    ],
    [
        10.743,
        0.265
    ],
    [
        10.914,
        0.26
    ],
    [
        11.143,
        0.255
    ],
    [
        11.242,
        0.25
    ],
    [
        11.267,
        0.245
    ],
    [
        11.387,
        0.24
    ],
    [
        11.473,
        0.235
    ],
    [
        11.516,
        0.23
    ],
    [
        11.883,
        0.225
    ],
    [
        11.886,
        0.22
    ],
    [
        12.07,
        0.215
    ],
    [
        12.282,
        0.21
    ],
    [
        12.519,
        0.205
    ],
    [
        12.624,
        0.2
    ],
    [
        12.66,
        0.195
    ],
    [
        12.873,
        0.19
    ],
    [
        12.879,
        0.185
    ],
    [
        13.326,
        0.18
    ],
    [
        13.377,
        0.175
    ],
    [
        14.02,
        0.17
    ],
    [
        14.021,
        0.165
    ],
    [
        14.134,
        0.16
    ],
    [
        14.134,
        0.155
    ],
    [
        14.268,
        0.15
    ],
    [
        14.334,
        0.145
    ],
    [
        14.71,
        0.14
    ],
    [
        15.292,
        0.135
    ],
    [
        15.59,
        0.13
    ],
    [
        15.95,
        0.125
    ],
    [
        16.046,
        0.12
    ],
    [
        16.164,
        0.115
    ],
    [
        16.253,
        0.11
    ],
    [
        17.372,
        0.105
    ],
    [
        17.375,
        0.1
    ],
    [
        18.285,
        0.095
    ],
    [
        18.616,
        0.09
    ],
    [
        18.94,
        0.085
    ],
    [
        18.988,
        0.08
    ],
    [
        19.671,
        0.075
    ],
    [
        19.691,
        0.07
    ],
    [
        19.896,
        0.065
    ],
    [
        20.099,
        0.06
    ],
    [
        20.205,
        0.055
    ],
    [
        20.627,
        0.05
    ],
    [
        20.87,
        0.045
    ],
    [
        21.303,
        0.04
    ],
    [
        21.921,
        0.035
    ],
    [
        23.264,
        0.03
    ],
    [
        23.734,
        0.025
    ],
    [
        28.903,
        0.02
    ],
    [
        30.651,
        0.015
    ],
    [
        31.145,
        0.01
    ],
    [
        31.613,
        0.005
    ]
]

var xdata = ['≥0月～﹤1月', '≥1月～﹤6岁', '≥6岁～﹤14岁', '≥14岁～﹤20岁', '≥20岁～﹤30岁', '≥30岁～﹤40岁', '≥40岁～﹤50岁', '≥50岁～﹤60岁', '≥60岁～﹤70岁', '≥70岁以上'];
var ydata = ['2013', '2014', '2015', '2016'];
var legenddata = ydata;
var vdata = [
    [1, 43, 88, 375, 5780, 5804, 8129, 5113, 6607, 8149],
    [22, 563, 955, 2398, 24126, 16625, 26580, 16060, 18148, 17869],
    [33, 736, 1396, 2879, 31640, 20220, 34652, 21985, 24707, 23849],
    [109, 2899, 4166, 7134, 61125, 35392, 48528, 32253, 33669, 32073]
];
var flag = true; //开关

var myChart = echarts.init(document.getElementById('chart-panel'));

//默认
(function() {
    drawFun01();
})();


function drawFun01(option) {
    var series = [];

    //拼柱状图数据
    $.each(vdata, function(i, v) {
        var bs = {
            name: ydata[i],
            type: 'bar',
            data: v,
            itemStyle: {
                normal: {
                    color: ''
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            barWidth: ''
        };
        series.push(bs);
    });

    //柱状图配置参数
    option = {
        title: {
            text: '苍南县单次损失分布',
            right: 'center'
        },
        toolbox: {
            right: 30,
            feature: {
                //切换图表类型
                myFormula: {
                    show: true,
                    title: '苍南县年总损失分布',
                    icon: 'path://M512 8.448a501.248 501.248 0 1 0 501.248 501.248A503.04 503.04 0 0 0 512 8.448z m0 743.68a38.912 38.912 0 0 1-55.04-55.04 28.672 28.672 0 0 1 22.016-11.008 37.632 37.632 0 0 1 38.656 38.656 25.6 25.6 0 0 1-5.632 27.392z m110.08-314.112a220.416 220.416 0 0 1-60.672 66.048 162.048 162.048 0 0 0-44.032 44.032 103.68 103.68 0 0 0-11.008 44.032v27.648h-55.04v-27.392a198.144 198.144 0 0 1 11.008-60.672 123.648 123.648 0 0 1 55.04-49.664 210.432 210.432 0 0 0 49.664-49.664 93.184 93.184 0 0 0 16.64-55.04 70.656 70.656 0 0 0-22.016-55.04 92.416 92.416 0 0 0-66.048-16.64 174.848 174.848 0 0 0-110.08 44.032v-65.792a230.4 230.4 0 0 1 115.456-33.024 134.656 134.656 0 0 1 99.072 33.024 119.808 119.808 0 0 1 38.656 88.064 146.688 146.688 0 0 1-16.64 66.048z',
                    onclick: function() {
                        changeType();
                    }
                }
            }
        },
        tooltip: { //提示框组件
            trigger: 'axis',
            formatter: '{b}<br />{a0}: {c0}%',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            textStyle: {
                color: '#FFFFFF',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        },
        grid: {
            left: 50,
            right: 50,
            bottom: 80,
            top: 100,
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            data: ['小于0.1亿元', '0.1-0.5亿元', '0.5-1亿元', '1-2亿元', '2-5亿元', '5-10亿元', '10-20亿元', '20-25亿元', '大于25亿元'],
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15,
                }
            }
        }],

        yAxis: [{
            type: 'value',
            axisLabel: {
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15
                },
                formatter: '{value} %'
            }
        }],
        series: [{
            name: '百分比',

            data: [0, 2, 5, 18, 42, 22, 9, 0.3, 0],
            type: 'bar',
            itemStyle: {
                //通常情况下：
                normal: {　　　　　　　　　　　　 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function(params) {
                        var colorList = ['#008000', '#32CD32', '#BDB76B', '#FFD700', '#FFA500', '#FF4500', '#FF0000'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c0}%',

                    color: '#000000'
                }
            },
        }]
    };

    //?
    myChart.setOption(option);
    window.onresize = myChart.resize;
}

/**画柱图**/
function drawFun02(option) {
    var series = [];

    //拼柱状图数据
    $.each(vdata, function(i, v) {
        var bs = {
            name: ydata[i],
            type: 'bar',
            data: v,
            itemStyle: {
                normal: {
                    color: ''
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            barWidth: ''
        };
        series.push(bs);
    });

    //柱状图配置参数
    option = {
        title: {
            text: '苍南县年总损失分布',
            right: 'center'
        },
        toolbox: {
            right: 30,
            feature: {
                //切换图表类型
                myFormula: {
                    show: true,
                    title: '苍南县年总超越概率曲线',
                    icon: 'path://M512 8.448a501.248 501.248 0 1 0 501.248 501.248A503.04 503.04 0 0 0 512 8.448z m0 743.68a38.912 38.912 0 0 1-55.04-55.04 28.672 28.672 0 0 1 22.016-11.008 37.632 37.632 0 0 1 38.656 38.656 25.6 25.6 0 0 1-5.632 27.392z m110.08-314.112a220.416 220.416 0 0 1-60.672 66.048 162.048 162.048 0 0 0-44.032 44.032 103.68 103.68 0 0 0-11.008 44.032v27.648h-55.04v-27.392a198.144 198.144 0 0 1 11.008-60.672 123.648 123.648 0 0 1 55.04-49.664 210.432 210.432 0 0 0 49.664-49.664 93.184 93.184 0 0 0 16.64-55.04 70.656 70.656 0 0 0-22.016-55.04 92.416 92.416 0 0 0-66.048-16.64 174.848 174.848 0 0 0-110.08 44.032v-65.792a230.4 230.4 0 0 1 115.456-33.024 134.656 134.656 0 0 1 99.072 33.024 119.808 119.808 0 0 1 38.656 88.064 146.688 146.688 0 0 1-16.64 66.048z',
                    onclick: function() {
                        changeType();
                    }
                }
            }
        },
        tooltip: { //提示框组件
            trigger: 'axis',
            formatter: '{b}<br />{a0}: {c0}%',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            textStyle: {
                color: '#FFFFFF',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        },
        grid: {
            left: 50,
            right: 50,
            bottom: 80,
            top: 100,
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            data: ['小于0.1亿元', '0.1-0.5亿元', '0.5-1亿元', '1-2亿元', '2-5亿元', '5-10亿元', '10-20亿元', '20-25亿元', '大于25亿元'],
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15,
                }
            }
        }],

        yAxis: [{
            type: 'value',
            axisLabel: {
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15
                },
                formatter: '{value} %'
            }
        }],
        series: [{
            name: '百分比',

            data: [17, 0, 1, 6, 22, 26, 24, 4, 0],
            type: 'bar',
            itemStyle: {
                //通常情况下：
                normal: {　　　　　　　　　　　　 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function(params) {
                        var colorList = ['#008000', '#32CD32', '#BDB76B', '#FFD700', '#FFA500', '#FF4500', '#FF0000'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c0}%',

                    color: '#000000'
                }
            },
        }]
    };

    //?
    myChart.setOption(option);
    window.onresize = myChart.resize;
}

function drawFun03(option) {
    var series = [];

    //拼柱状图数据
    $.each(vdata, function(i, v) {
        var bs = {
            name: ydata[i],
            type: 'line',
            data: v,
            itemStyle: {
                normal: {
                    color: ''
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            barWidth: ''
        };
        series.push(bs);
    });

    //柱状图配置参数
    option = {
        title: {
            text: '苍南县年总超越概率',
            right: 'center'
        },
        toolbox: {
            right: 30,
            feature: {
                //切换图表类型
                myFormula: {
                    show: true,
                    title: '苍南县单次损失分布',
                    icon: 'path://M512 8.448a501.248 501.248 0 1 0 501.248 501.248A503.04 503.04 0 0 0 512 8.448z m0 743.68a38.912 38.912 0 0 1-55.04-55.04 28.672 28.672 0 0 1 22.016-11.008 37.632 37.632 0 0 1 38.656 38.656 25.6 25.6 0 0 1-5.632 27.392z m110.08-314.112a220.416 220.416 0 0 1-60.672 66.048 162.048 162.048 0 0 0-44.032 44.032 103.68 103.68 0 0 0-11.008 44.032v27.648h-55.04v-27.392a198.144 198.144 0 0 1 11.008-60.672 123.648 123.648 0 0 1 55.04-49.664 210.432 210.432 0 0 0 49.664-49.664 93.184 93.184 0 0 0 16.64-55.04 70.656 70.656 0 0 0-22.016-55.04 92.416 92.416 0 0 0-66.048-16.64 174.848 174.848 0 0 0-110.08 44.032v-65.792a230.4 230.4 0 0 1 115.456-33.024 134.656 134.656 0 0 1 99.072 33.024 119.808 119.808 0 0 1 38.656 88.064 146.688 146.688 0 0 1-16.64 66.048z',
                    onclick: function() {
                        changeType();
                    }
                }
            }
        },
        tooltip: { //提示框组件
            trigger: 'axis',
            formatter: '{a0}: {c0}',
            textStyle: {
                color: '#FFFFFF',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        },
        grid: {
            left: 50,
            right: 50,
            bottom: 80,
            top: 100,
            containLabel: true,
        },
        xAxis: [{
            type: 'value',
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15,
                }
            }
        }],

        yAxis: [{
            type: 'value',
            axisLabel: {
                interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#000000',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 15
                },
                formatter: '{value} '
            }
        }],
        series: [{
            name: '年遇型',
            data:data,
            type: 'line',
        }]
    };

    //?
    myChart.setOption(option);
    window.onresize = myChart.resize;
}


//公式显示（用于toolbox内部）
function changeType() {
    myChart.clear();
    if (flag) {
        if (flag) {
            drawFun02();
        } else {
            drawFun01();
        }
    } else {
        drawFun03();
    }
    flag = !flag;
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
