initwarnHchartUp(id){
let option = {
//水印
credits: {
enabled: false
},
//说明的位置
legend: {
itemMarginTop: 10,
itemMarginBottom: 10,
layout: 'vertical',
align: 'right',
itemGap: 30,
verticalAlign: 'middle',
x: -10, //距离x轴的距离
y: -17, //距离Y轴的距离
},
chart: {
type: 'cylinder',
options3d: {
enabled: true,
alpha: 18,
beta: 0,
depth: 50, //图表的合计深度,默认为100
viewDistance: 15 //定义图表的浏览长度
},
marginTop: 30,
marginRight: 100,
marginBottom:40,
},
colors: ['#1DA8DB', '#36CD8F', '#CFC823', '#DB8427',],
title: {
text: ''
},
xAxis: {
categories: ['南平', '宁德', '三明', '福州', '莆田', '龙岩', '泉州', '厦门', '漳州'],
lineWidth: 10, //x轴线
tickWidth: 0,//刻度
labels: {
y: 20, //x轴刻度文字向下移动
style: {
color: '#2E9DC0',//颜色
fontSize: '16' //字体dao
}
},
title: {
enabled: true,
text: '单位: 个',
style: {
fontWeight: 'normal'
},
x:-370,
y:-220,
},
gridLineWidth: 0, //x轴网格线
},
yAxis: {
tickPositions: [0, 2, 4, 6, 8, 10], // 指定竖轴坐标点的值
labels: {
style: {
fontSize: '10' //字体dao
},
formatter: function () {
if (this.value <= 10) {
return this.value
}
}
},
plotBands: [{
from: 1, // 标示带开始值
to: 2, // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '#F2F7F7', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "#F2F7F7", // 标示带边框颜色
id: 1, // 标示带 id,用于删除等操作
zIndex: -1, // 标示带层叠,用于调整显示层次
}, {
from: 3, // 标示带开始值
to: 4, // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '#F2F7F7', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "#F2F7F7", // 标示带边框颜色
id: 2, // 标示带 id,用于删除等操作
zIndex: -1, // 标示带层叠,用于调整显示层次
}, {
from: 5, // 标示带开始值
to: 6, // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '#F2F7F7', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "#F2F7F7", // 标示带边框颜色
id: 3, // 标示带 id,用于删除等操作
zIndex: -1, // 标示带层叠,用于调整显示层次
}, {
from: 7, // 标示带开始值
to: 8, // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '#F2F7F7', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "#F2F7F7", // 标示带边框颜色
id: 4, // 标示带 id,用于删除等操作
zIndex: -1, // 标示带层叠,用于调整显示层次
}, {
from: 9, // 标示带开始值
to: 10, // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '#F2F7F7', // 标示带背景颜色
borderWidth: 2, // 标示带边框宽度
borderColor: "#F2F7F7", // 标示带边框颜色
id: 5, // 标示带 id,用于删除等操作
zIndex: -1, // 标示带层叠,用于调整显示层次
}],
gridLineWidth: 0, //y轴网格线
allowDecimals: false,
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '{point.key}
',
pointFormat: '\u25CF {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
borderWidth: 0,
pointWidth: 5, //柱子宽度
},
series: { //注意:当此处为series是针对所有图表类型有效
depth: 25,
dataLabels: {
enabled: true, //显示数量提示
formatter: function () {
return this.y; //返回百分比和个数
},
style: {
font: "18px",
color: '#4C9BA8',
}
}
}
},
series: [{
name: '风险预警单',
data: [9, 9, 9, 9, 9, 9, 9, 9],
stack: 'male'
}, {
name: '已落实',
data: [7, 7, 7, 7, 7, 7, 7, 7],
stack: 'male'
}]
}
var chart = Highcharts.chart(id, option);
},