echart从0到1Apache ECharts
一个基于 JavaScript 的开源可视化图表库， 这里记录echart入门基础概念和api使用
安装
npm i -D echarts
// or
yarn add echarts
引入
import * as echarts from 'echarts'
// 安需引入
import { BarChart } from 'echarts
创建chart实例
const echart = ecahrts.init(element)
渲染
const options = {
title: { text: '标题名称' }，
// 图例
legend: {}，
// 提示器
tooltip: {},
// x轴
xAxis: {
// x轴分类,
data: ['type01', 'type02', 'type03']
},
// y轴
yAxis: {},
// 图形映射
series: [
{
name: 'number'，
// 图表类型
type: 'bar',
// 数据, 顺序与x轴类型一一对应
data: [10, 20, 30]
}
]
}
// 渲染
ecahrt.setOptions(options)
图表基础组成
- 图表容器 element
- 图例 legend
- 提示工具 tooltip
- 数据集合 data
- 图例 chart
- 坐标系/坐标轴 axis
- 事件/行为 event/action
数据集合、转换
除了通过独立配置每一图表数据， echart 提供 dataset 集中管理实例内的数据集合。
集合模式
数据的映射管理与集合的排列顺序挂钩
{
dataset: {
// 数据集合
source: [
// 第一列为 x轴分类
['product', '2015', '2016', '2017'],
// 以下为对应数据集合
['Matcha Latte', 43.3, 85.8, 93.7],
// 每条数据与x类型字段一一对应, 等价: { product: 'Matcha Latte', '2015': 43.3, '2016': '85.8', '2017': 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]
]
},
xAxis: { type: 'category' },
yAxis: {},
// 每条图表声明对应一条source数据
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
[图片上传失败...(image-57899-1633271812626)]
对象模式
数据的映射关系通过字段挂钩
dataset: {
// x 轴字段顺序
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' }]
修改行列映射
通过设置seriesLayoutBy 修改行或列的映射模式, 默认为: column 既 serices 的每一条对应数据内的一列
row 模式与 column 相反, serices 的每一条对应数据内的一行
option = {
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: [
{ type: 'category', gridIndex: 0 },
{ type: 'category', gridIndex: 1 }
],
yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
grid: [{ bottom: '55%' }, { top: '55%' }],
series: [
// row 模式, 对应数据行数量
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' },
// column 模式, 对应数据列数量
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
]
};
命名维度
可以使用dimensions 为各维度数据指定名称, 方便在后续配置中指定具体的使用维度
dataset: [
dimensions: [
// 方式1: 纯字符，将被赋值给name属性
'product'
// 方式2：name属性
{ name: 'product' }
// 方式3：指定具体的维度类型, 优先级低于series
{ name: 'product', type: 'ordinal' }
]
]
type类型:
number数字ordinal字符time日期floatint
指定数据映射
通过encode 指定轴对应展示的数据
{
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea']
]
},
xAxis: {},
yAxis: { type: 'category' },
series: [
{
type: 'bar',
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
}
]
}
坐标轴
不同的图表使用不同的坐标系，对应的设置项也不同。
一般分为:
- 直角坐标系[柱状图],
xAxisyAxis - 极坐标系[饼图],
radiusAxisangleAxis - 雷达图坐标系[雷达图],
radar - 平行坐标系[],
parallelparallelAxis - 单一轴/线性
singleAxis - 地理坐标系[地图],
geo - 日历坐标系[日历组件]
calendar
坐标系一般配置项
{
// 直角坐标系
xAxis: {
// 坐标轴类型
type: 'category',
// 坐标轴标题
name: 'xxx',
// 坐标轴位置
position: 'top',
// 多个坐标轴之间的偏移量
offset: 10,
// 轴线
axisLine: {
// 线样式
lineStyle: { type: 'deshed' }
},
// 刻度
axisTick: {
// 线样式
lineStyle: { type: 'deshed' }
},
// 刻度标签
axisLable: {
// 显示格式
formatter: '{value}元'
}
}
}
样式/ 主题
全局调色
{
// 图表将根据排列顺序获取配色
color: [
'red',
'orange',
...
],
dataset: [
['product', '2014', '2015', '2016'],
[
'毛毯',
// red
10,
// 'orange'
20,
....
]
]
}
独立调色
series: [
{
type: 'bar',
color: [ 'red', 'orange' ],
data: ['毛毯', 10, 20, 30] // 缺失的配色将使用默认色
}
]
// 全局调色优先级高于独立调色
[图片上传失败...(image-30c84b-1633271812626)]
细分样式
不同组件或图表存在细分的样式配置属性, 具体配置参考: 配置文档
{
xAixs: {
// 标签样式
axisLabel: {
color: '#fff',
fontSize: 14
},
// 隐藏刻度线
axisTick: false
},
series: [
type: 'bar',
color: 'orange',
// 显示柱状图背景
showBackground: true
]
}
高亮样式
emphasis 鼠标滑入高亮样式
{
series: {
emphasis: { .... }
}
}
使用内置主题
var chart = echarts.init(dom, 'dark');
导入主题
// json 主题
$.getJSON('主题文件地址.json', function(themeJSON) {
// 注册主题
echarts.registerTheme('主题名称', JSON.parse(themeJSON));
// 使用主题
var chart = echarts.init(dom, '主题名称');
});
// umd 主题
import '../主题文件.js'
// 使用主题
var chart = echarts.init(dom, '主题名称');
交互| 事件、行为
绑定事件
cosnt chart = echarts.init(...)
chart.on('click', (params) => {....})
区分触发区域
myChart.on('click', function(params) {
if (params.componentType === 'markPoint') {
// 点击到了 markPoint 上
if (params.seriesIndex === 5) {
// 点击到了 index 为 5 的 series 的 markPoint 上。
}
} else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// 点击到了 graph 的 edge（边）上。
} else {
// 点击到了 graph 的 node（节点）上。
}
}
}
});
指定可触发区域
// 单一区域
const query = 'series.line',
// or
// 多区域
const query = {
${mainType}Index: number // 组件 index
${mainType}Name: string // 组件 name
${mainType}Id: string // 组件 id
dataIndex: number // 数据项 index
name: string // 数据项 name
dataType: string // 数据项 type，如关系图中的 'node', 'edge'
element: string // 自定义系列中的 el 的 name
}
// 绑定区域
chart.on('click', query, function() {});
主动触发事件
chart.dispatchActon({
type: 'hightlight'， // 事件类型
seriesIndex: 0, // 触发图表
dataIndex: currentIndex // 数据项
})
富文本标签
[图片上传失败...(image-373852-1633271812626)]
提供多样的自定义文本展示
{
series: [
...,
data: [
{
value: [10, 20, 30],
label: {
// 使用格式 {样式片段名称| 文本内容 }
formatter: [
'标题'，
'{textStyle| 文本内容 }'
].join('\n')
}
}
]
],
// 定义富文本样式
rich:{
textStyle: {
fontFaily: 'siyuan',
fontSize: 14,
borderRadius: [4, 4, 0, 0],
align： 'center', // 定位
color: 'orange'
backgroundColor: { image: '../bg.jpg' } // 图片背景
}
}
}
ecahrts 常用API
- init 初始化创建实例
- disponse 销毁指定实例、或元素上挂载的实例
- use 注册组件
- registerTheme 注册主题
- registerMap 注册geo或map图表
echart实例常用API
- setOption 设置/更新图表
- dispose 注销实例
- clear 清空组件和图表
- reseize 设置图表尺寸, 不传值时默认填充整个容器
- on 绑定事件
- off 取消事件
- dispatchAction 主动触发事件
- showLoading 显示加载动画
- hideLoading 隐藏加载动画
- group 分组
