3、样式和数据集
2023-07-11 本文已影响0人
wqjcarnation
样式
最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 示例集合 中，可以通过切换深色模式，直接看到采用主题的效果。
ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：
var chart = echarts.init(dom, 'dark');
其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。
数据集
第一个例子中，表头列和数据列的数据分别设置，
数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。
chart.setOption({
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
});
或者也可以使用常见的“对象数组”的格式：
function initChart() {
let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
chart.setOption({
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [{product: 'Matcha Latte','2015': 43.3,'2016': 85.8,'2017': 93.7},
{product: 'Milk Tea','2015': 83.1,'2016': 73.4,'2017': 55.1},
{product: 'Cheese Cocoa','2015': 86.4,'2016': 65.2,'2017': 82.5},
{product: 'Walnut Brownie','2015': 72.4,'2016': 53.9,'2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
});
window.onresize = function() {
chart.resize();
};
}
数据到图形的映射
如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。
- 指定
数据集的列（column）还是行（row）映射为系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。 - 指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 series.encode 属性，以及 visualMap 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到
dataset.source中的第一列；三个柱图系列，一一对应到dataset.source中后面每一列。
下面详细解释这些映射的设定。
把数据集（ dataset ）的行或列 映射为系列(图)（series）
用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：
● 'column': 默认值。系列被安放到 dataset 的列上面。
● 'row': 系列被安放到 dataset 的行上面。
chart.setOption({
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
// 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴
{ type: 'category', gridIndex: 0 },//上方x 轴
{ type: 'category', gridIndex: 1 }//下方的x 轴
],
yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],//两个y轴
grid: [{ bottom: '60%' }, { top: '60%' }],//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
series: [
// 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{ type: 'line', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },//与下一行等价
{ type: 'line', seriesLayoutBy: 'row' },
{ type: 'line', seriesLayoutBy: 'row' },
// 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'column'},//与下一行等价
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
]
});
效果图
image.png
维度（ dimension ） ##
参看手册https://echarts.apache.org/zh/option.html#dataset.dimensions
