echarts

.env.development

@@ -5,9 +5,11 @@ NODE_ENV = development
 VITE_TITLE = Snowy
 
 # 本地
-#VITE_API_BASEURL = http://127.0.0.1:82
+VITE_API_BASEURL = http://127.0.0.1:82
+
+
 # 紫光云
-VITE_API_BASEURL = http://172.16.0.37:80/province
+# VITE_API_BASEURL = http://172.16.0.37:80/province
 # 政务云
 #VITE_API_BASEURL = http://172.18.93.196:80/province
 

src/api/basic.info/processedgrainApi.js

@@ -0,0 +1,16 @@
+import {
+	baseRequest
+} from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/basic.info/grainPriceCollectProvinceSum/` + url, ...arg)
+
+/*成品粮统计分析 */
+
+export default {
+
+	processedgrain(data) {
+		return request('summaryAnalysis', data, 'get')
+	}
+
+}
+// 我告诉你个事，我接口调了！有数据！但是我不知道写哪里你看控制台打印

src/views/basic.info/processedgrain/index.vue

@@ -0,0 +1,186 @@
+<template>
+	<div class="top">
+		品牌：
+		<a-select
+			v-model:value="value"
+			label-in-value
+			style="width: 120px"
+			:options="options"
+			@change="handleChange"
+		></a-select>
+		市州：
+		<a-select
+			v-model:value1="values"
+			label-in-value
+			style="width: 120px"
+			:options="optionses"
+			@change="handleChange"
+		></a-select>
+		汇总日期：
+		<a-space direction="vertical" :size="12">
+			<a-range-picker :size="size" />
+		</a-space>
+		<button @click="query">查询</button> <button @abort="reset">重置</button>
+		<button @click="download">导出</button>
+	</div>
+
+	<div ref="main" style="width: 80%; height: 600px"></div>
+</template>
+
+<script setup>
+	import * as echarts from 'echarts'
+	import { ref, onMounted } from 'vue'
+
+	import processedgraindata from '@/api/basic.info/processedgrainApi'
+	const main = ref(null)
+
+	onMounted(() => {
+		processedgrainData()
+	})
+	let index = ref('')
+	const handleChange = (value) => {
+		index = value.value
+		console.log(index, 'ii')
+		processedgrainData()
+	}
+	// 定义一个响应式变量来存储接口数据
+	//let 定义变量
+	const userData = ref([])
+	const processedgrainData = () => {
+		processedgraindata
+			.processedgrain({
+				firstLevel: '3',
+				secondLevel: '',
+				threeLevel: '',
+				sysOrgld: '',
+				sumEndTime: '',
+				sumStartTime: ''
+			})
+			.then((res) => {
+				console.log(res, 1561531)
+				userData.value = res
+				console.log(userData.value, 'aaa')
+				renderChart()
+			})
+	}
+
+	const options = ref([
+		{
+			value: '0',
+			label: '三级菜籽油'
+		},
+		{
+			value: '1',
+			label: '特一粉'
+		},
+		{
+			value: '2',
+			label: '一级圆粒米'
+		}
+	])
+	const optionses = ref([
+		{
+			value: '海东市',
+			label: '海东市'
+		},
+		{
+			value: '西宁市',
+			label: '西宁市'
+		}
+	])
+	const renderChart = () => {
+		// 获取容器元素
+		const chartDom = main.value
+
+		// 初始化 ECharts 实例
+		const myChart = echarts.init(chartDom)
+		// 配置项
+		// 三级菜籽油
+		const seriesData = [
+			{
+				name: '批发价格',
+				data: userData.value
+					.map((i) => {
+						return i
+					})
+					.map((m) => {
+						return m
+					})
+			},
+			{
+				name: '零售价格',
+				data: [3]
+			}
+		]
+
+		const option = {
+			title: {
+				text: userData.value.map((i) => {
+					return i.id
+				})
+			},
+			tooltip: {
+				trigger: 'axis'
+			},
+			legend: {
+				data: ['批发价格', '零售价格']
+			},
+			grid: {
+				left: '10%',
+				right: '10%',
+				bottom: '3%',
+				containLabel: true
+			},
+			// 导出图片
+			// toolbox: {
+			// 	feature: {
+			// 		saveAsImage: {}
+			// 	}
+			// },
+			xAxis: {
+				name: '日期',
+				type: 'category',
+				boundaryGap: false,
+				data: userData.value.map((i) => {
+					return i.sumTime
+				})
+			},
+			yAxis: {
+				name: '金额(元)',
+				type: 'value'
+			},
+			series: seriesData.map((series) => ({
+				name: series.name,
+				type: 'line',
+
+				legend: series.data,
+
+				data: series.data
+			}))
+		}
+
+		// 渲染图表
+		myChart.setOption(option)
+	}
+	// 处理按钮点击事件的函数
+	const query = () => {
+		console.log(1111)
+	}
+</script>
+
+<style lang="less" scoped>
+	/* 可选的样式 */
+	.top {
+		width: 100%;
+		height: 140px;
+		margin-top: 20px;
+		margin-left: 10%;
+		button {
+			width: 60px;
+			height: 50%;
+			border: solid 1px #ccc;
+			margin-left: 30px;
+			background: #fff;
+		}
+	}
+</style>