第一次接触大数据,用的echart。之前的echart都是画简单的饼图,数据量没那么大。这次的把大数据处理的一些办法,设置写一下。
第一个接触的是折线图,先上一个配置
<v-chart
ref="detailChart"
:option="detail"
:manual-update="true"
:autoresize="true"
class="echarts-mini"
@brushEnd="filterHandler"
/>
const config = {
title: {
text: "Power Spectrum Density",
left: "center",
},
xAxis: {
scale: true,
name: "Freq (Hz)",
},
yAxis: {},
dataZoom: [
{
type: "inside",
orient: "horizontal",
xAxisIndex: 0,
filterMode: "filter",
zoomOnMouseWheel: "ctrl",
moveOnMouseWheel: "shift",
},
{
type: "inside",
orient: "vertical",
yAxisIndex: 0,
filterMode: "none",
zoomOnMouseWheel: "alt",
moveOnMouseWheel: false,
},
{
type: "slider",
}
],
tooltip: {
trigger: "axis",
},
toolbox: {
right: "5%",
feature: {
saveAsImage: {
pixelRatio: 5,
},
dataZoom: {
yAxisIndex: 'none'
}
},
},
series: [
{
type: "line",
showSymbol: false,
sampling: "lttb",
lineStyle: {
width: 1,
},
emphasis: false,
data: [],
silent: true,
},
],
animation: false,
};
在网上也查了一下,首先是去掉动画,数据量大容易卡,animation: false
emphasis: false 鼠标悬浮线不加粗,加粗不好看;
sampling: "lttb",如果是type是line,可以使用这个属性
{
type: "slider",
}在datazoom中设置,滑动,关键
toolbox: {
right: "5%",
feature: {
saveAsImage: {
pixelRatio: 5,
},
dataZoom: {
yAxisIndex: 'none'
}
},
} 这里设置右上角的操作,比如选中、放大、重置等
@brushEnd 使用选择结束时间接收