echarts(七)高级篇（数据集dataset、行列映射、维度映射、编码映射）

高级篇

数据集 dataset

• dataset 数据集组件是从ECharts 4 开始有的，用于数据管理。
• dataset 的优点：
  • 基于原始数据，设置映射关系，形成图表。
  • 数据和配置分离，便于单独管理。
  • 数据可以被多个系列或者组件复用。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等。
• 映射
  • 第1列映射类目轴
  • 第2列第1个系列
  • 第3列第2个系列

    //基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));
    //数据源
    const source=[
        ['大前端','学习人数','就业人数'],
        ['html',  30,       40],
        ['css',   20,       30],
        ['js',    40,       50],
    ]
    // 指定图表的配置项和数据
    const option = {
        tooltip:{},
        /*
        * dataset数据集
        *   source 数据源 []
        * */
        dataset:{
            source,
        },

        /*x轴
        *   type 轴的类型
        *       category 类目轴，离散型数据
        *       value 数值轴，连续性数据
        * */
        xAxis:{
            type:'category'
        },
        yAxis:{
            type:'value'
        },
        /*系列列表*/
        series:[
            {
                type:'bar',
            },
            {
                type:'bar',
            },
        ]

    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

行列映射

• seriesLayoutBy：column // 基于列映射
  
• seriesLayoutBy：row // 基于行映射
  

const mainDom = document.querySelector('#main');
const chart = echarts.init(mainDom);
// 数据源
const source = [
    ['大前端', '学习人数', '就业人数'],
    ['html', 30, 40],
    ['css', 20, 30],
    ['js', 40, 50],
]
const option = {
    tooltip:{},
    dataset: {
        source,
        // seriesLayoutBy: 'row'
    },
    xAxis: {
        // 类目轴
        type: 'category'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            seriesLayoutBy: 'row'
        },
        {
            type: 'bar',
            seriesLayoutBy: 'row'
        }
    ]
}
chart.setOption(option);

维度映射

• 数据集的维度指的就是每个系列的名称name。
• 维度映射作用：对数据的维度信息统一定义和管理。
• ECharts 默认会从 dataset.source 的第一行中获取维度信息。
• 但是，如果在dataset 里指定了 dimensions，那么 ECharts 不再会自动从 dataset.source 中获取维度信息。
• dimensions 中元素：
  • null：不为此处维度作定义
  • {type: ‘ordinal‘}：只定义维度类型，type 有以下几种类型
    • number：默认，表示普通数字
    • ordinal：离散型，一般文本使用这种类型，echarts 会自动判断此类型。
    • float：Float64Array 浮点型
    • int：Int32Array 整形
  • {name: ‘good’, type: ‘number‘}：维度名称、维度类型都有
  • ‘bad‘ ：只指定维度名称，等同于 {name: 'bad’}
• 如：
  • dimensions: [ null, {type: ‘ordinal’}, {name: ‘good’, type: ‘number’}, ‘bad’ ]

  const myChart = echarts.init(document.getElementById('main'));
    //数据源
    const source=[
        ['大前端','学习人数', '就业人数'],
        ['html',  20,   25],
        ['css',   10,   15],
        ['js',    30,   40]
    ];

    //维度映射 dimensions
    const dimensions=['大前端',{name:'学习人数'}, '就业人数'];

    // 指定图表的配置项和数据
    const option = {
        legend: {},
        tooltip: {},
        dataset: {source,dimensions},
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {
                type: 'bar',
            },
            {
                type: 'bar',
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

encode 编码映射

• encode 可以定义数据的哪个维度被编码成什么。
• 默认series 里第一个系列对应的就是数据源里的第二列数据。
• 如果我们想让series 里第一个系列映射数据源里的第三列，而且还不想改变数据源(数据源是公共资源)，应该怎么办呢？
  这就要用到编码映射。
• encode 常见属性：
  • tooltip：[‘product’, 'score‘]，提示信息 。
  • seriesName：[1, 3]，系列名。
  • x：x 轴的数据映射。
  • y：y 轴的数据映射。

const myChart = echarts.init(document.getElementById('main'));
//维度映射
const dimensions=['大前端','学习人数', '就业人数'];
//数据源
const source =[
    ['html',  20,   25],
    ['css',   10,   15],
    ['js',    30,   40],
];

// 指定图表的配置项和数据
const option = {
    tooltip:{},
    dataset: {dimensions,source},
    /*设置类目轴和数值轴*/
    xAxis:{type:'category'},
    yAxis:{type:'value'},
    /*encode 编码映射
    *   x x轴维度
    *   y y轴维度
    *   seriesName 系列名，n|[n]|[n,m,...]
    *   tooltip 提示信息，n|[n]|[n,m,...]
    * */
    series:{
        type:'bar',
        encode:{
            x:0,
            // y:1,
            y:'就业人数',
            seriesName:2,
            // tooltip:['学习人数',2]
        },
        itemStyle:{
            color:({dataIndex})=>{
                const arr=['#00acec','blue','green'];
                return arr[dataIndex];
            }
        }
    }
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);