- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from "@/utils/ruoyi";
- const { proxy } = getCurrentInstance();
- const id = guid();
- const myChart = shallowRef("");
-
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //标题
- title: {
- type: String,
- default: "",
- },
- //数据
- data: {
- type: Object,
- default: {},
- },
- });
- watch(
- () => props.refresh,
- (value) => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- intChart();
- }
- );
-
- //自适应
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- function intChart() {
- myChart.value = proxy.echarts.init(document.getElementById(id));
- //获取湿度的最大值和最小值
- let shiDuMax = Math.max(...props.data.ydata2);
- let shiDuMin = Math.min(...props.data.ydata2);
- //温度的最大值和最小值
- let temMax = Math.max(...props.data.ydata1);
- let temMin = Math.min(...props.data.ydata1);
- // 绘制图表
- myChart.value.setOption({
- title: {
- text: "",
- },
- tooltip: {
- trigger: "axis",
- },
- grid: {
- left: "80px",
- right: "30px",
- top: "55px",
- bottom: "20px",
- },
- legend: {},
- toolbox: {
- show: false,
- feature: {
- dataZoom: {
- yAxisIndex: "none",
- },
- dataView: { readOnly: false },
- magicType: { type: ["line", "bar"] },
- restore: {},
- saveAsImage: {},
- },
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: props.data.xdata,
- axisLabel: {
- textStyle: {
- color: "#222",
- },
- },
- },
- yAxis: [
- {
- position: "left",
- type: "value",
- name: "温度°C",
- splitLine: {
- show: false,
- },
- nameGap: 20,
- max: parseInt(temMax * 1.1),
- min: parseInt(temMin * 0.8),
- nameTextStyle: {
- color: "#222",
- fontSize: 12,
- padding: [0, 0, 0, -35],
- },
- axisLabel: {
- textStyle: {
- color: "#222", //字体颜色
- fontSize: 12, //字体大小
- },
- },
- },
- {
- position: "left",
- offset: 45, //距离第一个Y轴50像素,注意grid: x=85,给第三个Y轴预留空间
- type: "value",
- name: "湿度%",
- min: parseInt(shiDuMin * 0.8),
- splitLine: {
- show: false,
- },
- nameGap: 20,
- nameTextStyle: {
- color: "#222",
- fontSize: 12,
- padding: [0, 0, 0, -35],
- },
- axisLabel: {
- textStyle: {
- color: "#222", //字体颜色
- fontSize: 12, //字体大小
- },
- },
- },
- {
- position: "right",
- type: "value",
- name: "降雨量mm",
- splitLine: {
- show: false,
- },
- nameGap: 20,
- nameTextStyle: {
- color: "#222",
- fontSize: 12,
- },
- axisLabel: {
- textStyle: {
- color: "#222", //字体颜色
- fontSize: 12, //字体大小
- },
- },
- },
- ],
- series: [
- {
- name: "温度",
- type: "line",
- data: props.data.ydata1,
- markPoint: {
- data: [
- { type: "max", name: "Max" },
- { type: "min", name: "Min" },
- ],
- },
-
- yAxisIndex: 0,
- },
- {
- name: "湿度",
- type: "line",
- data: props.data.ydata2,
- yAxisIndex: 1,
- },
- {
- name: "降雨量",
- type: "line",
- data: props.data.ydata3,
- yAxisIndex: 2,
- },
- ],
- });
- }
- onMounted(() => {
- intChart();
- window.addEventListener("resize", resizeTheChart);
- });
- </script>