VUE 3.0 最简单的曲线echarts、只能看不能点

先放成品图

这里只能展示出来，鼠标悬浮没有数据显示。
因为我用的vue3.0.所以用3.0的方式来说。
第一步先安装依赖，// 直接上图

点进去

继续点

这个选择运行依赖，因为你打包好上线的肯定也需要用，所以安装到运行依赖里面。在查找插件里面输入echarts。搜索

选择echarts安装。然后就去项目里面。就可以引用了，用import引入echarts。

在你的代码里面要写上一个初始化的容器，可以用css调节这个图表的大小。

准备就绪了就可以上初始化的代码了，

初始化图表的两句话。前提你得先把下面的option给定义了。

	this.myChart = echarts.init(document.getElementById('echars'))
    this.myChart.setOption(this.option)

要在mounted钩子里面获取容器实例化图表。在data里面定义一个null，用来接收dom对象。然后我把option数据贴出来，研究一下。这个option定义在data函数return出去的对象里面.
你可以改里面的颜色。xAxis下面的data数组是你的x轴的数据，yAxis的东西都隐藏了，也不需要啥。
主要就是 series数组里面的data，你从后台请求过来数据，只替换这两个data的数据就行了。别的都不变。

option: {
        xAxis: {
          show: false,
          axisTick: {
            show: false
          },
          boundaryGap: false,
          data: ['01', '02', '03', '04', '05', '06', '02'] // x轴的下标数据
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false // 不显示y轴横刻度线
          },
          axisLabel: {
            show: false // 不显示y轴上的刻度数
          },
          axisLine: {
            show: false // 不显示y轴竖线
          },
          splitLine: {
            show: false // 不显示分割线
          }
        },
        series: [
          {
            type: 'line',
            symbol: 'none', // 不显示曲线上的数据点
            smooth: true, // 是否开启曲线，true为开启
            itemStyle: {
              normal: {
                color: '#00d9ff' // 曲线的颜色
              }
            },
            areaStyle: {
              // 曲线下的渐变色
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#d7f9ff'
                  },
                  {
                    offset: 1,
                    color: '#f9feff'
                  }
                ])
              }
            },
            data: [10, 20, 25, 100, 40, 10, 20] // 对应的x轴数据
          }
        ]