Echarts 5 瞎入门指南-1

echarts 最初由百度团队开源
2018年初，捐赠给Apache基金会，成为ASF孵化级项目（ASF: Apache 软件基金会简写）
2021年1月28日，ECharts 5线上发布会举行

echarts有哪些特性：

丰富的可视化类型
多种数据格式无需转换直接使用
千万数据的前端展现
移动端优化
多渲染方案，跨平台使用
深度的交互式数据探索
动态数据
新版本-动态叙事：Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing）

安装

npm install echarts --save

全局引入

import * as echarts from 'echarts'  // 版本 >= 5.0

按需引入

    import * as echarts from 'echarts/core';
    import {BarChart, LinesChart} from 'echarts/charts'
    import { SVGRenderer } from 'echarts/renderers'
    import {
        DatasetComponent, 
        TooltipComponent, 
        GridComponent,
        LegendComponent,
    } from 'echarts/components'
  
  // 注册必须的组件   **该方法必须在echarts.init之前使用**
    echarts.use([DatasetComponent, TooltipComponent, GridComponent,  LegendComponent, BarChart, 
            LinesChart, SVGRenderer])

完整demo（以vue版本为例）

<template>
    <div ref="chart" class="chart"></div>
</template>

<script>
    import * as echarts from 'echarts' 
    let myChart = null,
         option = {
            dataset: {
               source: [
                    ['xName', '2019', '2020', '2021'],
                    ['touch', 43, 85, 93],
                    ['fish', 83, 73, 55],
                    ['very', 86, 65, 82],
                    ['happy', 72, 53, 39]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'line'},
                {type: 'bar'}
            ]
        }
        
    export default {
        methods: {
            init() {
                const dom = this.$refs.chart;
                //这里dark是自带的主题， 如有需要可以自定义设置并下载[链接](https://echarts.apache.org/zh/theme-builder.html)   
                myChart = echarts.init(dom, 'dark', {
                    render: 'svg', //渲染成SVG
                    locale: 'ZN',  //语言设置
                    //width: 800, //指定实例宽度 单位px  （默认取容器宽高）
                    //height: 600 //指定实例高度
                });

                myChart.setOption(option)
            }
        },
        mounted() {
            this.init();
            window.addEventListener('resize', () => {
                myChart && myChart.resize()
            })
        }
    }
</script>

<style scoped lang="less">
    .chart {
        width: 10rem;
        height: 6rem;
    }
</style>

效果图：

dataset 另一种常用写法

//dataset另一种常用写法 [{source: []}, {source: []}, {source: []}]  
    option = {
         dataset: [
             {
                  //维度-顺序
                 dimension: ['name', 'age', 'sex'], 
                 //数据源
                 source: [
                     ['庆帝', 60, '男'],
                     ['二皇子', 30, '男'],
                     ['太子', 28, '男'],
                     ['大宝', 36, '男'],
                     ['北齐女帝', 18, '女'],
                 ]
             }
         ],
         
         series: {
            type: 'bar',
            encode: { x: 'name', y: 'age' },   //指定x轴文字 和 y轴数值
            datasetIndex: 0,  //指定本系列使用哪个 dataset   dataset[0] 
        } 
    }

transform 数据转换

option = {
         dataset: [
             //datasetIndex = 0
             {
                  //维度-顺序
                 dimension: ['name', 'age', 'sex'], 
                 //数据源
                 source: [
                     ['庆帝', 60, '男'],
                     ['二皇子', 30, '男'],
                     ['太子', 28, '男'],
                     ['大宝', 36, '男'],
                     ['北齐女帝', 18, '女'],
                 ]
             },
             // 每个transform就是返回了一个新的source， 可能排序后的，也可能是筛选后的
             // 只要在series里指定需要哪个datasetIndex 就行了
             // 此时下面这个transform 返回的数据就是 datasetIndex = 1  
              {
                 transform: {
                     type: 'sort',  
                     config: {
                         dimension: 'age', //以年龄排序
                         order: 'desc',
                         print: true   //开发环境会console 打印报错
                     }
                 }
             }
         ],
         
         series: {
            type: 'bar',
            encode: { x: 'name', y: 'age' },   //指定x轴文字 和 y轴数值
            datasetIndex: 1,  //指定 dataset[1] 
        } 
    }

filter

    //把北齐女帝揪出来
    {
         transform: {
             type: 'filter',  
             config: { dimension: 'name', value: '北齐女帝' },
             print: true
         }
     }

也可以设置多重条件

    //可以设置多个过滤条件
    {
         transform: {
             type: 'filter',  
             config: { dimension: 'age',  '<': 20 }, // age < 20
             print: true
         }
     },
     {
         transform: {
             type: 'filter',  
             config: { dimension: 'age',  '>': 30, '<=': 60 }, //  30 < age <=60
             print: true
         }
     }

同时也支持逻辑运算符 and | or | not

     {
         transform: {
             type: 'filter',  
             config: { 
                 and: [
                     { dimension: 'name', value: '大宝'},
                     { dimension: 'age', '<': 50}  //找出年龄小于50的并且名字叫大宝的人
                 ]
             },
             print: true
         }
     }

不仅数字，还能比较字符串和日期

    dataset = [
        {
            source: [
                { name: '范闲', birthday: '3050-06-22'},
                { name: '二姨娘', birthday: '3030-10-10'},
            ]
        }，
        //筛选出 出生日期在3050年到3060年之间的
        {
            transform: {
                 type: 'filter',  
                 config: { 
                     dimension: 'birthday', 
                     '>': '3050-01', 
                     '<': '3060-12', 
                     parser: time,   //解析成时间撮再比较
                 }, 
                 print: true
             }
        }
    ]

海量数据场景

如在百万级数据量的场景下，就算数据使用二进制格式，也会有几十或上百兆，此时使用appendData 分片加载数据和增量渲染, 这种情况不支持dataset方式，只支持系列使用自己的 series.data 时使用 appendData。

    this.myChart.appendData({
        seriesIndex: 0,  //如多条线时series:[{}, {}, {}], 0就是往第一条线data 里 push数据
        data: ['...百万数据分片传输...']
    })

最后的轻语

瞎入门指南系列第一篇到此告一段落（我知道太长的大家都懒得看）

   `                          不要再问影子是谁了， 影子是郭宝坤                                 `