This commit is contained in:
13713575202 2025-04-24 16:46:14 +08:00
commit d225f1be79
5 changed files with 30 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -37,7 +37,7 @@ export default {
emits: ['click'], emits: ['click'],
setup(props, { emit }) { setup(props, { emit }) {
const chartRef = ref(null); const chartRef = ref(null);
const { setOptions, getInstance } = useEcharts(chartRef); const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
const option = reactive({ const option = reactive({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -97,6 +97,11 @@ export default {
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData; option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
option.xAxis.data = xAxisData; option.xAxis.data = xAxisData;
setOptions(option); setOptions(option);
startAutoPlay({
interval: 2000,
seriesIndex: 0,
showTooltip: true,
});
getInstance()?.off('click', onClick); getInstance()?.off('click', onClick);
getInstance()?.on('click', onClick); getInstance()?.on('click', onClick);
} }

View File

@ -187,7 +187,7 @@ onUnmounted(() => {
.custom-rank-list { .custom-rank-list {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: v-bind('h+"px"');
.row-item { .row-item {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -18,6 +18,14 @@ const state = reactive({
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
formatter: (data) => {
const params = data[0];
let str = `<div class="custom-echarts-tips">
<span>${params.name}</span><br/>
<span>${params.marker} ${params.data} 万亩</span>
</div>`;
return str;
},
}, },
barStyle: { barStyle: {
barWidth: 15, barWidth: 15,

View File

@ -7,7 +7,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const options = ref({ const options = ref({
attr: { w: '100%', h: 200 }, attr: { w: '100%', h: 240 },
option: { option: {
// //
dataset: [ dataset: [
@ -25,20 +25,20 @@ const options = ref({
{ name: '大同', value: 51.11 }, { name: '大同', value: 51.11 },
], ],
type: 'column', type: 'column',
rowNum: 5, rowNum: 6,
isAnimation: true, isAnimation: true,
waitTime: 2, waitTime: 5,
unit: '万元', unit: '万元',
sort: true, sort: true,
height: 16, height: 12,
color: 'linear-gradient(90deg,rgba(53,208,192,0.00), #35d0c0)', color: 'linear-gradient(90deg,rgba(53,208,192,0.00), #35d0c0)',
textColor: '#fff', textColor: '#fff',
borderRadius: '12px', borderRadius: '12px',
carousel: 'single', carousel: 'single',
indexPrefix: 'TOP', indexPrefix: 'TOP',
indexFontSize: 12, indexFontSize: 12,
leftFontSize: 12, leftFontSize: 14,
rightFontSize: 12, rightFontSize: 14,
valueFormatter: (item) => { valueFormatter: (item) => {
return item.value; return item.value;
}, },
@ -48,8 +48,6 @@ const options = ref({
<style scoped lang="scss"> <style scoped lang="scss">
.rank { .rank {
padding: 10px 20px; padding: 10px 20px;
height: 200px;
overflow: hidden;
&:deep(.row-item) { &:deep(.row-item) {
.ranking-info { .ranking-info {
@ -65,15 +63,20 @@ const options = ref({
.ranking-value { .ranking-value {
color: #fe7f03 !important; color: #fe7f03 !important;
} }
.inside-column {
background: linear-gradient(90deg, rgba(254, 127, 3, 0), #fe7f03) !important;
}
} }
&:nth-child(2) { &:nth-child(2) {
.ranking-info { .ranking-info {
color: #fef906 !important; color: #fef906 !important;
} }
.ranking-value { .ranking-value {
color: #fef906 !important; color: #fef906 !important;
} }
.inside-column {
background: linear-gradient(90deg, rgba(254, 249, 6, 0), #fef906) !important;
}
} }
&:nth-child(3) { &:nth-child(3) {
.ranking-info { .ranking-info {
@ -82,6 +85,9 @@ const options = ref({
.ranking-value { .ranking-value {
color: #02fd94 !important; color: #02fd94 !important;
} }
.inside-column {
background: linear-gradient(90deg, rgba(2, 253, 148, 0), #02fd94) !important;
}
} }
} }
} }