const createVideoEcharts = val => {
let histogram = document.getElementById('echartAnswer');
let myChart = echarts.init(histogram);
let arr = [];
// val = res.data.typeNum;
for (let i = 0; i < val.length; i++) {
let obj = {};
obj.name = val[i].num;
if (data.cateType === 1) {
switch (val[i].groupName) {
case '错':
obj.itemStyle = { color: '#ffbf84' };
obj.value = 60;
break;
case '对':
obj.itemStyle = { color: '#b28ffe' };
obj.value = 50;
break;
case '半对半错':
obj.itemStyle = { color: '#fe8f8f' };
obj.value = 40;
break;
default:
break;
}
} else if (data.cateType === 2) {
switch (val[i].groupName) {
case '√':
obj.itemStyle = { color: '#ffbf84' };
obj.value = 60;
break;
case '×':
obj.itemStyle = { color: '#fe8f8f' };
obj.value = 50;
break;
default:
break;
}
} else if (data.cateType === 3) {
switch (val[i].groupName) {
case '未做':
obj.itemStyle = { color: '#ffbf84' };
obj.value = 60;
break;
case '已做':
obj.itemStyle = { color: '#fe8f8f' };
obj.value = 50;
break;
default:
break;
}
} else {
switch (val[i].groupName) {
case 'A':
obj.itemStyle = { color: '#ffbf84' };
obj.value = 60;
break;
case 'B':
obj.itemStyle = { color: '#fe8f8f' };
obj.value = 50;
break;
case 'C':
obj.itemStyle = { color: '#b28ffe' };
obj.value = 40;
break;
case 'D':
obj.itemStyle = { color: '#f9de80' };
obj.value = 35;
break;
default:
break;
}
}
arr.push(obj);
}
let option;
option = {
// title: {
// text: 'Referer of a Website',
// subtext: 'Fake Data',
// left: 'center'
// },
// tooltip: {
// trigger: 'item'
// },
// legend: {
// orient: 'vertical',
// left: 'left'
// },
series: [
{
name: 'Access From',
type: 'pie',
// radius: '50%',
radius: [50, 150],
center: ['50%', '50%'],
roseType: 'area',
startAngle: 150,
label: {
show: false
},
data: arr
}
]
};
option && myChart.setOption(option);
};
Echarts 使用玫瑰图
于 2022-03-26 14:38:14 首次发布