- <template>
- <div class="line" v-loading="loading">
- <div class="echarts" ref="echarts"></div>
- <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
- </div>
- </template>
-
- <script setup>
- import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
- const props = defineProps({
- curType: {
- type: String,
- default: '',
- },
- //站点code
- stCode: {
- type: String,
- default: '',
- },
- rainTime: {
- type: String,
- default: '',
- },
- });
- const { proxy } = getCurrentInstance();
- const loading = ref(false);
- const myChart = shallowRef(null);
- const echartData = {
- xAxis: [],
- yAxis: [],
- };
-
- const initEcharts = () => {
- myChart.value && myChart.value.clear();
- myChart.value = proxy.echarts.init(proxy.$refs.echarts);
- // 绘制图表
- myChart.value.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- // formatter: params => {
- // let str = '';
- // params.forEach(item => {
- // str += `
- // <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
- // <div style="display: flex;align-items: center;">
- // <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
- // <span>${item.seriesName}</span>
- // </div>
- // <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
- // </div>
- // `;
- // });
- // return `
- // <div style="margin: 0px 0 0;line-height:1;width: 180px;">
- // <div>${params[0].axisValue}</div>
- // ${str}
- // </div>
- // `;
- // },
- },
- grid: {
- left: '12%',
- right: '8%',
- top: '24%',
- bottom: '16%',
- },
- xAxis: {
- type: 'category',
- data: echartData.xAxis,
- axisLabel: {
- color: '#D8F4FF',
- },
- axisLine: {
- lineStyle: {
- color: '#53D8FB',
- },
- },
- axisTick: {
- show: false,
- },
- },
- yAxis: [
- {
- name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
- type: 'value',
- nameTextStyle: {
- color: '#D1DEEE',
- },
- axisLabel: {
- color: '#fff',
- fontSize: 12,
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#005CBA',
- type: 'dashed',
- },
- },
- axisLine: {
- lineStyle: {
- color: '#005CBA',
- width: 1,
- type: 'dashed',
- },
- show: true,
- },
- splitLine: {
- lineStyle: {
- color: '#D1DEEE',
- type: 'dashed',
- color: '#53D8FB',
- },
- },
- nameTextStyle: {
- color: '#fff',
- },
- },
- ],
- series: [
- {
- name: '降雨量',
- type: 'bar',
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: '#0b9eff',
- },
- {
- offset: 1,
- color: '#63caff',
- },
- ],
- },
- },
- data: echartData.yAxis,
- },
- ],
- });
- };
-
- const getData = async () => {
- console.log(props, '1`');
- if (props.curType == 'day') return;
- loading.value = true;
- let rainTime = '';
- if (props.curType === 'month') {
- rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
- } else if (props.curType === 'year') {
- rainTime = proxy.moment(props.rainTime).format('YYYY');
- }
- const res = await rainRainlist({
- rainTime: rainTime,
- timeType: props.curType,
- stCode: props.stCode,
- });
- loading.value = false;
- if (res?.code !== 200) return;
- if (res.data) {
- echartData.xAxis = res.data.map(item => item.rainTime);
- echartData.yAxis = res.data.map(item => item.rainCumulative);
- }
- initEcharts();
- };
- watch(
- () => props.curType,
- value => {
- getData();
- },
- {
- deep: true,
- immediate: true,
- }
- );
- watch(
- () => props.stCode,
- value => {
- getData();
- },
- {
- deep: true,
- // immediate: true
- }
- );
- watch(
- () => props.rainTime,
- value => {
- getData();
- },
- {
- deep: true,
- // immediate: true
- }
- );
- onMounted(() => {
- window.addEventListener('resize', () => {
- myChart.value && myChart.value.resize();
- });
- });
- </script>
-
- <style lang="scss" scoped>
- .line {
- // padding-top: 10px;
- height: 100%;
- position: relative;
-
- .echarts {
- height: 100%;
- }
-
- .xAxisUnit {
- position: absolute;
- bottom: 8px;
- right: 20px;
- color: #d1deee;
- font-size: 12px;
- }
- }
- </style>