- <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: "",
- },
- //数据
- echartData: {
- 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({
- tooltip: {
- trigger: "axis",
- position: function (pt) {
- return [pt[0], "10%"];
- },
- },
- title: {
- left: "left",
- text: props.title,
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: "#545E75", //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: "3%",
- right: "7%",
- top: "15%",
- bottom: "15%",
- containLabel: true,
- },
- toolbox: {
- // feature: {
- // dataZoom: {
- // yAxisIndex: "none",
- // },
- // restore: {},
- // saveAsImage: {},
- // },
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: props.echartData.xAxisData,
- },
- yAxis: {
- type: "value",
- boundaryGap: [0, "100%"],
- },
- dataZoom: [
- {
- type: "inside",
- start: 0,
- end: 10,
- },
- {
- start: 0,
- end: 10,
- },
- ],
- series: [
- {
- name: props.echartData.seriesName,
- type: "line",
- symbol: "none",
- sampling: "lttb",
- itemStyle: {
- color: "rgb(255, 70, 131)",
- },
- areaStyle: {
- color: proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgb(255, 158, 68)",
- },
- {
- offset: 1,
- color: "rgb(255, 70, 131)",
- },
- ]),
- },
- data: props.echartData.seriesData,
- },
- ],
- });
- }
- onMounted(() => {
- intChart();
- window.addEventListener("resize", resizeTheChart);
- });
- </script>