提交代码
This commit is contained in:
@@ -71,7 +71,34 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="bottom-wrap">
|
||||
<div class="top">
|
||||
<div class="item">
|
||||
<div class="bw-b-bottom ptop6">
|
||||
<div class="bw-b-bottom-up">
|
||||
<div class="bw-item-content">
|
||||
<div id='one' style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="bw-b-bottom ptop6">
|
||||
<div class="bw-b-bottom-up">
|
||||
<div class="bw-item-content">
|
||||
<div id='two' style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<%--<div class="wrap">
|
||||
<div class="bottom-wrap">
|
||||
<div class="top">
|
||||
<div class="item">
|
||||
@@ -166,12 +193,208 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>--%>
|
||||
</body>
|
||||
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
||||
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var oneArrStr = "<%=oneArrStr%>";
|
||||
var oneDataStr = '<%=oneDataStr%>';
|
||||
var oneNameData = [];
|
||||
var oneArr = JSON.parse(oneArrStr);
|
||||
var oneData = JSON.parse(oneDataStr);
|
||||
$.each(oneData, function (inxex, item) {
|
||||
var obj = { name: item };
|
||||
oneNameData.push(obj);
|
||||
});
|
||||
//图1
|
||||
var bar_data = oneArr;//模拟数据
|
||||
var chart = echarts.init(document.getElementById('one'));
|
||||
var option = {
|
||||
title: {
|
||||
text: '预试车进度信息',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16
|
||||
},
|
||||
show: true
|
||||
},
|
||||
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轴居中
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '30%',
|
||||
top: '15%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||||
},
|
||||
xAxis: [ //横坐标
|
||||
{
|
||||
type: 'category',
|
||||
data: [''],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",//横坐标线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [ //纵坐标
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: '{value}%',//给Y轴数值添加百分号
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",//纵坐标线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
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 ' ';
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
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);
|
||||
var chart1 = echarts.init(document.getElementById('two'));
|
||||
var barWidth = 20;
|
||||
var maxNum = 100;
|
||||
option = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '20%',
|
||||
right: '10%',
|
||||
bottom: '0%',
|
||||
},
|
||||
title: {
|
||||
text: '试车进度信息',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: {
|
||||
data: towData.map((item, index) => item.Name),
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: { fontSize: '80%', color: '#02afff' },
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barWidth,
|
||||
zlevel: 2,
|
||||
data: data.map(function (item) {
|
||||
return {
|
||||
value: item,
|
||||
maxNum: maxNum,
|
||||
};
|
||||
}),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
align: 'left',
|
||||
formatter: function (params) {
|
||||
var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
|
||||
return percent;
|
||||
},
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||||
{ offset: 0, color: '#395CFE' },
|
||||
{ offset: 1, color: '#2EC7CF' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barWidth,
|
||||
barGap: '-100%',
|
||||
data: data.map(function (item) {
|
||||
return {
|
||||
realValue: item,
|
||||
value: maxNum,
|
||||
};
|
||||
}),
|
||||
//label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// distance: 80,
|
||||
// align: 'right',
|
||||
// //formatter: function (params) {
|
||||
// // return params.data.realValue + ' 件';
|
||||
// //},
|
||||
// color: '#02afff',
|
||||
// fontSize: 18,
|
||||
//},
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
color: 'rgba(3,169,244, 0.5)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart1.setOption(option);
|
||||
|
||||
</script>
|
||||
|
||||
<%--<script type="text/javascript">
|
||||
function category_One(id, xArr, data) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById(id))
|
||||
@@ -747,6 +970,6 @@
|
||||
loop: true,
|
||||
slidesPerView: 6
|
||||
})
|
||||
</script>
|
||||
</script>--%>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user