提交代码

This commit is contained in:
2024-02-15 14:53:34 +08:00
parent dc645d95ed
commit de1bc6199f
4 changed files with 90 additions and 38 deletions
+77 -35
View File
@@ -224,31 +224,36 @@
tooltip: {
formatter: '{a}:{c}%'//a 是series中每条数据name值,c 是data数值
},
legend: {
orient: 'vertical', // 'horizontal'
data: JSON.parse(oneDataStr),
textStyle: { // 图列内容样式
color: '#fff', // 字体颜色
},
x: '70%',//图例位置,设置right发现图例和文字位置反了,设置一个数值就好了
y: 'center'//延Y轴居中
},
//legend: {
// orient: 'vertical', // 'horizontal'
// data: oneData,
// textStyle: { // 图列内容样式
// color: '#fff', // 字体颜色
// },
// x: '70%',//图例位置,设置right发现图例和文字位置反了,设置一个数值就好了
// y: 'center'//延Y轴居中
//},
grid: {
left: '3%',
right: '30%',
//right: '30%',
right: '0%',
top: '15%',
bottom: '3%',
bottom: '5%',
containLabel: true,
backgroundColor: 'rgba(0,162,233, 0.01)',
},
xAxis: [ //横坐标
{
type: 'category',
data: [''],
data: oneData,
axisLine: {
lineStyle: {
color: "#fff",//横坐标线条颜色
}
},
axisLabel: {
interval: 0,
rotate: -90,
}
}
],
@@ -266,35 +271,72 @@
}
}
],
color: ['#0287f8', '#33CCCC', '#58b1fc', '#2fb6f6', '#CC3366', '#00FF99', '#33FFFF', '#669900', '#CC0099', '#FF66FF', '#330099', '#00FFCC', '#FFFF33', '#FF9966', '#FF6633'],//柱状图的颜色
series: oneNameData
};
for (var i = 0; i < option.series.length; i++) {
var style = { //定义柱状图的样式
normal: {
label: {
show: true,
position: 'top', //柱子上方显示 数值
rotate: 25,
/*formatter: '{c}%'*/
formatter: function (params) {
if (params.value > 0) {
return params.value + '%';
} else {
return ' ';
}
//dataZoom: [
// {
// type: "slider",//slider表示有滑动块的,
// show: true,
//// xAxisIndex: [0],//表示x轴折叠
// start: 1,//数据窗口范围的起始百分比,表示1%
// end: 70,//数据窗口范围的结束百分比,表示35%坐标
// bottom: "0",
// },
//],
series: [{
name: '进度率',
type: 'bar',
barWidth: 20,
data: oneArr,
label: {
show: true,
position: 'inside',
interval: 0,
rotate: -90,
formatter: function (params) {
if (params.value > 0) {
return params.value + '%';
} else {
return ' ';
}
},
},
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#0287f8', '#33CCCC', '#58b1fc', '#2fb6f6', '#CC3366', '#00FF99', '#33FFFF', '#669900', '#CC0099', '#FF66FF', '#330099', '#00FFCC', '#FFFF33', '#FF9966', '#FF6633'];
return colorList[params.dataIndex]
},
}
}
};
option.series[i].type = 'bar'; //每条数据指定类型为'bar'
option.series[i].itemStyle = style; // series中每条数据都加的样式
option.series[i].data = [bar_data[i]]; //series 中 data赋值
}]
//series: oneNameData
};
//for (var i = 0; i < option.series.length; i++) {
// var style = { //定义柱状图的样式
// type: 'bar',
// barWidth: 20,
// normal: {
// label: {
// show: true,
// position: 'inside', //柱子下显示 数值
// interval: 0,
// rotate: -90,
// formatter: function (params) {
// if (params.value > 0) {
// return params.value + '%';
// } else {
// return ' ';
// }
// },
// }
// }
// };
// option.series[i].type = 'bar'; //每条数据指定类型为'bar'
// option.series[i].itemStyle = style; // series中每条数据都加的样式
// option.series[i].data = [bar_data[i]]; //series 中 data赋值
//};
chart.setOption(option);
//图2
debugger;
var twoDataStr = '<%=twoDataStr%>';
var towData = JSON.parse(twoDataStr);
var data = towData.map((item, index) => item.Rate);