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的長度,則柱子顏色循環(huán)使用該數組
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的長度,則柱子顏色循環(huán)使用該數組
color: colorList[1],
},
},
//鼠標懸停時:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情況下:
normal: {
//每個柱子的顏色即為colorList數組里的每一項,如果柱子數目多于colorList的長度,則柱子顏色循環(huán)使用該數組
color: colorList[2],
},
},
//鼠標懸停時:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
{
stack: '0',
type: 'bar',
itemStyle: {
//通常情況下:
normal: {
//每個柱子的顏色即為colorList數組里的每一項,如果柱子數目多于colorList的長度,則柱子顏色循環(huán)使用該數組
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
);
}
Echarts 將數字數組以百分比的形式展示
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關閱讀更多精彩內容
- 最終結果呈現 怎么保證所有占比之和等于100%,什么是最大余額法? echarts的餅圖的百度通過傳入數據自動算出...
- 項目需求:需要做成百分比的進度條,如下所示: 用過echarts的朋友們都知道官網上給的example大多都是最普...
- 原理 外層一個大圓(pie), 中間一個小圓(circle),覆蓋住大圓,形成圓環(huán) 左右各有半圓(left、rig...
- 用echarts如何實現下圖效果 代碼如下 series: [ { type: 'pie',...
- <!DOCTYPE html> HTML5 Canvas 圓形進度條并顯示數字百分比 *{margin:0;pad...