diff --git a/src/components/custom-echart-pie-3d/index.vue b/src/components/custom-echart-pie-3d/index.vue
index 6c46cdf..f32340c 100644
--- a/src/components/custom-echart-pie-3d/index.vue
+++ b/src/components/custom-echart-pie-3d/index.vue
@@ -52,6 +52,16 @@ export default {
}
);
+ watch(
+ () => props.option,
+ () => {
+ initCharts();
+ },
+ {
+ immediate: true,
+ }
+ );
+
function initCharts() {
if (props.option) {
Object.assign(option, cloneDeep(props.option));
diff --git a/src/views/inputs/components/inputsFive.vue b/src/views/inputs/components/inputsFive.vue
index 0d4b703..ea7c0c9 100644
--- a/src/views/inputs/components/inputsFive.vue
+++ b/src/views/inputs/components/inputsFive.vue
@@ -26,6 +26,8 @@ const state = reactive({
axisPointer: {
type: 'shadow',
},
+ backgroundColor: 'rgba(18, 55, 85, 0.8);',
+ borderColor: '#35d0c0',
formatter: (data) => {
const params = data[0];
let str = `
diff --git a/src/views/inputs/components/inputsFour.vue b/src/views/inputs/components/inputsFour.vue
index fd14f3a..de4165e 100644
--- a/src/views/inputs/components/inputsFour.vue
+++ b/src/views/inputs/components/inputsFour.vue
@@ -10,13 +10,11 @@ const state = reactive({
text: '',
});
-const currentText = computed(() => state.text);
-
const pieData = [
- { value: 530, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
- { value: 1215, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
- { value: 2312, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
- { value: 916, name: '其他', itemStyle: { color: '#FF8329' } },
+ { value: 33, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
+ { value: 45, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
+ { value: 22, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
+ { value: 9, name: '其他', itemStyle: { color: '#FF8329' } },
];
// 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
@@ -202,24 +200,24 @@ function getPie3D(pieData, internalDiameterRatio) {
// return `${name} ${target}`;
// },
},
- // title: {
- // text: `{a|45%}{c|\n肥料厂家}`,
- // x: 'center',
- // y: 'center',
- // textStyle: {
- // rich: {
- // a: {
- // fontSize: 20,
- // color: '#fff',
- // },
- // c: {
- // fontSize: 12,
- // color: '#fff',
- // padding: [15, 0],
- // },
- // },
- // },
- // },
+ title: {
+ text: '',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 20,
+ color: '#fff',
+ },
+ c: {
+ fontSize: 12,
+ color: '#fff',
+ padding: [15, 0],
+ },
+ },
+ },
+ },
tooltip: {
show: false,
backgroundColor: 'rgba(18, 55, 85, 0.8);',
@@ -260,7 +258,7 @@ function getPie3D(pieData, internalDiameterRatio) {
alpha: 45, //角度(这个很重要 调节角度的)
distance: 150, //调整视角到主体的距离,类似调整zoom(这是整体大小)
rotateSensitivity: 1, //设置为0无法旋转
- zoomSensitivity: 1, //设置为0无法缩放
+ zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: true, //自动旋转
},
@@ -271,13 +269,13 @@ function getPie3D(pieData, internalDiameterRatio) {
}
const handleClick = (params) => {
- console.log(270, params);
- // state.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
- // currentText.value =
+ state.option.title.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
};
onMounted(() => {
const option = getPie3D(pieData, 0.8);
+ const { name, value } = option.series[0].pieData;
+ option.title.text = `{a|${value}%}{c|\n${name}}`;
state.option = option;
state.data = option.series;
});
diff --git a/src/views/inputs/index.vue b/src/views/inputs/index.vue
index c40ea1f..4833dc7 100644
--- a/src/views/inputs/index.vue
+++ b/src/views/inputs/index.vue
@@ -57,14 +57,14 @@
@command="handleCommand"
>
-
+
-
+