这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

前端可视化在数据统计应用方面十分广阔，Echarts是基于cancas标签制作的可视化库，这次笔记整理在一些框架(Vue、React)的使用，只讲了一些基本内容，如果内容有错误，可能是版本问题(前端更迭速度太快了)，请大家查阅Echarts文档:Apache ECharts，这里表示抱歉

1. Echarts 的基本使用

1.1 Echarts 的介绍

Echarts 是一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观、交互丰富，可高度个性化定制的数据可视化图表。

官方网站：Apache ECharts

1.2 Echarts 的特点

流数据的支持

流数据的动态渲染
增量渲染技术

移动端优化

跨平台使用

绚丽的特效

三维可视化

......

1.3 Echarts 的基本使用

<script src="/js/echarts.min.js"></script>
<body>
  <!-- 2.准备一个呈现图标的盒子 -->
  <div style="width: 600px;height:400px"></div>
  <script>
    // 3.初始化 echarts 实例对象
    // 参数，dom，决定图表最终呈现的位置
    let mCharts = echarts.init(document.querySelector('div'))
    // 4.准备配置项
    let option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 80, 90]
        }
      ]
    }
    // 5.将配置向设置给 echarts 实例对象
    mCharts.setOption(option)
  </script>
</body>

除了配置项会变化之外，其他代码都是固定的。

配置项可以参考官方文档和实例：echarts.apache.org/zh/option.h…

1.3.1 相框配置讲解

xAxis：直角坐标系中的 x 轴

yAxis：直角坐标系中的 y 轴

series：系列列表。每个系列通过 type 决定自己的图标类型。

具体查询官方文档

1.4 Echarts 常见图标

1.4.1 柱状图

Echarts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

x 轴数据

数组1: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

y 轴数据

数组2: [88, 92, 63, 77, 94, 80, 72, 86]

图标类型

在 series 下设置 type: bar

1.4.1.1 常见效果

# 标记：最大值、最小值、平均值

markPoint、markLine

let option = {
    xAxis: {/**/},
    yAxis: {/**/},
    series: [
        {
            data: [],
            type: 'bar',
            markPoint: {
                data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
            },
            markLine: {
                data: [{ type: 'average', name: '平均值' }]
            }
        }
    ]
}

# 显示：数值显示、柱宽度、横向柱状图

label、barWidth、更改 x 轴和 y 轴的角色

let option = {
    /**/
    xAxis: {
        type:'value',
    },
    yAxis: {
        type: 'category',
        data: []
    },
    series: [{
        data: [],
        label: {
            show: true,
            rotate: 60,
            position: 'top'
        }
    }]
    /**/
}

1.4.1.2 通用配置

通用配置指的就是任何图标都能使用的配置

# 标题 title

文字样式

textStyle

标题边框

borderWidth、borderColor、borderRadius

标题位置

left、top、right、ottom

let option = {
    title: {
        text: '标题',
        textStyle: {
            color: 'red'
        },
        boderWidth: 5,
        boderColor: 'red',
        boderRadius: 5
    }
}

# 提示框 tooltip

tooltip：提示框组件，用于配置鼠标滑过或点击图标时的显示框

触发类型：trigger

item、axis

触发时机：triggerOn

mouseover、click

格式化：formatter

字符串模板、回调函数

let option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mouseover',
        formatter: (val) => {
            return `${val[0].axisValue}的成绩是${val[0].data}`
        }
    }
}

# 工具栏 toolbox

tooltip: ECharts 提供的工具栏。内只有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具

工具栏显示按钮 feature

saveAsImage、dataView、restore、dataZoom、magicType

let option = {
    toolbox: {
        feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            retore: {}, // 重置功能
            dataZoom: {}, // 区域缩放
            magicType: { // 动态图表切换
                type: ['bar', 'line']
            }
        }
    }   
}

# 图例：legend

legend：用于筛选系列，需要和 series 配合使用

let option = {
    legend: {
        data: ['数学', '语文'] // 一定要和 series 中的 name 对应
    },
    series: [
        { name:'数学', type: 'bar', data: [] },
        { name:'语文', type: 'bar', data: [] }
    ]
}

1.4.2 折线图

ECharts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

x 轴数据

数组1: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

y 轴数据

数组2: [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

图标类型

在 series 下设置 type: line

1.4.2.1 常见效果

# 标记：最大值、最小值、平均值、标注区间

最大值、最小值、平均值：markPoint、markPoint、markLine、markArea

let option = {
    series: [
        {
            data: [],
            type: 'bar',
            // 标注 最大值、最小值
            markPoint: {
                data: [
                    { type: 'max' },
                    { type: 'min' }
                ]
            },
            // 标注 平均值
            markLine: {
                data: [{ type: 'average' }]
            },
            // 标注 区间
            markArewa: {
                data: [
                    // 数组，表示多个
                    [
                        // 从 1月 到 2月
                        { xAxis: '1月' },
                        { xAxis: '2月' }
                    ],
                    [                        // 从 7月 到 8月                        { xAxis: '7月' },                        { xAxis: '8月' }                    ]
                ]
            }
        }
    ]
}

# 线条控制：平滑、风格

smooth、lineStyle: { type: 'solid' /* solid、dashed、dotted */ }

# 填充风格

areaStyle

# 紧挨边缘

boundaryGap(设置给类目周)

# 缩放、0、值比例

scale(设置给数轴)

# 堆叠图

stack：第二个图形堆叠到第一个图形上

let option = {
    xAxis: {
        type: 'category',
        data: [],
        boundaryGap: false // 有个缺点，那就是数轴数值大但差值过小的时候，显示成直线，需设置数轴的 scale 属性
    },
    yAxix: {
        type: 'value',
        scale: true
    },
    series: [
        {
            type: 'line',
            data: yDataArr,
            stack: 'all',
            areaStyle: {}
        },
        {
            type: 'line',
            data: yDataArr1,
            // 堆叠图设置
            stack: 'all',
            areaStyle: {}
        }
    ]
}

1.4.3 散点图

ECharts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

x 轴数据和 y 轴数据：二维数组

数组1： [ [身高1, 体重1], [身高2, 体重2], [身高3, 体重3]... ]

图标类型

在 series 下设置 type: scatter

xAxis 和 yAxis 的 type 都要设置为 value

调整

将坐标轴都设置为脱离 0 值比例，scale

1.4.3.1 常见效果

气泡图效果

散点的大小不同： symbolSize: (arg) => { console.log(arg) }

散点的颜色不同: itemStyle: { color: (arg) => { console.log(arg) } }

涟漪动画效果

type：effectScatter

showEffectOn: 'emphasis'

rippleEffect: { scale: 2 }

let option = {
    xAxis: {
        type: 'value' // 设置成 value
    },
    yAxis: {
        type: 'value' // 设置成 value
    }
    series: [
        {
            // type: 'scatter', // 气泡图
            type: 'effectScatter', // 携带涟漪效果的气泡图
            showEffectOn: 'emphasis', // 触发涟漪的时机： 'rednder': 渲染dom元素后加载, 'emphasis': 鼠标经过后加载
            rippleEffect: {
                scale: 2, // 渲染涟漪的半径
            },
            data: [[170, 60],[180, 80]],
            symbolSize: (arg) => { // 气泡大小
                let h = arg[0] / 100
                let w = arg[1]
                let bmi = w / h / h
                if(bmi >= 28) {
                    return 20
                }
                return 5
            },
            itemStyle: { // 样式
                color: (arg) => {
                    let h = arg.data[0] / 100
                    let w = arg.data[1]
                    let bmi = w / h / h
                    if(bmi >= 28) {
                        return 'red'
                    }
                    return 'blue'
                }
            }
        }
    ]
}

1.4.3.2 通用配置

# 网格 grid

grid 是用来控制直角坐标系(柱状图、折线图、散点图)的布局和大小

x 轴和 y 轴就是在 grid 的基础上进行绘制的。

显示 grid

show

grid 的边框

boderWidth、borderColor

grid 的位置和大小

left、top、right、bottom、weight、height

# 坐标轴 axis

坐标轴分为 x轴和 y轴

1 个 grid 中最多有两种位置的 x轴和 y轴

坐标轴类型 type

value：数值轴，自动会从目标数据中读取数据

category：类目周，该类型必须通过 data 设置类目数据

显示位置 position

xAxis：可取值为 top 或者 bottom

yAxis：可取值为 left 或者 right

# 区域缩放 dataZoom

dataZoom 用于区域缩放，对数据范围过滤，x 轴和 y轴都可以拥有

dataZoom 是一个数组，意味着可以配置多个区域缩放器

类型 type

slider：滑块

inside：内置，依靠鼠标滚轮或者双指缩放

指明产生作用的轴

xAxisIndex：设置缩放组件控制的是哪个 x 轴，一般写 0 即可

yAxisIndex：设置缩放组件控制的是哪个 y 轴，一般写 0 即可

指明初始状态的缩放情况

start：数据窗口范围的起始百分比

end：数据窗口范围的结束百分比

let option = {
    dataZoom: [
        { type: 'slider', xAxisIndex: 0 },
        { type: 'slider', yAxisIndex: 0, start: 0, end: 80 }
    ],
    gird: {
        show: true,
        boderWidth: 10,
        boderColor: 'red',
        left: 120,
        top: 120
    },
    xAxis: {
        type: 'category',
        data: [],
        position: 'top'
    },
    yAxis: {
        type: 'value',
        position: 'right'
    }
}

1.4.4 饼图

ECharts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

数据准备

[{ name: '京东', value: 11231 }, { name: '淘宝', value: 22673 }]

图标类型

在 series 下设置 type: pie

1.4.4.1 常见效果

# 显示数值

label、true

# 圆环

设置两个半径 radius: ['50%', '75%']

# 南丁格尔图

roseType: 'radius'

# 选中效果

选中模式 selectedMode: 'single' // 'multiple'

let pieData = [{
        name: '淘宝',
        value: 11231
    }, {
        name: '京东',
        value: 54132
    }
]
let option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'pie',
            data: pieData,
            label: {
                show: true,
                formatter: (arg) => {
                    return `${arg.name}_${arg.value}元_${arg.percent}%`
                }
            },
            // radius: 20, // 半径
            // radius: '20%' // 百分比参照的是宽度和高度较小的那一部分的一半来进行百分比设置
            // radius: ['50%', '75%'] // 同心圆
            roseType: 'radius', // 南丁格尔图,
            // selectMode: 'single', // 选中的效果，能够将选中的区域偏离原点一小段距离
            selectMode: 'multiple', // 可以选择多个偏离原点的饼
            selectedOffset: 30 // 偏离远原点的距离
        }
    ]
}

1.4.5 地图

使用方式

百度地图 API

需要申请百度地图 ak

矢量地图

需要准备矢量地图数据

ECharts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

准备中国的矢量地图 json 文件，放到 json/map/ 的目录下

china.json

使用 Ajax 获取 china.json

$.get('json/map/china.json', (chinaJson) => {})

在回调函数中王 echarts 全局对象注册地图的 json 数据

echarts.registerMap('chinaMap', chinaJson)

在 geo 下设置

type: 'map', map: 'chinaMap'

1.4.5.1 常用配置

# 缩放拖动

geo: { roam: true }

# 名称显示

geo: { label: { show: true } }

# 初始化缩放比例

geo: { zoom: 1 // 默认为1 }

# 地图中心点

geo: { center: [87, 65] }

1.4.5.2 常见效果

显示某个区域
1. 加载该区域的矢量地图区域
2. 通过 registerMap 注册到 echarts 全局对象中
3. 指明 geo 配置下的 type 的 map 属性
4. 通过 zoom 放大该区域
5. 通过 center 定位中心点
不同城市颜色不同

显示基本的中国地图
城市的空气质量数据设置给 series
将 series 下的数据和 geo 管理起来（ geoIndex: 0, type: 'map' ）
结合 visualMap 配合使用（ min、max、inRange、calculable ）

地图和散点图结合

给 series 下增加新的对象
准备好散点数据，设置给新对象的 data
配置新对象的 type（ type：'effectScatter' ）
让散点图使用地图坐标系统

let airData = [
    { name: '北京', value: 39.91 },
    { name: '北京', value: 39.91 }
]
let scatterData: [
    { value: [117, 31] } // 显示散点图的位置坐标
]
$.get('../json/map/china.json', (ret) => {
    echarts.registerMap('chinaMap', ret)
    
    let option = {
        geo: {
            type: 'map',
            map: 'chinaMap', // chinaMap 与 registerMap 中的一致
            roam: true, // 允许地图缩放和拖动
            label: {
                show: true
            },
            zoom: 2, // 设置初始化比例
            center: [87, 43] // 设置中心点坐标
        },
        series: [
            {
                data: airData,
                geoIndex: 0,
                type: 'map'
            },
            {
                data: scatterData,
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    scale: 10 // 设置涟漪动画的半径
                }
            }
        ],
        visualMap: {
            min: 0,
            max: 300,
            inRange: {
                color: ['white', 'red']
            },
            calculable: true
        }
    }
})

1.4.6 雷达图

Echarts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

定义各个维度的最大值

indicator: [ { name: '易用性', max: 100 }, ... ]

准备具体产品的数据

data: [ { name: '华为手机', value: [80, 90, 80, 82, 90] }, .... ]

1.4.6.1 常用配置

# 显示数值

label

# 区域面积

areaStyle

# 绘制类型

shape

let dataMax = [
    { name: '易用性', max: 100 },
    { name: '易用性', max: 100 },
    { name: '易用性', max: 100 },
    { name: '易用性', max: 100 },
    { name: '易用性', max: 100 },
    { name: '易用性', max: 100 },
]
let option = {
    radar: { // 配置雷达图
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon' // 配置雷达图最外层的图形，多边形，还有 'circle' 圆形
    },
    series: [
        {
            type: 'radar', // 此图表是一个雷达图
            label: { // 设置标签样式
                show: true
            },
            areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积区域
            data: [
                {
                    name: '华为手机1',
                    value: [80, 90, 82, 82, 90]
                },
                {
                    name: '中兴手机1',
                    value: [70, 82, 75, 70, 78]
                }
            ]
        }
    ]
}

1.4.7 仪表盘图

ECharts 最基本的代码结构

引入 js 文件，DOM 容器，初始化对象，设置 option

准备数据，设置给 series 下的 data

data: [{ value: 97 }]

图标类型

在 series 下设置 type: 'gauge'

1.4.7.1 常见效果

# 数值范围

min, max

# 多个指针

data 中新增数据

# 多个指针颜色差异

itemStyle

let option = {
    series: [
        {
            type: 'gauge',
            data: [ // 每一个对象都代表一个指针
                {
                    value: 87,
                    itemStyle: { // 指针的样式
                        color: 'red'
                    }
                },
                {
                    value: 97,
                    itemStyle: {
                        color: 'blue'
                    }
                }
            ],
            min: 50, // min 和 max 控制仪表盘数值范围
            max: 120
        }
    ]
}

1.5 总结

bar：柱状图、line：折线图、scatter/effectScatter：散点图/涟漪三角图、pie：饼图、map：地图、radar：雷达图、gauge：仪表盘

2. ECharts 的高级使用

2.1 显示相关

2.1.1 主题

内置主题

Echarts 默认内置了两套主题：light、dark

在初始化对象方法 init 中可以指明。

let chart = echarts.init(dom, 'light')

自定义主题

在主题编辑器中编辑主题（主题编辑器 - Apache ECharts）
下载主题，是一个 js 文件
引入主题 js 文件

2.1.2 调色盘

调色盘是一组颜色，图形、系列会自动从其中选择颜色。

主题调色盘
全局调色盘

let option = {
    color: ['red', 'green', 'blue']
}

局部调色盘

let option = {
    series: [
        {
            type: 'bar',
            color: ['red', 'green', 'blue']
        }   
    ]
}

调色盘的作用遵循就近原则

线性渐变

let option = {
    series: [
        {
            name: '',
            type: bar,
            data: [],
            itemStyle: {
                color: {
                    type: 'linear', // 线性渐变
                    x: 0, // 
                    y: 0, // 起始坐标
                    x2: 0, //
                    y2: 1, // 结束坐标
                    colorStops: [
                        { offset: 0, color: 'red' }, // 0% 处的颜色为红色
                        { offset: 1, color: 'blue' } // 100% 处的颜色为蓝色
                    ]
                }
            }
        }
    ]
}

径向渐变

let option = {
    series: [
        {
            name: '',
            type: bar,
            data: [],
            itemStyle: {
                color: {
                    type: 'radial', // 径向渐变
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                        { offset: 0, color: 'red' },
                        { offset: 1, color: 'blue' }
                    ]
                }
            }
        }
    ]
}

2.1.3 样式

直接样式

itemStyle、textStyle、lineStyle、areaStyle、label

高亮样式

在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

注意：优先级高，会覆盖主题中、调色盘的效果

2.1.4 自适应

当浏览器的大小发生变化的时候，如果想让图标也能随之适配变化

监听窗口大小变化事件
在事件处理函数中调用 ECharts 实例对象的 resize 即可
```
window.onresize = () => {
    myChart.resize()
}
```

2.2 动画的使用

2.2.1 加载动画

ECharts 已经内置好了加载数据的动画，我们只需要在合适的实际显示或者隐藏即可。

显示加载动画

mCharts.showLoading()

隐藏加载动画

mCharts.hideLoading()

2.2.2 增量动画

实现方式 mCharts.setOption

所有数据的更新都通过 setOption 实现

不用考虑数据到底产生了那些变化

ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

2.2.3 动画配置

开启动画

animation: true （默认值为 true）

动画时长

animationDuration: 5000

缓动动画

animationEasing: 'bounceOut'

动画阈值

animationThreshold: 8

单种形式的元素数量大于这个阈值时会关闭动画

let c = echarts.init(document.querySelector('div'))
let xDataArr = []
let yDataArr = []
let option = {}
c.showLoading() // 获取到数据前加载动画
axios.get('/api/getData', (ret) => {
    c.hideLoading() // 获取到数据后关闭动画
    xDataArr = ret.xDataArr
    yDataArr = ret.yDataArr
    option = {
        animation: true, // 动画默认开启
        animationDuration: (arg) => { // 动画持续事件，可以直接写死，也可以写回调函数
            return arg * 1000
        },
        animationEasing: 'bounceOut', // 动画的样式
        animationThreshold: 8, // 数值超过 8 个，动画不加载
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    c.setOption(option)
})
let btn = document.querySelector('button')
btn.onclick = () => {
    xDataArr.push('gxj')
    yDataArr.push(100)
    // setOption 不会覆盖原来的option，而是将新增或者修改的配置项进行刷新
    c.setOption(option)
}

2.3 交互 API

全局 echarts 对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

echartsInstance 对象

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的

2.3.1 全局 echarts 对象

init

初始化 echarts 实例对象、使用主题

registerTheme

注册主题

只有注册过的主题，才能在 init 方法中使用该主题

registerMap

注册地图数据

$.get('/json/map.json', (ret) => {
    echarts.registerMap('china', ret)
})

geo 组件使用地图数据

let option = {
    geo: {
        type: 'map',
        map: 'china'
    }
}

connnect

一个页面中可以有多个独立的图表
每一个图表对应一个 echarts 对象
connect 可以实现多图关联，传入联动目标为 ECharts 实例对象，支持数组

保存图片的自动拼接、刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改等......

2.3.2 echartsInstance 对象

setOption 方法

设置或修改图表实例的配置项以及数据
多次调用 setOption 方法（合并新的配置和旧的配置、增量动画）

resize 方法

重新计算和绘制图表
一般和 window 对象的 resize 事件配合使用

window.onreize = myChart.resize

on/off 方法

绑定或解绑事件处理函数
鼠标事件

常见事件： 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等

ECharts 事件

常见事件： 'legendselectchanged'、'datazoom'、'pieselectchanged'、'mapselectchanged' 等

事件参数 arg：和事件相关的数据信息

dispatchAction 方法

触发某些行为
使用代码模拟用户的行为

mCharts.dispatchAction({
    type: 'hightlight', // 事件类型
    seriesIndex: 0, // 图表索引
    dataIndex: 1 // 图表中哪一项高亮
})

clear 方法

清空当前实例，会移除实例中所有的组件和图表
请空后可以再次 setOption 显示图表

dispose

销毁实例
销毁后实例无法再被使用

Echarts的基本使用 ｜ 青训营笔记

1. Echarts 的基本使用

1.1 Echarts 的介绍

1.2 Echarts 的特点

1.3 Echarts 的基本使用

1.3.1 相框配置讲解

1.4 Echarts 常见图标

1.4.1 柱状图

1.4.1.1 常见效果

# 标记：最大值、最小值、平均值

# 显示：数值显示、柱宽度、横向柱状图

1.4.1.2 通用配置

# 标题 title

# 提示框 tooltip

# 工具栏 toolbox

# 图例：legend

1.4.2 折线图

1.4.2.1 常见效果

# 标记：最大值、最小值、平均值、标注区间

# 线条控制：平滑、风格

# 填充风格

# 紧挨边缘

# 缩放、0、值比例

# 堆叠图

1.4.3 散点图

1.4.3.1 常见效果

1.4.3.2 通用配置

# 网格 grid

# 坐标轴 axis

# 区域缩放 dataZoom

1.4.4 饼图

1.4.4.1 常见效果

# 显示数值

# 圆环

# 南丁格尔图

# 选中效果

1.4.5 地图

1.4.5.1 常用配置

# 缩放拖动

# 名称显示

# 初始化缩放比例

# 地图中心点

1.4.5.2 常见效果

1.4.6 雷达图

1.4.6.1 常用配置

# 显示数值

# 区域面积

# 绘制类型

1.4.7 仪表盘图

1.4.7.1 常见效果

# 数值范围

# 多个指针

# 多个指针颜色差异

1.5 总结

2. ECharts 的高级使用

2.1 显示相关

2.1.1 主题

2.1.2 调色盘

2.1.3 样式

2.1.4 自适应

2.2 动画的使用

2.2.1 加载动画

2.2.2 增量动画

2.2.3 动画配置

2.3 交互 API

2.3.1 全局 echarts 对象

2.3.2 echartsInstance 对象

Echarts的基本使用｜青训营笔记