提交代码
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user