This commit is contained in:
lnn19986213
parent
f5322a01c3
commit
626deb9ccc
|
|
@ -9,48 +9,94 @@ import * as echarts from "echarts";
|
|||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
var colors = [
|
||||
'#0278e6',
|
||||
'#34d160',
|
||||
'#fcdf39',
|
||||
'#f19611',
|
||||
'#00c6ff',
|
||||
'#f76363'
|
||||
]
|
||||
|
||||
var data = [
|
||||
{
|
||||
name: '农业专业合作社',
|
||||
value: 7
|
||||
name: '正常',
|
||||
value: 17
|
||||
},
|
||||
{
|
||||
name: '农业企业',
|
||||
value: 6
|
||||
name: '关注',
|
||||
value: 16
|
||||
},
|
||||
{
|
||||
name: '农业冷藏冷库',
|
||||
name: '追踪',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
name: '农业园区',
|
||||
value: 4
|
||||
name: '异常',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
name: '警戒',
|
||||
value: 8
|
||||
}
|
||||
];
|
||||
|
||||
let option = {
|
||||
color: colors,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '6%',
|
||||
icon: "circle",
|
||||
itemGap: 20,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
for (var i = 0, l = data.length; i < l; i++) {
|
||||
if (data[i].name == name) {
|
||||
target = data[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
return ` ${name} ${target} `;
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
|
||||
/*内心原型图，展示整体数据概览*/
|
||||
{
|
||||
name: '测评分析',
|
||||
type: 'pie',
|
||||
radius: ['20%', '70%'],
|
||||
center: ['30%', '50%'],
|
||||
roseType: 'radius',
|
||||
minShowLabelAngle: 30,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data
|
||||
},
|
||||
// 内圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["50%", "50%"],
|
||||
radius: ["20%", "32%"],
|
||||
center: ["30%", "50%"],
|
||||
radius: ["20%", "26%"],
|
||||
hoverAnimation: false,
|
||||
clockWise: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(193, 229, 255, .1)",
|
||||
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(127, 242, 255, .2)",
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(109, 195, 255, 0)",
|
||||
},
|
||||
]),
|
||||
color: 'rgba(14, 59, 123, 0.60)'
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -61,39 +107,6 @@ let option = {
|
|||
},
|
||||
data: [100],
|
||||
},
|
||||
/*内心原型图，展示整体数据概览*/
|
||||
{
|
||||
name: '半径模式',
|
||||
type: 'pie',
|
||||
radius: ['20%', '50%'],
|
||||
center: ['35%', '50%'],
|
||||
roseType: 'radius',
|
||||
minShowLabelAngle: 60,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
position: 'outside',
|
||||
fontSize: 16,
|
||||
formatter: (params) => {
|
||||
return (
|
||||
params.name +
|
||||
// '(' +
|
||||
// ((params.value / total) * 100).toFixed(2) +
|
||||
// '%)' +
|
||||
// '\n' +
|
||||
params.value +
|
||||
'个'
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 1,
|
||||
length2: 10,
|
||||
smooth: true
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="yd_title left_2"></div>
|
||||
<div class="selectLint">
|
||||
<div class="selectBox">
|
||||
<el-select v-model="value" placeholder="Select" size="large">
|
||||
<el-select v-model="value" placeholder="Select" size="large" class="selClass">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
|
@ -410,9 +410,9 @@ const options = [
|
|||
|
||||
.selectBox {
|
||||
width: 48%;
|
||||
background-image: url(@/assets/eduImg/title3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(@/assets/eduImg/jyImg7.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -421,22 +421,20 @@ const options = [
|
|||
.el-select--large .el-select__wrapper {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper {
|
||||
background-color: rgba(255,255,255,0) !important;
|
||||
background-color: rgba(255, 255, 255, 0) !important;
|
||||
|
||||
}
|
||||
.el-select__placeholder{
|
||||
|
||||
.el-select__placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-select__caret{
|
||||
|
||||
.el-select__caret {
|
||||
color: #fff !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-select-dropdown__wrap{
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue