vue 项目中引用了 echrts 大数据量面积图

一.我本人也是刚开始使用vue，但是在项目中有一个用到大数据量面积图，分享一下我的经验，如有不到之处，还望指出。

 1.首先需要在vue项目中引入 echarts ，引入的方法有很多 在这里就讲一个方式，其他的大家可以在其他大牛的博客里面寻找

       1.1 . 安装Echats

               

npm install echarts --save

       1.2  项目main.js中引入Echarts

             // 引入Echarts           

 import Echarts from 'echarts'

 Vue.prototype.echarts = Echarts

 Vue.use(Echarts)

2.我们引入完Echarts 之后 就可以开始了，首先我们需要在echarts 去寻找 我们需要实现的大数据量面积图

        2.1  附一个官网地址  https://echarts.baidu.com/

3.  找到项目之后 我们就开始实现我们的功能

     3.1 首先我们看下我所实现面积图是带一个时间轴的 所以你需要自己去写一个时间选择器功能我所使用的是element-ui的ui控件

       

     3.2 然后我们需要在页面刚加载的时候渲染我们所要展示的数据

mounted() {

//我的需求是进来只加载今天的时间  你们可以自己定义你们需要的时间

var day = new Date();

day.setTime(day.getTime());

var time =

day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();

//因为有两个值 所以需要push 两次    dateValue 是我定义的在data数据中获取时间选择器的值 是一个数组 一个开始日期一个结束日期

//因为 我的是当天的日期 所以 我就 需要push两个同样的日期  你们这里就push 你们所需要的日期就好了

this.dateValue.push(time);

this.dateValue.push(time);

//这里是把 time 给用 ‘-’ 给分割了一下 放到了  这个 this.dayArray 数组中 ，这个也是在data数据中定义的  这个是 我们画面积图需要用到的初始日期  至于为什么要分割一下  放到一个数组里面  你们可以看下 官网的 实例 是给的 这样的一个初始的数组，所以我也设置一个这样的数组 来传值

this.dayArray = time.split(/[\s:-]/);

// 这一步就是开始画我们的 大数据量面积图了

this.drawLine();

}

    3.3 this.drawLine(); 这个方法  我们可以直接复制官网的例子中的   各个API 我就不再详细的去解释了 大家可以上官网查看

    

drawLine() {

           // 基于准备好的dom，初始化echarts实例

           let myChart = this.$echarts.init(document.getElementById("myChart"));

          //初始日期和data

          var base = +new Date(this.dayArray);

          var oneDay = 24 * 3600 * 1000;

          var date = [];

          //这个data 数据是模拟的  你们可以换成 你们的真实的数据 （注意）就不要写在这个循环里面了

          var data = [Math.random() * 300];

         for (var i = 1; i < this.dayLength + 2; i++) {

              var now = new Date((base += oneDay - 1));

             date.push(

                   [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")

            );

            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));

          }

          // 绘制图表

        // option将要设置以下字段

        myChart.setOption({

        tooltip: {

                      trigger: "axis",

                       position: function(pt) {

                                      return [pt[0], "10%"];

                       }

        },

       title: {

                left: "center",

                text: "大数据量面积图"

             },

       toolbox: {

                     feature: {

                                 dataZoom: {

                                                   yAxisIndex: "none"

                                                   },

                    restore: {},

                   saveAsImage: {}

                  }

     },

     xAxis: {

                  type: "category",

                  boundaryGap: false,

                 data: date

   },

   yAxis: {

               type: "value",

                boundaryGap: [0, "100%"]

 },

   dataZoom: [

                      {

                        type: "inside",

                        start: 0,

                        end: 100

                       },

                       {

                         start: 0,

                         end: 10,

                         handleIcon:

                                            "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-                                                  4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-                                                       1.4h6.6V19.6z",

                         handleSize: "80%",

                         handleStyle: {

                                                color: "#fff",

                                                 shadowBlur: 3,

                                                 shadowColor: "rgba(0, 0, 0, 0.6)",

                                                 shadowOffsetX: 2,

                                                  shadowOffsetY: 2

                                              }

                            }

   ],

series: [

{

name: "模拟数据",

type: "line",

smooth: true,

symbol: "none",

sampling: "average",

itemStyle: { normal: { areaStyle: { type: "default" } } },

data: data

}

]

});

//让echarts 自适应 窗口

window.onresize = myChart.resize;

}

},

//然后用户可能随时改变这个日期  这个时候我们就需要利用vue 的 watch 

 

   //解释一下 这个 this.dayLength  是干嘛的  他是 计算你开始日期 到结束日期的 中间隔了多少天数  然后在 drawLine中去 循环出来这个 时间轴的 数组

 

这样就大工高成了 ，如果有不明白的小伙伴 可以私聊我 ，第一次写博客 不足之处请大家指出来  我方便修改 仅供参考 如果你有更好的 demo 可以共同进步