146 lines
3.4 KiB
Vue
146 lines
3.4 KiB
Vue
<template>
|
|
<Box title="稻虾价格">
|
|
<div class="h-full flex flex-col">
|
|
<div class="py-10px">
|
|
<ul class="flex items-center justify-center m-0">
|
|
<li
|
|
class="mx-11px text-white text-12px cursor-pointer"
|
|
:class="{ active: currentTab == item.key }"
|
|
@click="changeTab(item.key)"
|
|
v-for="item in tabList"
|
|
:key="item.key"
|
|
>{{ item.value }}</li
|
|
>
|
|
</ul>
|
|
</div>
|
|
<div class="flex-1" ref="chartRef"> </div>
|
|
</div>
|
|
</Box>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
|
|
import Box from './Box.vue'
|
|
import { useECharts } from '/@/hooks/web/useECharts'
|
|
import echarts from '/@/utils/lib/echarts'
|
|
export default defineComponent({
|
|
components: {
|
|
Box,
|
|
},
|
|
setup() {
|
|
const tabList = reactive([
|
|
{
|
|
key: '0',
|
|
value: '全部',
|
|
},
|
|
{
|
|
key: '1',
|
|
value: '鱼',
|
|
},
|
|
{
|
|
key: '2',
|
|
value: '虾',
|
|
},
|
|
])
|
|
|
|
const currentTab = ref<String>('0')
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const changeTab = (key: String) => {
|
|
if (currentTab.value == key) return
|
|
currentTab.value = key
|
|
chartsInit()
|
|
}
|
|
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
|
|
|
const chartsInit = () => {
|
|
setOptions({
|
|
grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#019680',
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#8EEEFF',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
|
|
type: 'bar',
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#76E9F0',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#1A3537',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
chartsInit()
|
|
})
|
|
|
|
return {
|
|
tabList,
|
|
currentTab,
|
|
chartRef,
|
|
changeTab,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.active {
|
|
@apply font-bold text-15px text-[#76E9F0];
|
|
}
|
|
</style>
|