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" >