|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="top-box">
|
|
|
|
|
|
<div class="topbox-item">
|
|
|
|
|
|
<div class="topBOxitem">
|
|
|
|
|
|
<div class="topBOxitem-top"> <span>12</span> <span>次</span></div>
|
|
|
|
|
|
<div class="topBOxitem-bottom">国家检测次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="topbox-item">
|
|
|
|
|
|
<div class="topBOxitem">
|
|
|
|
|
|
<el-tooltip class="item" effect="dark" content="1221111121212121" placement="top-start">
|
|
|
|
|
|
<div class="topBOxitem-top"> <span>1221111121212121</span> <span>次</span></div>
|
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="topBOxitem-bottom">国家检测次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="topbox-item">
|
|
|
|
|
|
<div class="topBOxitem">
|
|
|
|
|
|
<div class="topBOxitem-top"> <span>12%</span> </div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="topBOxitem-bottom">国家检测次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom-content">
|
|
|
|
|
|
<div class="left-echart" ref="left-echart"></div>
|
|
|
|
|
|
<div class="right-echart" ref="right-echart"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: 'informationBox',
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
topList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
order: "12",
|
|
|
|
|
|
jcaddress: "国家检测次数"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
order: "31",
|
|
|
|
|
|
jcaddress: "省级检测次数"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
order: "14",
|
|
|
|
|
|
jcaddress: "抽检合格率"
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
option1: {},
|
|
|
|
|
|
// echarts
|
|
|
|
|
|
myChart1: {},
|
|
|
|
|
|
|
|
|
|
|
|
option2: {},
|
|
|
|
|
|
// echarts
|
|
|
|
|
|
myChart2: {},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
created() { },
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
let chartDom = this.$refs["left-echart"];
|
|
|
|
|
|
this.myChart1 = echarts.init(chartDom);
|
|
|
|
|
|
this.initEcharts();
|
|
|
|
|
|
|
|
|
|
|
|
let chartDom2 = this.$refs["right-echart"];
|
|
|
|
|
|
this.myChart2 = echarts.init(chartDom2);
|
|
|
|
|
|
this.initEcharts2();
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
initEcharts() {
|
|
|
|
|
|
this.option1 = {
|
|
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
|
// formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
return '<div style="line-height: 1;">' + params.marker + params.name + ': ' + params.value + ' (' + params.percent + '%)</div>';
|
|
|
|
|
|
},
|
|
|
|
|
|
extraCssText: 'padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;' // 设置提示框的样式
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
bottom: 0,
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
data: ['生产抽样环节', '流通环节抽样',],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'auto',
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: '',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: ['50%', '70%'],
|
|
|
|
|
|
center: ['50%', '40%'], // 调整 y 值为 '40%'，使饼图向上位移
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
length: 15, // 指示线宽度
|
|
|
|
|
|
position: 'outer', // 将标签线放在扇区外部转折点
|
|
|
|
|
|
lineStyle: function (params) { // 根据数据项的颜色动态设置文字颜色
|
|
|
|
|
|
return {
|
|
|
|
|
|
color: params.color,
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
// 各分区的提示内容
|
|
|
|
|
|
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
return params.percent + "%"
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: 'auto',
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
|
|
|
|
|
|
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
|
|
|
|
|
|
{ value: 39, name: '生产抽样环节', percent: '39', itemStyle: { color: '#007EFF' } },
|
|
|
|
|
|
{ value: 21, name: '流通环节抽样', percent: '21', itemStyle: { color: '#2CD8EC' } },
|
|
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.myChart1.setOption(this.option1);
|
|
|
|
|
|
},
|
|
|
|
|
|
initEcharts2() {
|
|
|
|
|
|
this.option2 = {
|
|
|
|
|
|
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
|
|
|
|
|
|
tooltip: {},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '8%',
|
|
|
|
|
|
left: '10%',
|
|
|
|
|
|
right: '10%',
|
|
|
|
|
|
bottom: '8%',
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: true,
|
|
|
|
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false, // 隐藏 x 轴线
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#233e64'
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#B7D4F5",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
margin: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['辽宁', '黑龙江', '北京', '上海', '深圳', '苏州'],
|
|
|
|
|
|
}],
|
|
|
|
|
|
yAxis: [{
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '123',
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true, // 显示背后的横线
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#233e64',
|
|
|
|
|
|
type: 'dashed' // 可以设置为实线或虚线
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false, // 隐藏 y 轴线
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
margin: 20,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#6a9cd5',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
}],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: '10',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: 'rgba(33,181,225,1)' // 起始颜色
|
|
|
|
|
|
}, {
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: 'rgba(0,0,0,0.1)' // 结束颜色
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
// label: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// position: 'top'
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [12, 15, 17, 20, 25, 26]
|
|
|
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
|
|
|
this.myChart2.setOption(this.option2);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
|
|
|
.box {}
|
|
|
|
|
|
|
|
|
|
|
|
.top-box {
|
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
height: 85px;
|
|
|
|
|
|
width: 100%F;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
|
|
.topbox-item {
|
|
|
|
|
|
width: 240px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-right: 30px;
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-of-type(1) {
|
|
|
|
|
|
background: url('../../../assets/images/daping/jiance1.png');
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
|
|
|
:nth-of-type(1) {
|
|
|
|
|
|
|
|
|
|
|
|
background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
|
|
|
background: url('../../../assets/images/daping/jiance2.png');
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
|
|
|
:nth-of-type(1) {
|
|
|
|
|
|
|
|
|
|
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-of-type(3) {
|
|
|
|
|
|
background: url('../../../assets/images/daping/jiance3.png');
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
|
|
|
:nth-of-type(1) {
|
|
|
|
|
|
|
|
|
|
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem {
|
|
|
|
|
|
margin-top: -40px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
:nth-of-type(1) {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
max-width: 90px;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
/* 不换行 */
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
/* 溢出内容隐藏 */
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
/* 显示省略号 */
|
|
|
|
|
|
font-size: 34px;
|
|
|
|
|
|
font-family: YouSheBiaoTiHei;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:nth-of-type(2) {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.topBOxitem-bottom {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom-content {
|
|
|
|
|
|
height: 210px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.left-echart {
|
|
|
|
|
|
flex: 0.7;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-echart {
|
|
|
|
|
|
flex: 1.3;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
