463 lines
13 KiB
Vue
463 lines
13 KiB
Vue
<template>
|
|
<div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
|
|
<!-- <div id="pieId-new" class="pie-chart-container"></div> -->
|
|
<dv-active-ring-chart class="pie-chart-container" :config="config" />
|
|
<div class="item-box" style="top: 100px;left: 0;text-align: right;">
|
|
<div class="item-value-box" style="justify-content: flex-end;">
|
|
<p class="item-value" style="color: #3de7c9;">{{ testchartData[0].value }}</p>
|
|
<div class="triangle-left" style="border-right:20px solid #3de7c9;"></div>
|
|
</div>
|
|
<p class="item-name">{{ testchartData[0].name }}</p>
|
|
</div>
|
|
<div class="item-box" style="top: 300px;left: 0;text-align: right;">
|
|
<div class="item-value-box" style="justify-content: flex-end;">
|
|
<p class="item-value" style="color: #88a8f4;">{{ testchartData[1].value }}</p>
|
|
<div class="triangle-left" style="border-right:20px solid #88a8f4;"></div>
|
|
</div>
|
|
<p class="item-name">{{ testchartData[1].name }}</p>
|
|
|
|
</div>
|
|
<div class="item-box" style="top: 100px;right: 0;text-align: left;">
|
|
<div class="item-value-box">
|
|
<div class="triangle-right" style="border-left:20px solid #FFD700;"></div>
|
|
<p class="item-value" style="color: #FFD700;">{{ testchartData[2].value }}</p>
|
|
</div>
|
|
<p class="item-name">{{ testchartData[2].name }}</p>
|
|
</div>
|
|
<div class="item-box" style="top: 300px;right: 0;">
|
|
<div class="item-value-box">
|
|
<div class="triangle-right" style="border-left:20px solid #08e5ff;"></div>
|
|
<p class="item-value" style="color: #08e5ff;">{{ testchartData[3].value }}</p>
|
|
</div>
|
|
<p class="item-name">{{ testchartData[3].name }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import testRes from './test'
|
|
console.log(testRes)
|
|
export default {
|
|
name: 'RoseChart',
|
|
props: {
|
|
pieId: {
|
|
type: String,
|
|
},
|
|
chartData: {
|
|
type: Object,
|
|
},
|
|
props: {
|
|
dataType: {
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
config: {
|
|
data: [
|
|
{
|
|
value: 5149,
|
|
name: "机芯产量",
|
|
},
|
|
{
|
|
value: 5200,
|
|
name: "盖板产量",
|
|
},
|
|
{
|
|
value: 4320,
|
|
name: "整机产量",
|
|
},
|
|
{
|
|
value: 6155,
|
|
name: "组件产量",
|
|
},
|
|
],
|
|
color: ['#3de7c9','#88a8f4','#FFD700','#08e5ff'],
|
|
lineWidth: 40,
|
|
radius: '75%',
|
|
activeRadius: '80%'
|
|
},
|
|
testchartData:[
|
|
{
|
|
value: 5149,
|
|
name: "机芯产量",
|
|
},
|
|
{
|
|
value: 5200,
|
|
name: "盖板产量",
|
|
},
|
|
{
|
|
value: 4320,
|
|
name: "整机产量",
|
|
},
|
|
{
|
|
value: 6155,
|
|
name: "组件产量",
|
|
},
|
|
],
|
|
digitalFlopStyle: {
|
|
fontSize: 45,
|
|
fill: '#fff'
|
|
},
|
|
option: {}
|
|
}
|
|
},
|
|
created(){
|
|
// 获取 URL 查询参数并设置 dataType
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
const dataTypeParam = queryParams.get('q');
|
|
if(dataTypeParam == '3'){
|
|
this.config.data = [
|
|
{
|
|
value:testRes.data.yx_v_byzcl[0]["水件"],
|
|
name: "水件",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["排水阀"],
|
|
name: "排水阀",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["进水阀"],
|
|
name: "进水阀",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["按钮"],
|
|
name: "按钮",
|
|
},
|
|
];
|
|
this.testchartData = [
|
|
{
|
|
value:testRes.data.yx_v_byzcl[0]["水件"],
|
|
name: "水件",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["排水阀"],
|
|
name: "排水阀",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["进水阀"],
|
|
name: "进水阀",
|
|
},
|
|
{
|
|
value: testRes.data.yx_v_byzcl[0]["按钮"],
|
|
name: "按钮",
|
|
},
|
|
];
|
|
}
|
|
},
|
|
mounted() {
|
|
const { createData } = this
|
|
|
|
createData()
|
|
|
|
// setInterval(createData, 100000)
|
|
},
|
|
methods: {
|
|
createData() {
|
|
let chartData = [
|
|
{
|
|
value: 520,
|
|
name: "机芯产量",
|
|
},
|
|
{
|
|
value: 280,
|
|
name: "盖板产量",
|
|
},
|
|
{
|
|
value: 100,
|
|
name: "整机产量",
|
|
},
|
|
{
|
|
value: 100,
|
|
name: "组件产量",
|
|
},
|
|
];
|
|
|
|
const colorList = [
|
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#CA8CCA",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#8A2BE2",
|
|
// },
|
|
// ]),
|
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#FF3333",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#FF3333",
|
|
// },
|
|
// ]),
|
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#A8AAE5",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#BEA3E3",
|
|
// },
|
|
// ]),
|
|
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#F0F4F8",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#E5F2A7",
|
|
// },
|
|
// ]),
|
|
'#3de7c9','#88a8f4','#FFD700','#08e5ff'
|
|
];
|
|
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
|
const gap = (1 * sum) / 100;
|
|
const pieData1 = [];
|
|
const pieData2 = [];
|
|
const gapData = {
|
|
name: "",
|
|
value: gap,
|
|
itemStyle: {
|
|
color: "transparent",
|
|
},
|
|
};
|
|
for (let i = 0; i < chartData.length; i++) {
|
|
pieData1.push({
|
|
...chartData[i],
|
|
itemStyle: {
|
|
borderRadius: 100,
|
|
shadowColor: "#2a2a34",
|
|
shadowBlur: 5,
|
|
shadowOffsetY: 0,
|
|
shadowOffsetX: 0,
|
|
borderColor: "#2a2a34",
|
|
borderWidth: 2,
|
|
},
|
|
});
|
|
pieData1.push(gapData);
|
|
|
|
pieData2.push({
|
|
...chartData[i],
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
color: colorList[i],
|
|
opacity: 0.2,
|
|
shadowColor: "#000",
|
|
shadowBlur: 3,
|
|
shadowOffsetY: 5,
|
|
shadowOffsetX: 0,
|
|
},
|
|
});
|
|
pieData2.push(gapData);
|
|
}
|
|
var myChart = echarts.init(document.getElementById('pieId-new'));
|
|
this.option = {
|
|
title: [
|
|
{
|
|
text: sum,
|
|
x: "50%",
|
|
y: "40%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
fontSize: "50",
|
|
fontWeight: "500",
|
|
color: "#98b5d2",
|
|
textAlign: "center",
|
|
textShadowColor: "#000",
|
|
textShadowBlur: "1",
|
|
textShadowOffsetX: 2,
|
|
textShadowOffsetY: 2,
|
|
},
|
|
},
|
|
{
|
|
text: "总产量",
|
|
left: "50%",
|
|
top: "55%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
fontSize: "25",
|
|
fontWeight: "400",
|
|
color: "#c4c4c4",
|
|
textAlign: "center",
|
|
textShadowColor: "#000",
|
|
textShadowBlur: "1",
|
|
textShadowOffsetX: 1,
|
|
textShadowOffsetY: 1,
|
|
},
|
|
},
|
|
],
|
|
// legend: {
|
|
// right: "10%",
|
|
// top: 'middle',
|
|
// align: "left",
|
|
// width:'200',
|
|
// // orient: 'vertical',
|
|
// itemGap: 30,
|
|
// itemWidth: 20,
|
|
// itemHeight: 20,
|
|
// shadowBlur: 10,
|
|
// shadowOffsetY: 0,
|
|
// shadowOffsetX: 0,
|
|
// borderColor: "#2a2a34",
|
|
// borderWidth: 2,
|
|
// textStyle: {
|
|
// color: "#D8DDE3",
|
|
// rich: {
|
|
// name: {
|
|
// verticalAlign: "right",
|
|
// align: "left",
|
|
// fontSize: 24,
|
|
// color: "#D8DDE3",
|
|
// },
|
|
// percent: {
|
|
// padding: [0, 0, 0, 10],
|
|
// color: "#08e5ff",
|
|
// fontSize: 25,
|
|
// fontWeight:'bold'
|
|
// },
|
|
// },
|
|
// },
|
|
// formatter: (name) => {
|
|
// const item = chartData.find((i) => {
|
|
// return i.name === name;
|
|
// });
|
|
// //是否计算为百分比
|
|
// // const p = ((item.value / sum) * 100).toFixed(0);
|
|
// // return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
|
|
|
|
// // const p = ((item.value / sum) * 100).toFixed(0);
|
|
// return "{name|" + name + "}" + "{percent|" + item.value + "}";
|
|
// },
|
|
// },
|
|
|
|
color: colorList,
|
|
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
z: 3,
|
|
roundCap: true,
|
|
radius: ["60%", "50%"],
|
|
// center: ["30%", "50%"],
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: pieData1,
|
|
emphasis: { // 高亮时的样式（放大）
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
radius: ['35%', '65%'], // 放大后的半径
|
|
transition: ['radius'], // 开启动画过渡
|
|
}
|
|
},
|
|
blur: { // 非高亮时的样式（缩小）
|
|
itemStyle: {
|
|
radius: ['25%', '55%'] // 缩小后的半径
|
|
}
|
|
},
|
|
animationDuration: 1000, // 动画时长
|
|
animationEasing: 'cubicInOut' // 缓动效果
|
|
},
|
|
{
|
|
type: "pie",
|
|
z: 2,
|
|
radius: ["70%", "66%"],
|
|
// center: ["30%", "50%"],
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
silent: true,
|
|
data: pieData2,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(this.option);
|
|
// 轮播逻辑
|
|
let currentIndex = -1;
|
|
const dataLen = pieData1.length;
|
|
const timer = setInterval(() => {
|
|
// 取消之前的高亮
|
|
myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex });
|
|
// 计算下一个索引
|
|
currentIndex = (currentIndex + 1) % dataLen;
|
|
// 高亮当前项
|
|
myChart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: currentIndex
|
|
});
|
|
}, 2000); // 2秒切换一次
|
|
|
|
|
|
},
|
|
},
|
|
|
|
}
|
|
</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: 50%;
|
|
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>
|
|
|