苍南县损失情况V2echarts 柱状配置项内容和展示
配置项如下
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;
}
截图如下
