增加伪3D柱状图、3D饼图扇形上增加标注
This commit is contained in:
TS-QD1
parent
68abd60696
commit
9703b689b3
250
src/components/echarts/BarFake3d1.vue
Normal file
250
src/components/echarts/BarFake3d1.vue
Normal file
File diff suppressed because one or more lines are too long
@ -157,6 +157,7 @@ const getPie3D = (pieData) => {
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
let seriesItem = {
|
||||
id: i,
|
||||
name: !pieData[i].name ? `series${i}` : pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
@ -182,14 +183,53 @@ const getPie3D = (pieData) => {
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
let barData = [];
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio);
|
||||
let pieData = series[i].pieData;
|
||||
endValue = startValue + pieData.value;
|
||||
pieData.startRatio = startValue / sumValue;
|
||||
pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(pieData.startRatio, pieData.endRatio);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
// 柱子，为了在饼状图上显示数字
|
||||
let midRatio = (pieData.startRatio + pieData.endRatio) / 2;
|
||||
barData.push({
|
||||
name: `${pieData.name}: ${pieData.value}`,
|
||||
// 柱子透明
|
||||
itemStyle: {
|
||||
color: [1, 1, 1, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: `{b}`,
|
||||
textStyle: {
|
||||
color: '#FFF',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
value: [Math.sin(midRatio * Math.PI * 2) * 0.6, Math.cos(midRatio * Math.PI * 2) * 0.6, 0.1]
|
||||
})
|
||||
}
|
||||
// 添加柱子，为了在饼状图上显示数字
|
||||
series.push({
|
||||
type: 'bar3D',
|
||||
data: barData,
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
})
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
@ -229,12 +269,12 @@ const getPie3D = (pieData) => {
|
||||
left: -80,
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 40, // 角度
|
||||
beta: 180, // 饼块开始位置角度
|
||||
alpha: 45, // 角度
|
||||
beta: 0, // 饼块开始位置角度
|
||||
rotateSensitivity: 0,
|
||||
zoomSensitivity: 0,
|
||||
panSensitivity: 0,
|
||||
autoRotate: false,
|
||||
autoRotate: true,
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
@ -283,6 +323,7 @@ const init = () => {
|
||||
let option = getPie3D(paramsList);
|
||||
var chart = echarts.init(document.getElementById(domId.value));
|
||||
chart.setOption(option);
|
||||
|
||||
chart.on('click', (params) => {
|
||||
emits('click', {
|
||||
index: params.seriesIndex,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="scroll-panel">
|
||||
<div class="title">
|
||||
<span class="item item1">序号</span>
|
||||
<span class="item item2">民族</span>
|
||||
<span class="item item2">宗教</span>
|
||||
<span class="item item3">人数(人)</span>
|
||||
<span class="item item4">占有率(%)</span>
|
||||
</div>
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
<div class="left">
|
||||
<CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount" @click="onLnrClick"/>
|
||||
<CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount" @click="onCjrClick"/>
|
||||
<CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
|
||||
<CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/>
|
||||
<CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount" @click="onTyfyClick"/>
|
||||
<!-- <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount" @click="onLnrClick"/>
|
||||
<Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" @click="onCjrClick"/>
|
||||
<Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
|
||||
<Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" @click="onShjzClick"/>
|
||||
<!-- <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" @click="onShjzClick"/> -->
|
||||
</div>
|
||||
</div>
|
||||
</ModuleCard3>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard1 title="少数民族分布统计">
|
||||
<BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount"
|
||||
@click="onClick" />
|
||||
<!-- <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" /> -->
|
||||
<BarFake3d1 id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" />
|
||||
</ModuleCard1>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
import { ref, reactive, inject, defineEmits } from 'vue';
|
||||
import ModuleCard1 from './card/ModuleCard1.vue';
|
||||
import BarSpike from '../components/echarts/BarSpike.vue';
|
||||
import BarFake3d1 from '../components/echarts/BarFake3d1.vue';
|
||||
|
||||
const emits = defineEmits(['click']);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user