echarts的使用，配合搜索，搜索后echarts反应的搜索数据

1.echarts基本使用法

首先echarts整上，

<1>cmd,导入yarn add echarts。

<2>引入import * as echarts from 'echarts'

<3>准备好一个dom(具有宽度和高度),初始化echarts对象,

      let myChart= echarts.init(dom节点)

<4>图标的配置项：官网看示例,找类似的,自己改改

      let option={}

<5>画图

      myChart.setOption(option);

注意：在mounted调用，因为在放入echarts图前，要准备好一个有宽高的dom节点，而mounted就是dom挂载时期的钩子函数，created时期dom还未进行任何渲染，所以如果要在created时期就使用echarts，那就要在created里加$nextTick。

2.结合搜索功能

逻辑是：<1>定义一个方法draw()，调用echarts

              <2>定义一个方法getOrderTotal()，调用接口，并把数据传入echarts

                    this.draw(this.orderTime, this.orderAmount)

              <3>在mounted时期调用接口

              <4>定义一个方法serch()，点击搜索按钮后时触，重新调用接口 getOrderTotal()，重新渲                      染数据页面

3.页面自适应

3.1

第一种，echarts有一个内置方法为resize()，改变屏幕的大小，还有通过监听宽度来实现

//页面自适应
<template>
    <div class="echarts-box" ref="echartsBox"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      date: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.darwEcharts();
    });

    //给页面添加resize事件
    window.addEventListener("resize", this.resizeHandle);
  },
  beforeDestroy() {
    //清除事件
    window.removeEventListener("resize", this.resizeHandle);
  },
  methods: {
    resizeHandle() {
      //resize() echarts的内置方法
      this.myChart.resize();
    },
    darwEcharts() {
      //初始化echarts对象
      this.myChart = echarts.init(this.$refs.echartsBox);
      //设置配置项
      let option = {
        title: {
          text: "订单数据"
        },
        //x轴
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        //y轴
        yAxis: {
          type: "value"
        },
        //颜色
        color: "deeppink",
        //图例
        legend: {
          data: ["订单数据"]
        },
        //工具栏
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {},
            magicType: {
              type: ["line", "bar"]
            }
          }
        },
        //核心数据
        series: [
          {
            name: "订单数据",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            label: {
              show: true,
              position: "top"
            }
          }
        ]
      };
      //画图
      this.myChart.setOption(option);
    }
  }
};
</script>

3.2

第二种，监听宽度变化，动态绑定宽度（这里是vue3结合hooks）