这是我参与11月更文挑战的第25天,活动详情查看:2021最后一次更文挑战
大数据的折线图,可以鼠标滚动的折线图。主要是使用了echarts的里面的dataZoom
一个内置型数据区域缩放组件。可以实现在坐标轴里面进行滑动拖拽进行数据的区域平移;同时也可以鼠标在坐标系里面进行滚轮的滑动,来实现图表的缩放。
使用xAxisIndex
和yAxisIndex
来控制多个x轴和y轴的里面的数据。根据官网的提示,最好不要使用默认值,最好是使用自定义的设置来进行操作。
option: {
yAxis: [
{...}, // 第一个 yAxis
{...}, // 第二个 yAxis
{...}, // 第三个 yAxis
{...} // 第四个 yAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
},
{ // 第二个 dataZoom 组件
yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis
}
]
}
复制代码
使用数据窗口的时候需要我们通过start和end
来控制窗口的起始位置,来进行自定义数据窗口的范围。使用的是百分比来做单位0~100
表示百分比例。
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
复制代码
完整的代码案例,也可以查看官网的案例代码,地址:echarts.apache.org/examples/zh…
折线图--带面积的折线图叠加堆积图与非叠加。设置折线的面积图,而且还是渐变色的背景色。
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;
option = {
title: {
text: 'Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
复制代码
非叠加
实现以上效果,只需要把series里面的stack属性即可
数据堆叠,同个类目轴上系列配置相同的stack
值后,后一个系列的值会在前一个系列的值上相加。