231 lines
5.8 KiB
Vue
231 lines
5.8 KiB
Vue
<template>
|
|
<div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
|
|
<div id="pieId-new" class="pie-chart-container"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
let testRes = window.htd_bidata;
|
|
export default {
|
|
name: 'RoseChart',
|
|
props: {
|
|
pieId: {
|
|
type: String,
|
|
},
|
|
chartData: {
|
|
type: Object,
|
|
},
|
|
dataType: {
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
digitalFlopStyle: {
|
|
fontSize: 45,
|
|
fill: '#fff'
|
|
},
|
|
option: {}
|
|
}
|
|
},
|
|
created(){
|
|
},
|
|
mounted() {
|
|
const { createData } = this
|
|
|
|
createData()
|
|
|
|
},
|
|
methods: {
|
|
createData() {
|
|
let arr = [
|
|
{
|
|
value: 35,
|
|
name: "外观不良",
|
|
},
|
|
{
|
|
value: 95,
|
|
name: "尺寸不良",
|
|
},
|
|
{
|
|
value: 55,
|
|
name: "功能不良",
|
|
},
|
|
{
|
|
value: 50,
|
|
name: "包装不良",
|
|
},
|
|
{
|
|
value: 50,
|
|
name: "标签不良",
|
|
},
|
|
{
|
|
value: 55,
|
|
name: "其他不良",
|
|
},
|
|
];
|
|
let arr2 = [
|
|
{
|
|
value: 35,
|
|
name: "外观不良",
|
|
},
|
|
{
|
|
value: 20,
|
|
name: "尺寸不良",
|
|
},
|
|
{
|
|
value: 16,
|
|
name: "功能不良",
|
|
},
|
|
{
|
|
value: 12,
|
|
name: "包装不良",
|
|
},
|
|
{
|
|
value: 12,
|
|
name: "标签不良",
|
|
},
|
|
{
|
|
value: 27,
|
|
name: "其他不良",
|
|
},
|
|
];
|
|
arr2 = testRes.data.yx_v_byblzb.map(item => {
|
|
return {
|
|
value: item['数量'],
|
|
name: item['指标']
|
|
}
|
|
})
|
|
let num = testRes.data.yx_v_byblzb.map(item => {
|
|
return item['数量']
|
|
})
|
|
let maxNum = this.dataType == '6'? Math.max(...num) : 100;
|
|
let chartData = this.dataType == '6'?arr2 : arr;
|
|
console.log(this.dataType,chartData)
|
|
|
|
var myChart = echarts.init(document.getElementById('pieId-new'));
|
|
this.option = {
|
|
title: {
|
|
text: '本月不良指标数',
|
|
top: '0',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 25
|
|
}
|
|
},
|
|
radar: {
|
|
indicator: chartData.map(item => {
|
|
return { name: item.name, max: maxNum+(0.2*maxNum) };
|
|
}),
|
|
radius: '70%',
|
|
splitNumber: 4,
|
|
axisName: {
|
|
color: '#fff',
|
|
fontSize: 25 // 从14px修改为20px
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.5)' // 修改为半透明白色
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.5)', // 修改为半透明白色
|
|
type: 'circle',
|
|
width: 2 // 加粗辅助线
|
|
}
|
|
},
|
|
shape: 'circle' // 强制使用圆形
|
|
},
|
|
series: [{
|
|
type: 'radar',
|
|
colorBy: 'data', // 添加这一行，根据数据值改变颜色
|
|
data: [{
|
|
value: chartData.map(item => item.value),
|
|
name: '产量统计',
|
|
areaStyle: {
|
|
color: 'rgba(8, 229, 255, 0.4)'
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#08e5ff'
|
|
},
|
|
symbolSize: 8,
|
|
itemStyle: {
|
|
color: '#FFFFFF'
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: function(params) {
|
|
return params.value;
|
|
},
|
|
color: '#FFFFFF',
|
|
fontWeight: 'bold',
|
|
fontSize: 24
|
|
}
|
|
}]
|
|
}]
|
|
};
|
|
myChart.setOption(this.option);
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
#pie-chart {
|
|
box-sizing: border-box;
|
|
color: white;
|
|
.item-box{
|
|
position: absolute;
|
|
p{margin: 0;}
|
|
.item-name{
|
|
width: 200px;
|
|
font-size:30px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
.item-value-box{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item-value{
|
|
font-size:45px;
|
|
padding: 0 10px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.pie-chart-container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
/* 向右的三角形 */
|
|
.triangle-right {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 15px solid transparent;
|
|
border-bottom: 15px solid transparent;
|
|
border-left: 20px solid #ff4141; /* 通过调整颜色和尺寸改变外观 */
|
|
}
|
|
|
|
/* 向左的三角形 */
|
|
.triangle-left {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 15px solid transparent;
|
|
border-bottom: 15px solid transparent;
|
|
border-right: 20px solid #41a2ff; /* 通过调整颜色和尺寸改变外观 */
|
|
}
|
|
}
|
|
</style>
|
|
|