修改样式
parent
8858443f2e
commit
96b81c0a5e
|
|
@ -399,3 +399,17 @@ export function getShrimpPrices(params, mode: ErrorMessageMode = 'modal') {
|
|||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:getCropYields
|
||||
*/
|
||||
export function getCropYields(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: `/api/rice-shrimp-prices`,
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
|
|
@ -17,7 +17,7 @@
|
|||
<img class="w-76.5px h-7.5px" :src="HeadIcon" alt="" srcset="" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="px-14px pb-14px flex-1">
|
||||
<div class="px-14px pb-14px flex-1 -mt-4px">
|
||||
<div class="bg-[#293E4E] bg-opacity-30 h-full">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
},
|
||||
headHeight: {
|
||||
type: String as PropType<string>,
|
||||
default: '49px',
|
||||
default: '34px',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@
|
|||
year: visualizationStore.getYear,
|
||||
base_id: visualizationStore.getAddresId,
|
||||
category_id: cropsId.value,
|
||||
crop_id: props.parentId ?? currentTab.value?.id ?? null,
|
||||
crop_id: currentTab.value?.id ?? props.parentId ?? null,
|
||||
})
|
||||
const list: any[] = []
|
||||
for (const key in resData) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<div class="relative w-full h-full" style="zoom: 0.55">
|
||||
<div class="container-box">
|
||||
<div class="main" :style="`transform: rotateY(-${count * 90}deg) translateZ(-200px)`">
|
||||
<div
|
||||
class="figure frame"
|
||||
:style="`transform: rotateY(${index * 90}deg) translateZ(400px)`"
|
||||
v-for="(item, index) in pAxis"
|
||||
:key="index"
|
||||
>
|
||||
<div class="text-white px-10px">
|
||||
<div class="text-16px py-4px">{{ item }}</div>
|
||||
<div class="text-left" v-for="(ob, ins) in pDxis" :key="ins">
|
||||
<span>{{ ob.name }} ：</span>
|
||||
<span>{{ ob.data[index] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-container" style="transform: translateZ(-200px)">
|
||||
<div class="big-circle"></div>
|
||||
<div class="small-circle"></div>
|
||||
</div>
|
||||
<div class="static-container">
|
||||
<div class="all-lights1"></div>
|
||||
<div class="all-lights2"></div>
|
||||
<div class="earth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, unref, ref, watchEffect } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
// :axis="x_axis" :data="series"
|
||||
props: {
|
||||
axis: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const count = ref(0)
|
||||
|
||||
const pAxis = computed(() => unref(props.axis))
|
||||
|
||||
const pDxis = computed(() => unref(props.data))
|
||||
|
||||
let timer: any = null
|
||||
|
||||
function Interval() {
|
||||
count.value = 0
|
||||
timer?.clearInterval()
|
||||
timer = setInterval(() => {
|
||||
count.value += 1
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
Interval()
|
||||
|
||||
return {
|
||||
count,
|
||||
pAxis,
|
||||
pDxis,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container-box {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
perspective: 800px;
|
||||
perspective-origin: 50% -50%;
|
||||
clear: both;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 35%;
|
||||
transform-style: preserve-3d;
|
||||
z-index: 2;
|
||||
transform-origin: 100px 0px -200px;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
transition: transform 0.5s ease-in-out 0s;
|
||||
|
||||
.frame {
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
background: #28f2e660;
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.figure,
|
||||
.total-item {
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 38%;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
.big-circle,
|
||||
.small-circle {
|
||||
background-position: 50%;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.big-circle {
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
top: -550px;
|
||||
left: -510px;
|
||||
background-image: url('../../../assets/images/img03.png');
|
||||
transform: rotateX(90deg) translateZ(-70px);
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
animation: 20s linear 0s infinite normal none running rotateCircle;
|
||||
}
|
||||
|
||||
.small-circle {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
top: -250px;
|
||||
left: -200px;
|
||||
background-image: url('../../../assets/images/img02.png');
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
transform: rotateX(90deg) translateZ(0);
|
||||
|
||||
animation: 20s linear 0s infinite normal none running rotateSmallCircle;
|
||||
}
|
||||
}
|
||||
|
||||
.static-container {
|
||||
.all-lights1,
|
||||
.all-lights2 {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
position: absolute;
|
||||
background-size: 100%;
|
||||
transform: rotateX(50deg);
|
||||
}
|
||||
|
||||
.all-lights1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -110px;
|
||||
background-image: url('../../../assets/images/img01.png');
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.all-lights2 {
|
||||
width: 133.333px;
|
||||
height: 133.333px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -90px;
|
||||
background-image: url('../../../assets/images/img04.png');
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.earth,
|
||||
.steps {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
position: absolute;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.earth {
|
||||
background-image: url('../../../assets/images/img05.png');
|
||||
z-index: 19;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateCircle {
|
||||
0% {
|
||||
transform: rotateY(0) rotateX(90deg) translateZ(-70px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(1turn) rotateX(90deg) translateZ(-70px);
|
||||
}
|
||||
}
|
||||
@keyframes rotateSmallCircle {
|
||||
0% {
|
||||
transform: rotateY(0) rotateX(90deg) translateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(-1turn) rotateX(90deg) translateZ(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +1,27 @@
|
|||
<template>
|
||||
<Box title="稻虾产业">
|
||||
<template #right>
|
||||
<div class="text-[#76E9F0] text-13px cursor-pointer" @click="changeChart">切换</div>
|
||||
</template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex-1" ref="chartRef"> </div>
|
||||
<div v-show="isChart" class="flex-1" ref="chartRef"> </div>
|
||||
<Circle v-show="!isChart" class="flex-1" :axis="x_axis" :data="series" />
|
||||
</div>
|
||||
</Box>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
|
||||
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch, toRefs } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import { getRiceShrimpIndustry } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import { chartLineColors } from './colors'
|
||||
import Circle from './Circle.vue'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Box,
|
||||
Circle,
|
||||
},
|
||||
setup() {
|
||||
const Data = reactive({
|
||||
|
|
@ -23,11 +29,17 @@
|
|||
series: [],
|
||||
})
|
||||
|
||||
const isChart = ref(true)
|
||||
|
||||
function changeChart() {
|
||||
isChart.value = !isChart.value
|
||||
}
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpIndustry({
|
||||
|
|
@ -35,9 +47,10 @@
|
|||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
let legendData = [] as any
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
|
|
@ -50,16 +63,21 @@
|
|||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
smooth: true,
|
||||
smooth: false,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
// symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
})
|
||||
})
|
||||
legendData = obj.legendData
|
||||
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
|
|
@ -111,6 +129,34 @@
|
|||
],
|
||||
series: obj.series,
|
||||
})
|
||||
|
||||
// chartAmi()
|
||||
}
|
||||
|
||||
let timer: any = null
|
||||
function chartAmi() {
|
||||
let index = 0
|
||||
timer?.clearInterval()
|
||||
timer = setInterval(() => {
|
||||
const currentIndex = index % legendData.length
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendUnSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex,
|
||||
})
|
||||
|
||||
index++
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
|
|
@ -123,6 +169,9 @@
|
|||
)
|
||||
|
||||
return {
|
||||
isChart,
|
||||
changeChart,
|
||||
...toRefs(Data),
|
||||
chartRef,
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
chartsInit()
|
||||
}
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
let legendData = [] as any
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
|
|
@ -62,8 +62,8 @@
|
|||
name: name,
|
||||
data: data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
smooth: false,
|
||||
// symbol: 'none',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
},
|
||||
|
|
@ -72,8 +72,11 @@
|
|||
},
|
||||
})
|
||||
})
|
||||
|
||||
legendData = obj.legendData
|
||||
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: obj.legendData,
|
||||
top: '0%',
|
||||
|
|
@ -111,6 +114,8 @@
|
|||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
max: 60,
|
||||
min: 0,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
|
|
@ -124,7 +129,35 @@
|
|||
},
|
||||
],
|
||||
series: obj.series,
|
||||
animationDuration: 2000,
|
||||
})
|
||||
chartAmi()
|
||||
}
|
||||
let timer: any = null
|
||||
function chartAmi() {
|
||||
let index = 0
|
||||
timer?.clearInterval()
|
||||
timer = setInterval(() => {
|
||||
const currentIndex = index % 4
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendUnSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex,
|
||||
})
|
||||
|
||||
index++
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
||||
async function getData() {
|
||||
const resData = await getRiceShrimpFlow({
|
||||
|
|
@ -35,9 +35,12 @@
|
|||
})
|
||||
Data.x_axis = resData.x_axis
|
||||
Data.series = resData.series
|
||||
|
||||
chartsInit()
|
||||
}
|
||||
|
||||
let legendData = [] as any
|
||||
|
||||
const chartsInit = () => {
|
||||
const obj = {
|
||||
legendData: [] as any,
|
||||
|
|
@ -50,9 +53,9 @@
|
|||
obj.series.push({
|
||||
name: name,
|
||||
data: data,
|
||||
smooth: true,
|
||||
smooth: false,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
// symbol: 'none',
|
||||
stack: 'Total',
|
||||
itemStyle: {
|
||||
color: color.itemColor,
|
||||
|
|
@ -62,6 +65,8 @@
|
|||
},
|
||||
})
|
||||
})
|
||||
|
||||
legendData = obj.legendData
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
|
|
@ -114,7 +119,37 @@
|
|||
},
|
||||
],
|
||||
series: obj.series,
|
||||
animationDuration: 3000,
|
||||
})
|
||||
|
||||
chartAmi()
|
||||
}
|
||||
|
||||
let timer: any = null
|
||||
function chartAmi() {
|
||||
let index = 0
|
||||
timer?.clearInterval()
|
||||
timer = setInterval(() => {
|
||||
const currentIndex = index % 4
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendUnSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex,
|
||||
})
|
||||
|
||||
index++
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@
|
|||
symbol: (_, params) => {
|
||||
return mapData[params.dataIndex].img
|
||||
},
|
||||
symbolSize: [32, 41],
|
||||
symbolSize: [21, 30],
|
||||
symbolOffset: [0, -20],
|
||||
z: 9999,
|
||||
data: mapData,
|
||||
|
|
@ -280,8 +280,8 @@
|
|||
color: '#00FFF6',
|
||||
},
|
||||
symbol: img2,
|
||||
symbolSize: [100, 50],
|
||||
symbolOffset: [0, -60],
|
||||
symbolSize: [100, 34],
|
||||
symbolOffset: [0, -46],
|
||||
z: 999,
|
||||
data: mapData,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -122,7 +122,14 @@
|
|||
function chatInit() {
|
||||
setOptions({
|
||||
legend: {
|
||||
show: false,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
|
@ -131,7 +138,8 @@
|
|||
{
|
||||
name: '隆昌农业产业情况',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
radius: '80%',
|
||||
center: ['40%', '50%'],
|
||||
colorBy: 'data',
|
||||
color: colorList,
|
||||
itemStyle: {
|
||||
|
|
@ -140,7 +148,7 @@
|
|||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
formatter: '{b}\n{d}%',
|
||||
},
|
||||
data: Data.lyqkData.map((item, index) => {
|
||||
|
|
@ -152,6 +160,45 @@
|
|||
},
|
||||
],
|
||||
})
|
||||
|
||||
chartAmi()
|
||||
}
|
||||
|
||||
let timer: any = null
|
||||
function chartAmi() {
|
||||
let index = 0
|
||||
timer?.clearInterval()
|
||||
timer = setInterval(() => {
|
||||
const currentIndex = index % Data.lyqkData.length
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendUnSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
// getInstance()?.dispatchAction({
|
||||
// type: 'legendSelect',
|
||||
// name: legendData[currentIndex],
|
||||
// })
|
||||
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex,
|
||||
})
|
||||
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex - 1,
|
||||
})
|
||||
getInstance()?.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex,
|
||||
})
|
||||
|
||||
index++
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
async function getCropYieldCategory() {
|
||||
|
|
|
|||
|
|
@ -52,12 +52,11 @@
|
|||
import { defineComponent, reactive, ref, Ref, onBeforeMount, computed, toRefs } from 'vue'
|
||||
import Box from './Box.vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
import { getAgriculturalDeviceBasic, getDeviceBaseDataStatics } from '/@/api/sys/other'
|
||||
import { DownOutlined } from '@ant-design/icons-vue'
|
||||
import { Dropdown, Menu } from 'ant-design-vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { chartBarColors } from './colors'
|
||||
import { chartLineColors } from './colors'
|
||||
import { dateUtil } from '/@/utils/dateUtil'
|
||||
const desList = [
|
||||
{
|
||||
|
|
@ -177,7 +176,7 @@
|
|||
|
||||
const chartsInit = () => {
|
||||
const data = Data.list.map((e, index) => {
|
||||
const color = chartBarColors[index % chartBarColors.length]
|
||||
const color = chartLineColors[index % chartLineColors.length]
|
||||
return {
|
||||
axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
|
||||
name: e.name,
|
||||
|
|
@ -187,27 +186,21 @@
|
|||
type: 'line',
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color.itemColor1,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color.itemColor2,
|
||||
},
|
||||
]),
|
||||
color: color.itemColor,
|
||||
},
|
||||
areaStyle: {
|
||||
color: color.areaColor,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '20px', bottom: '2%', containLabel: true },
|
||||
grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: data.map((e) => e.name),
|
||||
top: '0%',
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@
|
|||
})
|
||||
|
||||
setOptions({
|
||||
grid: { left: '2%', right: '2%', top: '20px', bottom: '2%', containLabel: true },
|
||||
grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
|
||||
legend: {
|
||||
data: data.map((e) => e.name),
|
||||
top: '0%',
|
||||
|
|
|
|||
|
|
@ -6,11 +6,35 @@ export const chartLineColors = [
|
|||
},
|
||||
{
|
||||
itemColor: '#28F2E6',
|
||||
areaColor: 'rgba(40, 242, 230, 0.4)',
|
||||
areaColor: '#28f2e660',
|
||||
},
|
||||
{
|
||||
itemColor: '#5470c6',
|
||||
areaColor: 'rgba(40, 242, 230, 0.4)',
|
||||
areaColor: '#5470c660',
|
||||
},
|
||||
{
|
||||
itemColor: '#91cc75',
|
||||
areaColor: '#91cc7560',
|
||||
},
|
||||
{
|
||||
itemColor: '#fac858',
|
||||
areaColor: '#fac85860',
|
||||
},
|
||||
{
|
||||
itemColor: '#ee6666',
|
||||
areaColor: '#ee666660',
|
||||
},
|
||||
{
|
||||
itemColor: '#73c0de',
|
||||
areaColor: '#73c0de60',
|
||||
},
|
||||
{
|
||||
itemColor: '#3ba272',
|
||||
areaColor: '#3ba27260',
|
||||
},
|
||||
{
|
||||
itemColor: '#fc8452',
|
||||
areaColor: '#fc845260',
|
||||
},
|
||||
]
|
||||
export const chartBarColors = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue