echarts
- 图表工具
安装
npm install echarts --save基础
js
let option = {
// 全图默认背景
// backgroundColor: 'rgba(0,0,0,0)',
// 默认色板
color: [
"#ff7f50",
"#87cefa",
"#da70d6",
"#32cd32",
"#6495ed",
"#ff69b4",
"#ba55d3",
"#cd5c5c",
"#ffa500",
"#40e0d0",
"#1e90ff",
"#ff6347",
"#7b68ee",
"#00fa9a",
"#ffd700",
"#6699FF",
"#ff6666",
"#3cb371",
"#b8860b",
"#30e0e0",
],
// 图表标题
title: {
x: "left", // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: "top", // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#ccc", // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: "bolder",
color: "#333", // 主标题文字颜色
},
subtextStyle: {
color: "#aaa", // 副标题文字颜色
},
},
// 图例
legend: {
orient: "horizontal", // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: "center", // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: "top", // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#ccc", // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: "#333", // 图例文字颜色
},
},
// 值域
dataRange: {
orient: "vertical", // 布局方式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x: "left", // 水平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: "bottom", // 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#ccc", // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color: ["#1e90ff", "#f0ffff"], //颜色
//text:['高','低'], // 文本，默认为数值文本
textStyle: {
color: "#333", // 值域文字颜色
},
},
toolbox: {
orient: "horizontal", // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: "right", // 水平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: "top", // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
backgroundColor: "rgba(0,0,0,0)", // 工具箱背景颜色
borderColor: "#ccc", // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon: {}, // 自定义图片icon
featureTitle: {
mark: "辅助线开关",
markUndo: "删除辅助线",
markClear: "清空辅助线",
dataZoom: "区域缩放",
dataZoomReset: "区域缩放后退",
dataView: "数据视图",
lineChart: "折线图切换",
barChart: "柱形图切换",
restore: "还原",
saveAsImage: "保存为图片",
},
},
// 提示框
tooltip: {
trigger: "item", // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration: 0.4, // 动画变换时间，单位s
backgroundColor: "rgba(0,0,0,0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: "#333", // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: "#48b",
width: 2,
type: "solid",
},
shadowStyle: {
// 阴影指示器样式设置
width: "auto", // 阴影大小
color: "rgba(150,150,150,0.3)", // 阴影颜色
},
},
textStyle: {
color: "#fff",
},
},
// 区域缩放控制器
dataZoom: {
orient: "horizontal", // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: "rgba(0,0,0,0)", // 背景颜色
dataBackgroundColor: "#eee", // 数据背景颜色
fillerColor: "rgba(144,197,237,0.2)", // 填充颜色
handleColor: "rgba(70,130,180,0.8)", // 手柄颜色
},
// 网格
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: "rgba(0,0,0,0)",
borderWidth: 1,
borderColor: "#ccc",
},
// 类目轴
categoryAxis: {
position: "bottom", // 位置
nameLocation: "end", // 坐标轴名字位置，支持'start' | 'end'
boundaryGap: true, // 类目起始和结束两端空白策略
axisLine: {
// 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: "#48b",
width: 2,
type: "solid",
},
},
axisTick: {
// 坐标轴小标记
show: true, // 属性show控制显示与否，默认不显示
interval: "auto",
// onGap: null,
inside: false, // 控制小标记是否在grid里
length: 5, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: "#333",
width: 1,
},
},
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
show: true,
interval: "auto",
rotate: 0,
margin: 8,
// formatter: null,
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "#333",
},
},
splitLine: {
// 分隔线
show: true, // 默认显示，属性show控制显示与否
// onGap: null,
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: ["#ccc"],
width: 1,
type: "solid",
},
},
splitArea: {
// 分隔区域
show: false, // 默认不显示，属性show控制显示与否
// onGap: null,
areaStyle: {
// 属性areaStyle（详见areaStyle）控制区域样式
color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
},
},
},
// 数值型坐标轴默认参数
valueAxis: {
position: "left", // 位置
nameLocation: "end", // 坐标轴名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐标轴文字样式，默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
splitNumber: 5, // 分割段数，默认为5
axisLine: {
// 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: "#48b",
width: 2,
type: "solid",
},
},
axisTick: {
// 坐标轴小标记
show: false, // 属性show控制显示与否，默认不显示
inside: false, // 控制小标记是否在grid里
length: 5, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: "#333",
width: 1,
},
},
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// formatter: null,
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "#333",
},
},
splitLine: {
// 分隔线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: ["#ccc"],
width: 1,
type: "solid",
},
},
splitArea: {
// 分隔区域
show: false, // 默认不显示，属性show控制显示与否
areaStyle: {
// 属性areaStyle（详见areaStyle）控制区域样式
color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
},
},
},
polar: {
center: ["50%", "50%"], // 默认全局居中
radius: "75%",
startAngle: 90,
splitNumber: 5,
name: {
show: true,
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "#333",
},
},
axisLine: {
// 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: "#ccc",
width: 1,
type: "solid",
},
},
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
show: false,
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "#333",
},
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
},
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: "#ccc",
},
},
},
// 柱形图默认参数
bar: {
barMinHeight: 0, // 最小高度改为0
// barWidth: null, // 默认自适应
barGap: "30%", // 柱间距离，默认为柱形宽度的30%，可设固定值
barCategoryGap: "20%", // 类目间柱形距离，默认为类目间距的20%，可设固定值
itemStyle: {
normal: {
// color: '各异',
barBorderColor: "#fff", // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
emphasis: {
// color: '各异',
barBorderColor: "rgba(0,0,0,0)", // 柱条边线
barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
},
},
// 折线图默认参数
line: {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: "solid",
shadowColor: "rgba(0,0,0,0)", //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
emphasis: {
// color: 各异,
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
},
//smooth : false,
//symbol: null, // 拐点图形类型
symbolSize: 2, // 拐点图形大小
//symbolRotate : null, // 拐点图形旋转控制
showAllSymbol: false, // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},
// K线图默认参数
k: {
// barWidth : null // 默认自适应
// barMaxWidth : null // 默认自适应
itemStyle: {
normal: {
color: "#fff", // 阳线填充颜色
color0: "#00aa11", // 阴线填充颜色
lineStyle: {
width: 1,
color: "#ff3200", // 阳线边框颜色
color0: "#00aa11", // 阴线边框颜色
},
},
emphasis: {
// color: 各异,
// color0: 各异
},
},
},
// 散点图默认参数
scatter: {
//symbol: null, // 图形类型
symbolSize: 4, // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000, // 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
emphasis: {
// color: '各异'
label: {
show: false,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
},
},
// 雷达图默认参数
radar: {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
},
lineStyle: {
width: 2,
type: "solid",
},
},
emphasis: {
// color: 各异,
label: {
show: false,
},
},
},
//symbol: null, // 拐点图形类型
symbolSize: 2, // 可计算特性参数，空数据拖拽提示图形大小
//symbolRotate : null, // 图形旋转控制
},
// 饼图默认参数
pie: {
center: ["50%", "50%"], // 默认全局居中
radius: [0, "75%"],
clockWise: false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
// color: 各异,
borderColor: "#fff",
borderWidth: 1,
label: {
show: true,
position: "outer",
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: "solid",
},
},
},
emphasis: {
// color: 各异,
borderColor: "rgba(0,0,0,0)",
borderWidth: 1,
label: {
show: false,
// position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: false,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: "solid",
},
},
},
},
},
map: {
mapType: "china", // 各省的mapType暂时都用中文
mapLocation: {
x: "center",
y: "center",
// width // 自适应
// height // 自适应
},
showLegendSymbol: true, // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
itemStyle: {
normal: {
// color: 各异,
borderColor: "#fff",
borderWidth: 1,
areaStyle: {
color: "#ccc", //rgba(135,206,250,0.8)
},
label: {
show: false,
textStyle: {
color: "rgba(139,69,19,1)",
},
},
},
emphasis: {
// 也是选中样式
// color: 各异,
borderColor: "rgba(0,0,0,0)",
borderWidth: 1,
areaStyle: {
color: "rgba(255,215,0,0.8)",
},
label: {
show: false,
textStyle: {
color: "rgba(139,69,19,1)",
},
},
},
},
},
force: {
// 数据map到圆的半径的最小值和最大值
minRadius: 10,
maxRadius: 20,
density: 1.0,
attractiveness: 1.0,
// 初始化的随机大小位置
initSize: 300,
// 向心力因子，越大向心力越大
centripetal: 1,
// 冷却因子
coolDown: 0.99,
// 分类里如果有样式会覆盖节点默认样式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle: {
brushType: "both",
color: "#f08c2e",
strokeColor: "#5182ab",
},
linkStyle: {
strokeColor: "#5182ab",
},
},
emphasis: {
// color: 各异,
label: {
show: false,
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle: {},
linkStyle: {},
},
},
},
chord: {
radius: ["65%", "75%"],
center: ["50%", "50%"],
padding: 2,
sort: "none", // can be 'none', 'ascending', 'descending'
sortSub: "none", // can be 'none', 'ascending', 'descending'
startAngle: 90,
clockWise: false,
showScale: false,
showScaleText: false,
itemStyle: {
normal: {
label: {
show: true,
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {
width: 0,
color: "#000",
},
chordStyle: {
lineStyle: {
width: 1,
color: "#666",
},
},
},
emphasis: {
lineStyle: {
width: 0,
color: "#000",
},
chordStyle: {
lineStyle: {
width: 2,
color: "#333",
},
},
},
},
},
island: {
r: 15,
calculateStep: 0.1, // 滚轮可计算步长 0.1 = 10%
},
markPoint: {
symbol: "pin", // 标注类型
symbolSize: 10, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 标注旋转控制
itemStyle: {
normal: {
// color: 各异，
// borderColor: 各异, // 标注边线颜色，优先于color
borderWidth: 2, // 标注边线线宽，单位px，默认为1
label: {
show: true,
position: "inside", // 可选为'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
emphasis: {
// color: 各异
label: {
show: true,
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
},
},
},
markLine: {
// 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
symbol: ["circle", "arrow"],
// 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: [2, 4],
// 标线起始和结束的symbol旋转控制
//symbolRotate : null,
itemStyle: {
normal: {
// color: 各异, // 标线主色，线色，symbol主色
// borderColor: 随color, // 标线symbol边框颜色，优先于color
borderWidth: 2, // 标线symbol边框线宽，单位px，默认为2
label: {
show: false,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: "inside",
textStyle: {
// 默认使用全局文本样式，详见TEXTSTYLE
color: "#333",
},
},
lineStyle: {
// color: 随borderColor, // 主色，线色，优先级高于borderColor和color
// width: 随borderWidth, // 优先于borderWidth
type: "solid",
shadowColor: "rgba(0,0,0,0)", //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
emphasis: {
// color: 各异
label: {
show: false,
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {},
},
},
},
textStyle: {
decoration: "none",
fontFamily: "Arial, Verdana, sans-serif",
fontFamily2: "微软雅黑", // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
fontSize: 12,
fontStyle: "normal",
fontWeight: "normal",
},
// 默认标志图形类型列表
symbolList: [
"circle",
"rectangle",
"triangle",
"diamond",
"emptyCircle",
"emptyRectangle",
"emptyTriangle",
"emptyDiamond",
],
loadingText: "Loading...",
// 可计算特性配置，孤岛，提示颜色
calculable: false, // 默认关闭可计算特性
calculableColor: "rgba(255,165,0,0.6)", // 拖拽提示边框颜色
calculableHolderColor: "#ccc", // 可计算占位提示颜色
nameConnector: " & ",
valueConnector: " : ",
animation: true,
animationThreshold: 2500, // 动画元素阀值，产生的图形原素超过2500不出动画
addDataAnimation: true, // 动态数据接口是否开启动画效果
animationDuration: 2000,
animationEasing: "ExponentialOut", //BounceOut
};html
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>ECharts 5 新特性
动态叙事
- 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），时序性的图表，展现数据随着时间维度上的变化。
- 支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画
视觉设计
标签
- 标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解
时间轴
- 适于表达时间标签刻度的时间轴
- 标签的 formatter 支持了时间模版（例如 {yyyy}-{MM}-{dd}），并且可以为不同时间粒度的标签指定不同的 formatter，结合已有的富文本标签，可以定制出醒目而多样的时间效果
提示框
- 提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息
仪表盘
- 仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项
扇形圆角
- 饼图、旭日图、矩形树图的扇形圆角
交互能力
状态管理
- ECharts 4 中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者可以分别设置这两个状态的颜色，阴影等样式.
- ECharts 5 中，我们在原先的鼠标 hover 高亮的基础上，新增加了淡出其它非相关元素的效果，从而可以达到聚焦目标数据的目的
- 点击选中这个之前只有在饼图、地图等少数系列中才能开启的交互，开发者可以设置为单选或多选模式，并且通过监听 selectchanged 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样，选中的样式也可以在 select 中配置
性能提升
- ECharts 5 新支持了脏矩形渲染. canvas中。频繁变化的情况，脏矩形会降低性能。
实时时序数据的折线图性能优化
- 除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。
- Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s 内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。
- 数据量较大的情况下，建议升级Echarts 5.
开发体验
数据集
- 数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。
国际化
- ECharts 5 开始，动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包，通过类似挂载主题的方式，使用 registerLocale 函数挂载语言包对象，重新初始化后就完成了语言的切换
js
// import the lang object and set when init
echarts.registerLocale('DE', lang);
echarts.init(DomElement, null, {
locale: 'DE'
});ECharts 基础概念概览
echarts 实例
- 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。每个 echarts 实例独占一个 DOM 节点。
系列（series）
- 系列（series）是很常见的名词。
- 系列（series）是指：一组数值以及他们映射成的图。
- 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数
- 系列类型（series.type）就是图表类型。line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等
- 系列中有他所需要的数据（series.data）。系列的数据可从 dataset 中取
组件（component）
- echarts 中各种内容，被抽象为“组件”
- echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等
- 系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
用 option 描述图表
- 使用 option 来描述其对图表的各种需求。包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等
- option 表述了：数据、数据如何映射成图形、交互行为
js
// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
// option 每个属性是一类组件。
legend: {...},
grid: {...},
tooltip: {...},
toolbox: {...},
dataZoom: {...},
visualMap: {...},
// 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
xAxis: [
// 数组每项表示一个组件实例，用 type 描述“子类型”。
{type: 'category', ...},
{type: 'category', ...},
{type: 'value', ...}
],
yAxis: [{...}, {...}],
// 这里有多个系列，也是构成一个数组。
series: [
// 每个系列，也有 type 描述“子类型”，即“图表类型”。
{type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
{type: 'line', data: [2231, 1234, 552, ... ]},
{type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);
// series.data 是本系列的数据。而另一种描述方式，系列数据从 dataset 中取：
var option = {
dataset: {
source: [
[121, 'XX', 442, 43.11],
[663, 'ZZ', 311, 91.14],
[913, 'ZZ', 312, 92.12],
...
]
},
xAxis: {},
yAxis: {},
series: [
// 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
{type: 'bar', encode: {x: 1, y: 0}},
{type: 'bar', encode: {x: 1, y: 2}},
{type: 'scatter', encode: {x: 1, y: 3}},
...
]
};组件的定位
- 基于 top / right / down / left / width / height 绝对定位
- 类似于 CSS 的绝对定位（position: absolute）
- 绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
- 基于 echarts 容器高宽的百分比（例如 right: '20%' 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。
- left right width 是一组（横向）、top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了，width 会被自动算出。
- [中心半径定位]pie（饼图）、sunburst（旭日图）、polar（极坐标系）。依据 center（中心）、radius（半径）来决定位置。
坐标系
- echarts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等
- 一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
ECharts 中的样式简介
颜色主题（Theme）
- 'light' 和 'dark'。
js
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');- 自己编辑主题
js
// 假设主题名称是 "vintage" json文件
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON))
var chart = echarts.init(dom, 'vintage');
});
// js文件
// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');调色盘
- 调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。
js
option = {
// 全局调色盘。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此系列自己的调色盘。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
...
}, {
type: 'pie',
// 此系列自己的调色盘。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
- 直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
- 一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。
高亮的样式：emphasis
js
// ECharts5
var option = {
series: {
type: 'scatter',
// 普通样式。
itemStyle: {
// 点的颜色。
color: 'red'
},
label: {
show: true,
// 标签的文字。
formatter: 'This is a normal label.'
},
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
}
}
//ECharts4
var option = {
series: {
type: 'scatter',
itemStyle: {
// 普通样式。
normal: {
// 点的颜色。
color: 'red'
},
// 高亮样式。
emphasis: {
// 高亮时点的颜色。
color: 'blue'
}
},
label: {
// 普通样式。
normal: {
show: true,
// 标签的文字。
formatter: 'This is a normal label.'
},
// 高亮样式。
emphasis: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
}
}通过 visualMap 组件设定样式
- visualMap 组件 能指定数据到颜色、图形尺寸的映射规则，详见 数据的视觉映射。
异步数据加载和更新
js
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: data.categories
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data.data
}]
});
});
//显示一个空的直角坐标轴，然后获取数据后填入数据。
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});loading 动画
js
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});数据的动态更新
- 所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
使用 dataset 管理数据
- ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
- 能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。
- 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
- 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
- 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
js
option = {
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'}
]
}
option = {
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 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'}
]
};数据到图形的映射
- 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。
- 指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 series.encode 属性，以及 visualMap 组件（如果有需要映射颜色大小等视觉维度的话）来配置。
把数据集（ dataset ）的行或列映射为系列（series）
- 用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。
- 'column': 默认值。系列被安放到 dataset 的列上面。
- 'row': 系列被安放到 dataset 的行上面。
js
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: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}维度（dimension）
- 常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。
- 当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。
- 维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是维度名。
- 从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。
- 使用单独的 dataset.dimensions 或者 series.dimensions 来定义，这样可以同时指定维度名，和维度的类型（dimension type）
js
var option1 = {
dataset: {
dimensions: [
{name: 'score'},
// 可以简写为 string，表示维度名。
'amount',
// 可以在 type 中指定维度类型。
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
};
var option2 = {
dataset: {
source: [...]
},
series: {
type: 'line',
// 在系列中设置的 dimensions 会更优先采纳。
dimensions: [
null, // 可以设置为 null 表示不想设置维度名
'amount',
{name: 'product', type: 'ordinal'}
]
},
...
};维度类型（dimension type）可以取这些值：
- 'number': 默认，表示普通数据。
- 'ordinal': 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。
- 'time': 表示时间数据。设置成 'time' 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（axis.type 为 'time'）上，那么会被自动设置为 'time' 类型。时间类型的支持参见 data。
- 'float': 如果设置成 'float'，在存储时候会使用 TypedArray，对性能优化有好处。
- 'int': 如果设置成 'int'，在存储时候会使用 TypedArray，对性能优化有好处。
数据到图形的映射（ series.encode ）
js
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
}
]
};- series.encode 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 'x', 'y', 'tooltip' 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。
js
// 在任何坐标系和系列中，都支持：
encode: {
// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
tooltip: ['product', 'score']
// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
seriesName: [1, 3],
// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
itemId: 2,
// 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
itemName: 3
}
// 直角坐标系（grid/cartesian）特有的属性：
encode: {
// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
x: [1, 5, 'score'],
// 把“维度0”映射到 Y 轴。
y: 0
}
// 单轴（singleAxis）特有的属性：
encode: {
single: 3
}
// 极坐标系（polar）特有的属性：
encode: {
radius: 3,
angle: 2
}
// 地理坐标系（geo）特有的属性：
encode: {
lng: 3,
lat: 2
}
// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
value: 3
}视觉通道（颜色、尺寸等）的映射
- 使用 visualMap 组件进行视觉通道的映射
默认的 encode
- series.encode 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，会采用一些默认的映射规则。
- 在坐标系中（如直角坐标系、极坐标系等）
- 如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。
- 如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。
- 如果没有坐标系（如饼图） 取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。
数据的各种格式
js
//常见为json
//特殊为object，object不支持 seriesLayoutBy
dataset: [{
// 按行的 key-value 形式（对象数组），这是个比较常见的格式。
source: [
{product: 'Matcha Latte', count: 823, score: 95.8},
{product: 'Milk Tea', count: 235, score: 81.4},
{product: 'Cheese Cocoa', count: 1042, score: 91.2},
{product: 'Walnut Brownie', count: 988, score: 76.9}
]
}, {
// 按列的 key-value 形式。
source: {
'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
'count': [823, 235, 1042, 988],
'score': [95.8, 81.4, 91.2, 76.9]
}
}]多个 dataset 以及如何引用他们
js
var option = {
dataset: [{
// 序号为 0 的 dataset。
source: [...],
}, {
// 序号为 1 的 dataset。
source: [...]
}, {
// 序号为 2 的 dataset。
source: [...]
}],
series: [{
// 使用序号为 2 的 dataset。
datasetIndex: 2
}, {
// 使用序号为 1 的 dataset。
datasetIndex: 1
}]
}其他
- 并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。
js
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {focus: 'data'},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});使用 transform 进行数据转换
- 数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。
- 把数据分成多份用不同的饼图展现。
- 进行一些数据统计运算，并展示结果。
- 用某些数据可视化算法处理数据，并展示结果。
- 数据排序。
- 去除或直选择数据项。
数据转换基础使用
- 数据转换是依托于数据集（dataset）来实现的. 我们可以设置 dataset.transform 来表示，此 dataset 的数据，来自于此 transform 的结果。
js
var option = {
dataset: [
{
// 这个 dataset 的 index 是 `0`。
source: [
['Product', 'Sales', 'Price', 'Year'],
['Cake', 123, 32, 2011],
['Cereal', 231, 14, 2011],
['Tofu', 235, 5, 2011],
['Dumpling', 341, 25, 2011],
['Biscuit', 122, 29, 2011],
['Cake', 143, 30, 2012],
['Cereal', 201, 19, 2012],
['Tofu', 255, 7, 2012],
['Dumpling', 241, 27, 2012],
['Biscuit', 102, 34, 2012],
['Cake', 153, 28, 2013],
['Cereal', 181, 21, 2013],
['Tofu', 395, 4, 2013],
['Dumpling', 281, 31, 2013],
['Biscuit', 92, 39, 2013],
['Cake', 223, 29, 2014],
['Cereal', 211, 17, 2014],
['Tofu', 345, 3, 2014],
['Dumpling', 211, 35, 2014],
['Biscuit', 72, 24, 2014],
],
// id: 'a'
}, {
// 这个 dataset 的 index 是 `1`。
// 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2011 }
},
// 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
// 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
// `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
// `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
// 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
}, {
// 这个 dataset 的 index 是 `2`。
// 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
// 那么输入默认来自于 index 为 `0` 的 dataset 。
transform: {
// 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
type: 'filter',
// 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
// 在这个 "filter" transform 中，`config` 用于指定筛选条件。
// 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
// 数据项。
config: { dimension: 'Year', value: 2012 }
}
}, {
// 这个 dataset 的 index 是 `3`。
transform: {
type: 'filter',
config: { dimension: 'Year', value: 2013 }
}
}],
series: [{
type: 'pie', radius: 50, center: ['25%', '50%'],
// 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
// 2011 年那个 "filter" transform 的结果。
datasetIndex: 1
}, {
type: 'pie', radius: 50, center: ['50%', '50%'],
datasetIndex: 2
}, {
type: 'pie', radius: 50, center: ['75%', '50%'],
datasetIndex: 3
}]
};数据转换的进阶使用
链式声明 transform
- transform 可以被链式声明，这是一个语法糖。
js
option: {
dataset: [{
source: [ ... ] // 原始数据
}, {
// 几个 transform 被声明成 array ，他们构成了一个链，
// 前一个 transform 的输出是后一个 transform 的输入。
transform: [{
type: 'filter',
config: { dimension: 'Product', value: 'Tofu' }
}, {
type: 'sort',
config: { dimension: 'Year', order: 'desc' }
}]
}],
series: {
type: 'pie',
// 这个系列引用上述 transform 的结果。
datasetIndex: 1
}
}- 一个 transform 输出多个 data。 dataset.fromTransformResult
js
option = {
dataset: [{
// 这个 dataset 的 index 为 `0`。
source: [...] // 原始数据
}, {
// 这个 dataset 的 index 为 `1`。
transform: {
type: 'boxplot'
}
// 这个 "boxplot" transform 生成了两个数据：
// result[0]: boxplot series 所需的数据。
// result[1]: 离群点数据。
// 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到
// result[0] 。
// 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ：
}, {
// 这个 dataset 的 index 为 `2`。
// 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。
fromDatasetIndex: 1,
// 并且指定了获取 transform result[1] 。
fromTransformResult: 1
},
// 这个 dataset 的 index 为 `3`。
{
fromDatasetIndex: 1,
fromTransformResult: 1,
transform: {
//对数据进行排序
type: 'sort',
//
config: { dimension: 2, order: 'desc' }
}
}],
xAxis: {
type: 'category'
},
yAxis: {
},
series: [{
name: 'boxplot',
type: 'boxplot',
// Reference the data from result[0].
// 这个 series 引用 index 为 `1` 的 dataset 。
datasetIndex: 1
}, {
name: 'outlier',
type: 'scatter',
// 这个 series 引用 index 为 `2` 的 dataset 。
// 从而也就得到了上述的 transform result[1] （即离群点数据）
datasetIndex: 2
}]
};在开发环境中 debug
- 配置项 transform.print 方便 debug
js
option = {
dataset: [{
source: [ ... ]
}, {
transform: {
type: 'filter',
config: { ... }
// 配置为 `true` 后， transform 的结果
// 会被 console.log 打印出来。
print: true
}
}],
...
}数据转换器 "filter"
- echarts 内置提供了能起过滤作用的数据转换器。
js
option = {
dataset: [{
source: [
['Product', 'Sales', 'Price', 'Year'],
['Cake', 123, 32, 2011],
['Latte', 231, 14, 2011],
['Tofu', 235, 5, 2011],
['Milk Tee', 341, 25, 2011],
['Porridge', 122, 29, 2011],
['Cake', 143, 30, 2012],
['Latte', 201, 19, 2012],
['Tofu', 255, 7, 2012],
['Milk Tee', 241, 27, 2012],
['Porridge', 102, 34, 2012],
['Cake', 153, 28, 2013],
['Latte', 181, 21, 2013],
['Tofu', 395, 4, 2013],
['Milk Tee', 281, 31, 2013],
['Porridge', 92, 39, 2013],
['Cake', 223, 29, 2014],
['Latte', 211, 17, 2014],
['Tofu', 345, 3, 2014],
['Milk Tee', 211, 35, 2014],
['Porridge', 72, 24, 2014]
]
}, {
transform: {
type: 'filter',
config: { dimension: 'Year', '=': 2011 }
// 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
// 'Year' 上值为 2011 的所有数据项。
}
}],
series: {
type: 'pie',
datasetIndex: 1
}
};关于维度（ dimension ）：
- config.dimension 指定了维度，能设成这样的值：
- 设定成声明在 dataset 中的维度名，例如 config: { dimension: 'Year', '=': 2011 }。不过， dataset 中维度名的声明并非强制，所以我们也可以设定成 dataset 中的维度 index （index 值从 0 开始）例如 config: { dimension: 3, '=': 2011 }。
关于关系比较操作符：
- 关系操作符，可以设定这些： >（gt）、>=（gte）、<（lt）、<=（lte）、=（eq）、!=（ne、<>）、reg。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：
- 多个关系操作符能声明在一个 {} 中，例如 { dimension: 'Price', '>=': 20, '<': 30 }。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。
- data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 ' 123 '。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。
- 如果我们需要对日期对象（JS Date）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 parser: 'time'，例如 config: { dimension: 3, lt: '2012-05-12', parser: 'time' }。
- 纯字符串比较也被支持，但是只能用在 = 或 != 上。而 >, >=, <, <= 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。
- reg 操作符能提供正则表达式比较。例如， { dimension: 'Name', reg: /\s+Müller\s*$/ } 能在 'Name' 维度上选出姓 'Müller' 的数据项。
关于逻辑比较：
js
// 与或非（ and | or | not ）
option = {
dataset: [{
source: [...]
}, {
transform: {
type: 'filter',
config: {
// 使用 and 操作符。
// 类似地，同样的位置也可以使用 “or” 或 “not”。
// 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
and: [
{ dimension: 'Year', '=': 2011 },
{ dimension: 'Price', '>=': 20, '<': 30 }
]
}
// 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。
}
}],
series: {
type: 'pie',
datasetIndex: 1
}
};
transform: {
type: 'filter',
config: {
or: [{
and: [{
dimension: 'Price', '>=': 10, '<': 20
}, {
dimension: 'Sales', '<': 100
}, {
not: { dimension: 'Product', '=': 'Tofu' }
}]
}, {
and: [{
dimension: 'Price', '>=': 10, '<': 20
}, {
dimension: 'Sales', '<': 100
}, {
not: { dimension: 'Product', '=': 'Cake' }
}]
}]
}
}关于解析器（ parser ）：
- 指定“解析器”（ parser ）来对值进行解析后再做比较
- parser: 'time'：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 echarts.time.parse 相同，即，当原始值为时间对象（ JS Date 实例），或者是时间戳，或者是描述时间的字符串（例如 '2012-05-12 03:11:22' ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。
- parser: 'trim'：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。
- parser: 'number'：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 NaN。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 '33%', 12px），我们需要手动指定 parser: 'number'，从而去掉尾缀转为数值才能比较。
js
option = {
dataset: [{
source: [
['Product', 'Sales', 'Price', 'Date'],
['Milk Tee', 311, 21, '2012-05-12'],
['Cake', 135, 28, '2012-05-22'],
['Latte', 262, 36, '2012-06-02'],
['Milk Tee', 359, 21, '2012-06-22'],
['Cake', 121, 28, '2012-07-02'],
['Latte', 271, 36, '2012-06-22'],
...
]
}, {
transform: {
type: 'filter',
config: {
{ dimension: 'Date', '>=': '2012-05', '<': '2012-06', parser: 'time' }
}
}
}]
}形式化定义：
js
type FilterTransform = {
type: 'filter';
config: ConditionalExpressionOption;
};
type ConditionalExpressionOption =
true | false | RelationalExpressionOption | LogicalExpressionOption;
type RelationalExpressionOption = {
dimension: DimensionName | DimensionIndex;
parser?: 'time' | 'trim' | 'number';
lt?: DataValue; // less than
lte?: DataValue; // less than or equal
gt?: DataValue; // greater than
gte?: DataValue; // greater than or equal
eq?: DataValue; // equal
ne?: DataValue; // not equal
'<'?: DataValue; // lt
'<='?: DataValue; // lte
'>'?: DataValue; // gt
'>='?: DataValue; // gte
'='?: DataValue; // eq
'!='?: DataValue; // ne
'<>'?: DataValue; // ne (SQL style)
reg?: RegExp | string; // RegExp
};
type LogicalExpressionOption = {
and?: ConditionalExpressionOption[];
or?: ConditionalExpressionOption[];
not?: ConditionalExpressionOption;
};
type DataValue = string | number | Date;
type DimensionName = string;
type DimensionIndex = number;数据转换器 "sort"
- "sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ axis.type: 'category' ）中显示排过序的数据。
js
option = {
dataset: [{
dimensions: ['name', 'age', 'profession', 'score', 'date'],
source: [
[' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
[' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
[' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
[' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
[' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
]
}, {
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' }//asc从小到大 desc从大到小
}
}],
xAxis: {
type: 'category',
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
series: {
type: 'bar',
encode: { x: 'name', y: 'score' },
datasetIndex: 1
}
};数据转换器 "sort" 还有一些额外的功能
- 可以多重排序，多个维度一起排序。
- 默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。
- 对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。
- 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 incomparable: 'min' | 'max' 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 null, undefined, NaN, '', '-'）在排序的头还是尾。
- 过滤器 filter: 'time' | 'trim' | 'number' 可以被使用，和数据转换器 "filter" 中的情况一样。
- 如果要对时间进行排序（例如，值为 JS Date 实例或者时间字符串如 '2012-03-12 11:13:54'），我们需要声明 parser: 'time'。
- 如果需要对有后缀的数值进行排序（如 '33%', '16px'）我们需要声明 parser: 'number'。
js
option = {
dataset: [{
dimensions: ['name', 'age', 'profession', 'score', 'date'],
source: [
[' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
[' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
[' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
[' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
[' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
]
}, {
transform: {
type: 'sort',
config: [
// 对两个维度按声明的优先级分别排序。
{ dimension: 'profession', order: 'desc' },
{ dimension: 'score', order: 'desc' }
]
}
}],
series: {
type: 'bar',
datasetIndex: 1
},
...
};
type SortTransform = {
type: 'filter';
config: OrderExpression | OrderExpression[];
};
type OrderExpression = {
dimension: DimensionName | DimensionIndex;
order: 'asc' | 'desc';
incomparable?: 'min' | 'max';
parser?: 'time' | 'trim' | 'number';
};
type DimensionName = string;
type DimensionIndex = number;使用外部的数据转换器
- 使用第三方库 ecStat 提供的数据转换器
js
// 首先要注册外部数据转换器。
echarts.registerTransform(ecStatTransform(ecStat).regression);
option = {
dataset: [{
source: rawData
}, {
transform: {
// 引用注册的数据转换器。
// 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。
// 而内置数据转换器（如 'filter', 'sort'）没有名空间。
type: 'ecStat:regression',
config: {
// 这里是此外部数据转换器所需的参数。
method: 'exponential'
}
}
}],
xAxis: { type: 'category' },
yAxis: {},
series: [{
name: 'scatter',
type: 'scatter',
datasetIndex: 0
}, {
name: 'regression',
type: 'line',
symbol: 'none',
datasetIndex: 1
}]
};在图表中加入交互组件
- 图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline
数据区域缩放组件（dataZoom）
- 『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系（grid）、极坐标系（polar）中实现这一功能。
- dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。 可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
- dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。
- dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。数据过滤模式的设置不同，效果也不同，参见：dataZoom.filterMode。
- dataZoom 的数据窗口范围的设置，目前支持两种形式：百分比形式：参见 dataZoom.start 和 dataZoom.end。绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。
- 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
- 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
- 框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。
在代码加入 dataZoom 组件
js
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 这是个『散点图』
itemStyle: {
opacity: 0.8
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}数据的视觉映射
- 数据可视化是 数据 到 视觉元素 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。
- ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。
- 图形类别（symbol）、图形大小（symbolSize）、颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）
数据和维度
- ECharts中的数据，一般存放于 series.data 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。
- series.data 最常见的形式，是『线性表』，即一个普通数组：
- 在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 visualMap 。最常见的情况，气泡图（scatter） 使用半径展现了第三个维度。
js
series: {
data: [
{ // 这里每一个项就是数据项（dataItem）
value: 2323, // 这是数据项的数据值（value）
itemStyle: {...}
},
1212, // 也可以直接是 dataItem 的 value，这更常见。
2323, // 每个 value 都是『一维』的。
4343,
3434
]
}
series: {
data: [
{ // 这里每一个项就是数据项（dataItem）
value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）
itemStyle: {...}
},
[1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。
[2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。
[4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，
// 第二维度映射到y轴，
// 第三维度映射到气泡半径（symbolSize）
]
}visualMap 组件
- visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。
- 连续型（visualMapContinuous）
- 分段型（visualMapPiecewise）：
- 分段型视觉映射组件（visualMapPiecewise），有三种模式：
- 连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
- 连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
- 离散数据（类别性数据）: 类别定义在 visualMap-piecewise.categories 中。
js
option = {
visualMap: [ // 可以同时定义多个 visualMap 组件。
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 visualMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...
};
option = {
visualMap: [
{
type: 'piecewise',
min: 0,
max: 5000,
dimension: 3, // series.data 的第四个维度（即 value[3]）被映射
seriesIndex: 4, // 对第四个系列进行映射。
inRange: { // 选中范围中的视觉配置
color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
// 数据最小值映射到'blue'上，
// 最大值映射到'red'上，
// 其余自动线性计算。
symbolSize: [30, 100] // 定义了图形尺寸的映射范围，
// 数据最小值映射到30上，
// 最大值映射到100上，
// 其余自动线性计算。
},
outOfRange: { // 选中范围外的视觉配置
symbolSize: [30, 100]
}
},
...
]
};ECharts 中的事件和行为
- 事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件
- 如在切换图例开关时触发的 'legendselectchanged' 事件（这里需要注意切换图例开关是不会触发'legendselected'事件的），数据区域缩放时触发的 'datazoom' 事件等等。
js
//点击事件
myChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params.name);
});鼠标事件的处理
- ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。
js
// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
// chart.on('click', 'series', function () {...});
// chart.on('click', 'series.line', function () {...});
// chart.on('click', 'dataZoom', function () {...});
// chart.on('click', 'xAxis.category', function () {...});
myChart.on('click', function (params) {
// params :{
// // 当前点击的图形元素所属的组件名称，
// // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
// componentType: string,
// // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
// seriesType: string,
// // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
// seriesIndex: number,
// // 系列名称。当 componentType 为 'series' 时有意义。
// seriesName: string,
// // 数据名，类目名
// name: string,
// // 数据在传入的 data 数组中的 index
// dataIndex: number,
// // 传入的原始数据项
// data: Object,
// // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
// // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
// // 其他大部分图表中只有一种 data，dataType 无意义。
// dataType: string,
// // 传入的数据值
// value: number|Array
// // 数据图形的颜色。当 componentType 为 'series' 时有意义。
// color: string
// }
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});