function gettotallist(listdata) {
let total = 0
var list2 = listdata;
var list = []
listdata.forEach((type) => {
total = total + type
});
list2.forEach((type) => {
var data = Number(Number((type / total) * 100).toFixed(0))
list.push(data)
});
return list
}
function gettotal(listdata) {
let total = 0
listdata.forEach((type) => {
total = total + type
});
return total
}
function fengxianecharts() {
var echartsx = echarts.init(document.getElementById("fengxianecharts"));
let colorList = ['rgba(201, 0, 0, 1)', 'rgba(255, 98, 22, 1)', 'rgba(255, 225, 85, 1)', 'rgba(28, 138, 215, 1)'];
// let list1 = [1070, 700, 170, 270]
// let list2 = [110, 140, 70, 30]
// let list3 = [70, 70, 70, 70]
// let list4 = [70, 70, 70, 70]
var bodydata = [[1070, 700, 170, 270], [110, 140, 70, 30], [70, 70, 70, 70], [70, 70, 70, 70]]
let list = [gettotal(bodydata[0]), gettotal(bodydata[1]), gettotal(bodydata[2]), gettotal(bodydata[3])]
let newlist1 = gettotallist(bodydata[0])
console.log(newlist1)
let newlist2 = gettotallist(bodydata[1])
let newlist3 = gettotallist(bodydata[2])
let newlist4 = gettotallist(bodydata[3])
var data = [['Period', '重大风险', '较大风险', '一般风险', '低风险'],
['港口', ...newlist1],
['航运', ...newlist2],
['物流', ...newlist3],
['其他', ...newlist4]]
var option = {
legend: {
bottom: 10,
x: 'center',
itemWidth: 10,
itemGap: 10,
itemHeight: 10,
textStyle: {color: '#fff', fontSize: is1600 ? 10 : 12}
},
tooltip: {
show: true,
formatter: function (params, ticket, callback) {
console.log(params)
console.log(params.name)
console.log(params.seriesName)
var data2 = ''
data.forEach((type, index) => {
if (type[0] == params.name) {
console.log(type[0])
console.log('sssss')
console.log(params.name)
console.log(params)
console.log(params.seriesIndex)
console.log(params.seriesName)
data2 = params.seriesName + ':' + bodydata[index - 1][params.seriesIndex]
}
});
console.log(params.seriesIndex)
return data2
}
},
dataset: {
source: data,
},
xAxis: {
name: 'Thousands',
type: 'value',
show: false,
axisLine: {
show: true,
symbol: ['none', 'arrow'], //两端都显示箭头
symbolOffset: [0, 5], //箭头距离两端的距离,可为负数
},
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
margin: is1600 ? 5 : 15,
fontFamily: 'Helvetica Condensed Bold',
fontSize: is1600 ? 10 : 12
}
},
yAxis: {
name: '',
type: 'category',
axisLine: {
show: false,
symbol: ['none', 'arrow'], //两端都显示箭头
symbolOffset: [0, 5], //箭头距离两端的距离,可为负数
},
axisTick: { //y轴刻度线
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
margin: is1600 ? 5 : 15,
fontFamily: 'Helvetica Condensed Bold'
}
},
grid: {
top: is1600 ? '0%' : '5%',
right: '12%',
bottom: '15%',
left: '5%',
containLabel: true,
},
series: [
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: colorList[0],
marginRight: 10,
},
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: colorList[1],
},
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: colorList[2],
},
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: colorList[3],
},
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
label: {
normal: {
show: true,
position: 'right',
formatter: function (e) {
console.log(e.dataIndex)
return list[e.dataIndex]
},
textStyle: {color: '#fff', fontFamily: 'Helvetica Condensed Bold'}
}
},
}
],
};
echartsx.clear();
echartsx.resize();
echartsx.setOption(
option
);
}
