Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen
This commit is contained in:
commit
d225f1be79
BIN
src/assets/images/basic/containerBotBG.png
Normal file
BIN
src/assets/images/basic/containerBotBG.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 88 KiB |
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user