Vue项目引入Echarts

欢迎来到昂焱数据，这里有全网最专业的技术资源任你挑
(Vue项目引入Echarts)

安装echarts依赖

npm install echarts

创建折线图

首先要在main.js中全局引入Echarts

import echarts from 'echarts'
 //将echarts引入到vue的原型中
Vue.prototype.$echarts = echarts

在需要使用的画面追加dom元素

初始化echarts实例（在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中）

drawLine(){
   // 基于准备好的dom，初始化echarts实例
   let myChart = this.$echarts.init(document.getElementById('myChart'));
   // 绘制图表
   myChart.setOption({
     grid: {
       x: 25,//左边距
       x2: 40,//右边距
       y: 35,//上边距
      },
      //图表标题 
      title: {
          text: '',
          textStyle: {  //标题样式
              fontSize:14,
          },  
      },
      //数据提示框配置 可选为：'item' | 'axis'
      tooltip: {
          trigger: 'axis'
      },
      xAxis:  {
           type: 'category',
           boundaryGap: false,
           data: ['08-14','08-15','08-16','08-17','08-18','08-19','08-20','08-21','08-22','08-23','08-24','08-25','08-26','08-27','08-28','08-29'],
           name:"日期"
       },
       yAxis: {
         min:0,
         max:10,
           type: 'value',
           name:"查询次数" 
       },
       series: [
           {
             type:'line',
             lineStyle: {
               color: "#FF6A00",
             },
             data:[1, 2, 3, 4, 3, 2, 2, 3, 4, 3, 2, 1, 3, 4, 2, 10],
           }
       ]
     });
    }

上效果图