ECharts transform数据转换和dataZoom在项目中使用是数据可视化中非常重要的一部分,本文将会从以下几个方面来进行讲解:
- transform数据转换的基本概念及使用方法
- 示例说明transform数据转换的用法
- dataZoom使用方法及示例
1. transform数据转换的基本概念及使用方法
在ECharts中,数据转换是一种通过对数据进行计算、过滤和补全等操作,从而得到需要展示的数据形式的技术手段。而使用transform进行数据转换的方法,可以帮助我们完成更加复杂的数据展示效果。
option = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
encode: {
x: 'date',
y: 'open',
tooltip: ['open', 'close', 'lowest', 'highest']
},
dataset: {
source: [
{date: '2022/1/1', open: 100, close: 130, lowest: 80, highest: 134},
{date: '2022/1/2', open: 120, close: 150, lowest: 90, highest: 154},
{date: '2022/1/3', open: 140, close: 170, lowest: 110, highest: 173},
{date: '2022/1/4', open: 110, close: 140, lowest: 70, highest: 148},
{date: '2022/1/5', open: 130, close: 165, lowest: 105, highest: 170},
{date: '2022/1/6', open: 150, close: 190, lowest: 110, highest: 195}
]
},
transform: {
type: 'filter',
config: {
and: [
{dimension: 'date', '>=': '2022/1/2'},
{dimension: 'date', '<=': '2022/1/5'}
]
}
}
}
};
以上是ECharts官网提供的基本数据转换代码示例,使用transform进行数据转换,过滤掉不需要的数据。
transform具体参数含义:
- type:表示数据转换的类型,如:filter、sort、aggregate等。
- config:表示数据转换所需的配置信息。
2. 示例说明transform数据转换的用法
我们可以通过下面的示例演示数据转换的几种用法。
option = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
encode: {
x: 'date',
y: 'price'
},
dataset: {
source: [
{date: '1月1日', price: 128},
{date: '1月2日', price: 132},
{date: '1月3日', price: 151},
{date: '1月4日', price: 122},
{date: '1月5日', price: 152},
{date: '1月6日', price: 163},
{date: '1月7日', price: 159},
{date: '1月8日', price: 128},
{date: '1月9日', price: 114},
{date: '1月10日', price: 139},
{date: '1月11日', price: 178},
{date: '1月12日', price: 162},
{date: '1月13日', price: 145},
{date: '1月14日', price: 123},
{date: '1月15日', price: 137},
{date: '1月16日', price: 142},
{date: '1月17日', price: 128},
{date: '1月18日', price: 157},
{date: '1月19日', price: 168},
{date: '1月20日', price: 155}
]
},
transform: {
type: 'filter',
config: {
dimension: 'price',
'>': 140
}
}
}
};
以上示例使用了filter(过滤)的transform数据转换方法,在数据集中过滤出价格大于140的数据进行展示。
下面再给出一个transform数据转换的操作示例:
option = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
encode: {
x: 'date',
y: 'price'
},
dataset: {
source: [
{date: '1月1日', price: {value: 128, label: '偏高'}},
{date: '1月2日', price: {value: 132, label: '正常'}},
{date: '1月3日', price: {value: 151, label: '正常'}},
{date: '1月4日', price: {value: 122, label: '偏低'}},
{date: '1月5日', price: {value: 152, label: '正常'}},
{date: '1月6日', price: {value: 163, label: '偏高'}},
{date: '1月7日', price: {value: 159, label: '偏高'}},
{date: '1月8日', price: {value: 128, label: '偏高'}},
{date: '1月9日', price: {value: 114, label: '偏低'}},
{date: '1月10日', price: {value: 139, label: '正常'}},
{date: '1月11日', price: {value: 178, label: '偏高'}},
{date: '1月12日', price: {value: 162, label: '正常'}},
{date: '1月13日', price: {value: 145, label: '正常'}},
{date: '1月14日', price: {value: 123, label: '偏低'}},
{date: '1月15日', price: {value: 137, label: '正常'}},
{date: '1月16日', price: {value: 142, label: '正常'}},
{date: '1月17日', price: {value: 128, label: '偏高'}},
{date: '1月18日', price: {value: 157, label: '正常'}},
{date: '1月19日', price: {value: 168, label: '偏高'}},
{date: '1月20日', price: {value: 155, label: '正常'}}
]
},
transform: {
type: 'map',
config: {
from: 'price',
to: 'price.value'
}
}
}
};
以上示例使用了map(映射)方法,将二级结构体中的数据映射到一级结构体中的一个新属性中,方便后续的数据使用和展示。
3. dataZoom使用方法及示例
dataZoom是ECharts中展示和处理大量数据时非常有用的一种功能,可以通过缩放来展示某个区间内的数据,这对于大量数据展示非常有用。
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'1月1日', '1月2日', '1月3日', '1月4日', '1月5日',
'1月6日', '1月7日', '1月8日', '1月9日', '1月10日',
'1月11日', '1月12日', '1月13日', '1月14日', '1月15日',
'1月16日', '1月17日', '1月18日', '1月19日', '1月20日'
]
},
yAxis: {},
series: {
type: 'line',
encode: {
x: 'date',
y: 'price'
},
dataset: {
source: [
{date: '1月1日', price: {value: 128, label: '偏高'}},
{date: '1月2日', price: {value: 132, label: '正常'}},
{date: '1月3日', price: {value: 151, label: '正常'}},
{date: '1月4日', price: {value: 122, label: '偏低'}},
{date: '1月5日', price: {value: 152, label: '正常'}},
{date: '1月6日', price: {value: 163, label: '偏高'}},
{date: '1月7日', price: {value: 159, label: '偏高'}},
{date: '1月8日', price: {value: 128, label: '偏高'}},
{date: '1月9日', price: {value: 114, label: '偏低'}},
{date: '1月10日', price: {value: 139, label: '正常'}},
{date: '1月11日', price: {value: 178, label: '偏高'}},
{date: '1月12日', price: {value: 162, label: '正常'}},
{date: '1月13日', price: {value: 145, label: '正常'}},
{date: '1月14日', price: {value: 123, label: '偏低'}},
{date: '1月15日', price: {value: 137, label: '正常'}},
{date: '1月16日', price: {value: 142, label: '正常'}},
{date: '1月17日', price: {value: 128, label: '偏高'}},
{date: '1月18日', price: {value: 157, label: '正常'}},
{date: '1月19日', price: {value: 168, label: '偏高'}},
{date: '1月20日', price: {value: 155, label: '正常'}}
]
},
dataZoom: {
type: 'slider',
orient: 'vertical',
start: 0,
end: 100
}
}
};
以上代码示例,使用dataZoom中的slider类型,展示了下方图表区间内的所有数据,并提供了缩放功能,可以通过拖动滑块来缩放展示区间。
另一个dataZoom示例:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'1月1日', '1月2日', '1月3日', '1月4日', '1月5日',
'1月6日', '1月7日', '1月8日', '1月9日', '1月10日',
'1月11日', '1月12日', '1月13日', '1月14日', '1月15日',
'1月16日', '1月17日', '1月18日', '1月19日', '1月20日'
]
},
yAxis: {},
series: {
type: 'line',
encode: {
x: 'date',
y: 'price'
},
dataset: {
source: [
{date: '1月1日', price: 128},
{date: '1月2日', price: 132},
{date: '1月3日', price: 151},
{date: '1月4日', price: 122},
{date: '1月5日', price: 152},
{date: '1月6日', price: 163},
{date: '1月7日', price: 159},
{date: '1月8日', price: 128},
{date: '1月9日', price: 114},
{date: '1月10日', price: 139},
{date: '1月11日', price: 178},
{date: '1月12日', price: 162},
{date: '1月13日', price: 145},
{date: '1月14日', price: 123},
{date: '1月15日', price: 137},
{date: '1月16日', price: 142},
{date: '1月17日', price: 128},
{date: '1月18日', price: 157},
{date: '1月19日', price: 168},
{date: '1月20日', price: 155}
]
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}, {
start: 0,
end: 100,
top: '90%',
type: 'slider',
labelFormatter: '{value}%'
}]
}
};
以上代码示例,使用了ECharts中的两个数据缩放工具,一个是内置的inside,另一个是slider,用于缩放展示区间,并显示缩放比例。其中slider工具的位置并不在上下边缘,而是独立在下方,并配以特定样式。
以上就是ECharts transform数据转换和dataZoom在项目中使用的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ECharts transform数据转换和dataZoom在项目中使用 - Python技术站