一.我本人也是刚开始使用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 可以共同进步