- <template>
- <!-- 天气温度平滑折线图 -->
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from "@/utils/ruoyi";
- import { nextTick } from "vue";
- const { proxy } = getCurrentInstance();
- const id = guid();
- const myChart = shallowRef("");
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- data: {
- type: Object,
- default: {},
- },
- });
-
- watch(
- () => props.data,
- (value) => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
-
- function init() {
- myChart.value = proxy.echarts.init(document.getElementById(id));
- console.log(myChart.value);
- var option = {
- xAxis: {
- type: "category",
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
- boundaryGap: false,
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
- axisLine: {
- show: false, // 不显示坐标轴线
- },
- axisLabel: {
- show: false, // 不显示坐标轴上的文字
- },
- splitLine: {
- show: false, // 不显示网格线
- },
- },
- grid: {
- left: "40px",
- right: "40px",
- top: "35px",
- bottom: "20px",
- },
- yAxis: {
- type: "value",
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
- axisLine: {
- show: false, // 不显示坐标轴线
- },
- axisLabel: {
- show: false, // 不显示坐标轴上的文字
- },
- splitLine: {
- show: false, // 不显示网格线
- },
- },
-
- series: [
- {
- data: props.data.ydata2,
- type: "line",
- lineStyle: {
- color: "#FF9C40",
- },
- itemStyle: {
- normal: {
- color: "#FF9C40", //折点颜色
- label: {
- show: true, //是否显示
- position: "top", //显示在顶部
- textStyle: {
- color: "#FF9C40", //字体颜色
- fontSize: 12, //字体大小
- fontFamily: "Source Han Sans CN",
- },
- formatter: "{c}℃",
- },
- },
- },
- smooth: true,
- },
- {
- data: props.data.ydata1,
- type: "line",
- lineStyle: {
- color: "#7EC1FF",
- },
- itemStyle: {
- normal: {
- color: "#7EC1FF", //折点颜色
- label: {
- show: true, //是否显示
- position: "bottom",
- textStyle: {
- color: "#7EC1FF", //字体颜色
- fontSize: 12, //字体大小
- fontFamily: "Source Han Sans CN",
- },
- formatter: "{c}℃",
- },
- },
- },
- smooth: true,
- },
- ],
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener("resize", resizeTheChart);
- });
- });
- </script>