const chart = echart.init(document.getElementById('main'));
react 中使用
render() {
const {width = '100%', height = '100%'} = this.props;
return (
className="default-chart"
ref={el => this.el = el}
style={ {width, height}}
>div>
);
}
initChart = (el) => {
return new Promise((resolve) => {
// 设置定时器，使得获得的 clientWidth clientHeight 符合预期
setTimeout(() => {
this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});
resolve();
}, 0);
})
}
async componentDidMount() { // 变成异步的
console.log('did mount');
await this.initChart(this.el);
this.setOption(this.props.options);
}
或者等待容器尺寸后重新绘制
initChart = (el) => {
/*
设置定时器调用 echarts 实例的 resize() 方法，重新刷新画布
*/
this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});
setTimeout(() => this.chart.resize(), 0);
}
componentDidMount() { // 不在需要异步
console.log('did mount');
this.initChart(this.el);
this.setOption(this.props.options);
window.addEventListener('resize', throttle(this.resize, 100));
}
2. 异步加载数据
echart 在图标初始化后的任何时候，都可以通过实例的 setOption() 方法直接填入数据，如果需要加载数据，可以在加载数据完成后调用此方法；也可以阶段性的获取数据，然后通过 setOption() 方法注入数据。
const chart = echart.init(document.getElementById('main'));
get('/xxx').then(res => chart.setOption(res));
3. 加载动画
echart 提供简单的加载动画
const chart = echart.init(document.getElementById('main'));
chart.showLoading();
get('/xxx').then(res => {
chart.hideLoading();
chart.setOption(res);
});
4. 交互组件
legend 图例组件
title 标题组件
visualMap 视觉映射组件
dataZoom 数据区域缩放组件
timeline 时间线组件
5. 移动端自适应
ECharts 实现了类似 CSS Media Query 的自适应能力
option = {
baseOption: { // 这里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 这里定义了 media query 的逐条规则。
{
query: { // 这里写规则。
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3 // 长宽比
},
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
legend: {...},
...
}
}
]
};
5. 数据的视觉映射
数据可视化是数据到视觉元素的映射过程，ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到 ‘线’，柱状图 把数据映射到 ‘长度’ 等
ECharts 提供 visualMap 组件来提供通用的视觉映射
ECharts 中的数据，一般存放于 series.data 中，根据图表类型不同，数据的具体形式也可能有些许差异
6. ECharts 中的事件和行为
在 ECharts 的图表中用户的操作将会触发相应的事件，开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框
chart.on('click', function (params) {
console.log('chart in click', params);
})
鼠标事件的监听函数会得到参数 params ，这是一个包含点击图形的数据信息对象
由组件的交互行为可以触发事件，除此之外也可以在程序里调用方法触发图表行为
// 调用此方法可以触发图表行为，type对应着动作
chart.dispatchAction({
type: ''
})
7. 切换 canvas 和 svg 渲染
ECharts 默认使用 canvas 渲染，切换到 svg 需要进行一些设置
import * as echarts from 'echarts/lib/echarts';
import 'zrender/lib/svg/svg';
const chart = echarts.init(dom, null, {renderer: 'svg' /* canvas */});
API
1. echarts 属性和方法
1. 初始化 echarts.init(dom, theme, opts) 创建实例
用于创建一个 ECharts 实例，不能在单个容器上初始化多个实例
dom: 实例容器，一般是一个具有宽高的 div 元素，需要明确指定 style.width | style.height
theme: 应用的主题配置对象，也可以是 echarts.registerTheme 注册的主题名称
opts: 附加参数
renderer: 渲染器配置项 svg|canvas
width: 用于指定实例宽度 null/undefined/'auto' 表示实例容器的宽度
height: 同上
devicePixelRatio: 设备像素比，会默认获取浏览器的 window.devicePixelRatio 值
const chart = echarts.init(document.getElementById('main'), null, {
renderer: 'svg',
width: 300,
height: 400
});
2. echarts.dispose() 销毁实例
实例销毁后无法被使用
3. echarts.getInstanceByDom() 通过容器获取容器上的实例
2. echartsInstance 实例属性与方法
1. instance.group = 'xxx' 用于设置分组信息
2. instance.setOption({}) 用于设置图标配置项
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过它完成，ECharts 会合并新的参数和数据，然后刷新图表，并通过合适的动画变化
chart.setOption(option, notMerge, lazyUpdate);
option: 图表的配置项和数据
notMerge: 是否与之前的 option 合并 默认为 false 即为合并
lazyUpdate: 在设置完option后是否不立即更新图表，默认为false，即立即更新。
3. instance.getWidth()|getHeight() 获取实例容器宽度|高度
4. instance.getDom()| () 获取实例容器的 DOM | 获取合并后的配置项
5. instance.resize(opts) 改变图表尺寸，在容器大小发生变化时手动调用
参数可以省略，opts如下
width: 显式指定实例宽度，单位为像素
height: 显式的指定实例的高度
silent: 是否禁止抛出事件 默认 false
6. instance.dispatchAction() 手动触发图表行为
7. instance.on('envent', handle) 绑定事件处理函数
ECharts 中事件有两种，一种是鼠标事件，鼠标点击在某个图形上会触发，还有一种是调用 dispatchAction 后触发的事件，每个 action 都会有对应的事件
chart.on('click', params => console.log(params));
8. instance.off('event, handle) 解绑事件处理函数
9. instance.convertToPixel(finder, value) 转换为像素值
finder 表示定位参数，用来定位，value 表示要被转换的值，返回像素坐标值
暂时理解为，将图形坐标值，转化为对应的像素坐标值
10. instance.convertFromPixel() 从像素值转换
装换像素坐标值到逻辑坐标系上的点，是 convertToPixel 的逆运算
11. instance.containPixel() 判断给定的点是否在指定的坐标系上
12. instance.showLoading()|hideLoading() 显示隐藏加载动画
13. instance.getDataURL() 导出图表图片
> 获取图表对应图片的 base64的URL，可以设置为 Img 标签的 src , 适合 canvas 渲染的图表
14. instance.getConnectedDataURL() 导出联动的图表图片，返回 bas e64
适合 canvas 渲染的图表
15. instance.clear() 清空当前实例
移除实例中所有组件和图表，清空后调用 getOption 方法返回一个{}空对象。
16. instance.dispose()|isDisposed 销毁实例|判断实例是否销毁
3. 鼠标事件事件参数
事件参数是时间对象的数据的各个属性，图表的点击事件，基本参数如下，一些图表还会有附加参数
常用鼠标事件：click, dbclick, mousedown, mouseup, mouseover, mouseout, globalout, contextmenu
{
componentType: string, // 点击的图形元素所属组件名称 series 表示系列
seriesType: string, // 系列类型
seriesIndex: number, // 系列编号
seriesName: string, // 系列名称
name: string, // 数据名称、类目名称
dataIndex: number, // 数据在传入的 data 数组中的 index
data: Object, // 传入的原始数据
value: number|Array, // 传入的数据值
color: string, // 数据图形的颜色
}
4. instance.setOption({}) 的配置项
配置项对象的第一层属性名表示相应的组件，属性值则是对应的组件的配置
chart.setOption({
title: {},
legend: {}
....
})
1. title 标题组件
title: {
show: true, // 是否显示
text: 'ECharts 入门示例xxx', // 主标题
link: 'http://write.blog.csdn.net/postlist', // 主标题链接
target: 'self', // 'blank' // 页面跳转方式
textStyle: { // 主标题文字样式
color: '#333', // 部分 css 样式
},
subtext: '简单示例', // 副标题
sublink: '',
subtarget: 'blank',
subtextStyle: {},
padding: 10, // [t, r, b, l] 标题内边距
itemCap: 10, // 主副标题间距
zlevel: 0, // 所有图形的 zelvel 值，用于 canvas 分层，不同的 zlevel 会放置在不同的 canvas 中
z: 2, // 组件所有图形的 z 值，控制图形的前后顺序，比 zlevel 优先级低，不会创建 canvas
left: 'center', // left|top|right|bottom 对其属性
borderWidth: 1,
borderColor: '#666',
borderRadius: 4,
},
2. legend 图例组件
图例组件展现了不同系列的标记、颜色和名字，可以通过点击图例控制哪些系列不显示
legend: {
type: 'scroll', // 图例类型 ‘scroll’
show: true, // 是否显示
zlevel: 0,
z: 2,
left: 'right',
top: 'bottom', // left|top|right|bottom 显示位置
width: '100%', // width|height 图例组件的宽高
heigth: '100%',
orient: 'vertical', // 图例列表的布局朝向
align: 'left', // 标记和文本的对其
padding: 10, // 组件的内边距
itemGap: 18, // 每项间距
itemWidth: 20, // itemWidth|itemHeight每项图形宽高
// formatter: name => `is ${name}`, // 用来格式化图例文本，也可以使用字符串模板
selectedMode: true, // 图例选择的模式, 默认为 true 表示可选择
inactiveColor: '#989796', // 图例关闭时的颜色
selected: {aaa: true, ccc: true}, // 图例选中状态表
textStyle: {}, // 图例公用文本样式
tooltip: { // 图例的 tooltip 配置
show: true
},
/*
图例数据数组，每一项代表一个系列的 name ,
图例会根据对应系列的图形标记绘制自己的颜色和标记，
如果没有指定 data 会自动从当前系列中获取 series.name 等指定的纬度，
可以将每一项写成对象，来配置样式
*/
// data: ['xxx', 'aaa'],
borderWidth: 1,
borderColor: '#333',
pageButtonItemGap: 3,
},
3. grid 直角坐标系内绘图网格组件
grid: {
show: true, // 是否显示
left: '5%', // 组件位置 left|top|right|bottom
width: 'auto', // 设置宽高 width|height
containLabel: true, // 计算宽高时是否包含了所有标签，用于防止溢出
backgroundColor: 'rgba(128, 128, 128, 0.5)',
tooltip: { // 本坐标系特定的 tooltip 设置
trigger: 'axis' // 设置触发类型
}
},
4. xAxis yAxis 直角坐标系 grid 中的 X 轴 Y 轴
xAxis: {
show: true, // 是否显示
position: 'bottom', // x 轴的位置
offset: 0, // x 轴相对默认位置的偏移
type: 'value', // 坐标轴类型 value数值型|category类目轴|time时间轴|log对数轴
name: 'x 轴', // 坐标轴名称
nameLocation: 'end', // 坐标轴显示位置
nameTextStyle: { // 坐标轴文字颜色
color: '#425aaa'
},
nameGap: 5, // 坐标轴名称与轴线之间的距离
nameRotate: -30, // 坐标轴名字旋转角度
inverse: false, // 是否是反向坐标轴
boundaryGap: true, // 边界留白 类目轴为 boolean,非类目轴为 一个数组，记载最大值，最小值延伸范围
// min: 1, // 坐标轴刻度最小值 ’dataMin‘表示数据在该轴上的最小值，类目轴中可以设置类目序数，也可以是一个函数
// max: 'dataMax', // 同上
scale: true, // 只在数值轴中有效，设置为 true 后不会强制包含零刻度，设置 min max 后无效
splitNumber: 5, // 坐标轴分割段数的预估值，实际显示的会有调整。类目轴无效
minInterval: 5, // 自动计算坐标轴的最小间隔大小
silent: false, // 坐标轴是否是静态的无法交互
triggerEvent: true, // 坐标轴的标签是否响应和触发鼠标事件，默认不响应
axisLine: { // 坐标轴轴线相关配置
show: true,
onZero: true, // 是否相交另一个轴与 0 刻度
symbol: ['none', 'arrow'], // 轴线两边箭头
symbolSize: 10, // 轴线箭头大小
lineStyle: { // 轴线的样式
color: 'red'
}
},
axisTick: { // 坐标轴刻度相关设置
show: true,
alignWithLabel: true, // 保证刻度线和标签对其
inside: true, // 设置坐标轴刻度朝向
length: 10, // 设置刻度长度
lineStyle: {} // 刻度线样式
},
axisLabel: { // 坐标轴刻度标签相关设置
show: true,
inside: true, // 设置标签朝向
rotate: -30, // 旋转
margin: 8, // 与轴线间距
formatter: '{value} kk', // 内容格式容器
color: 'blue',
align: 'center'
},
splitLine: { // grid 分割线设置
show: true,
lineStyle: {
color: 'green'
}
},
splitArea: { // grid 分割区域
show: true,
areaStyle: {}
},
/*
data 类目数据
*/
// data: [23.4, 25.4, 32, 33.4, 38.4, 40, 42]
},
5. polar 极坐标系
polar: { // 极坐标系，可以用于散点图和折线图，每个极坐标系有一个角度轴和一个半径轴
center: ['50%', '50%'], // 中心点在实例中的位置
radius: '90%', // 极坐标系半径
tooltip: { // 提示线
trigger: 'axis'
}
},
6. radiusAxis 极坐标系径向轴
配置与直角坐标系横竖轴一致
radiusAxis: { // 极坐标系的径向轴， 配置与直角坐标系基本一致
type: 'category', // 坐标轴类型 类型与直角坐标系一致
name: '坐标轴名称',
nameLocation: 'end', // 位置
nameTextStyle: { // 样式
color: 'red'
},
nameGap: 20, // 与轴线间距
namRotate: 0, // 旋转
boundaryGap: true, // 留白
axisLine: {
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#333'
}
},
axisLabel: {
rotate: 30,
fontSize: 10,
},
splitLine: {
show: false,
},
data: days
},
7. angleAxis 极坐标系的角度轴
配置与直角坐标系坐标轴有很多类似
angleAxis: {
type: 'category', // 坐标轴类型
polarIndex: 0, // 角度轴所在的极坐标系索引，默认使用第一个极坐标系
startAngle: 60, // 起始刻度的角度，默认 90 度
clockwise: false, // 是否顺时针增长刻度
data: hours,
boundaryGap: false, // 留白
axisLine: {
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['#aaa', '#ddd'],
type: 'dashed'
}
}
},
8. radar 雷达图组件
radar: {
indicator: [ // 雷达图的指示器，用来指定雷达图中的多个变量(维度)
{name: '指示器 1', max: 7777}, // name 标签名
{name: '指示器 2', max: 666, color: '#592dab'}, // color 设置标签颜色
{name: '指示器 3', max: 3231}, // max,min 最大最小值
{name: '指示器 4', max: 2432},
{name: '指示器 5', max: 2424},
{name: '指示器 6', max: 2323},
],
center: ['50%', '50%'], // 圆心位置
radius: '70%', // 半径
startAngle: 15, // 坐标系起始角度
name: { // 雷达图每个指示器名称的配置项
show: true,
formatter: '/{value}/', // 格式器
color: '#662762'
},
nameGap: 20, // 指示器名称与轴的间距
splitNumber: 10, // 指示器轴的分割段数
shape: 'circle', // 雷达图形状 polygon|circle
axisLine: {
show: true,
symbol: ['none', 'arrow'],
lineStyle: {
color: '#aaa'
}
},
},
series: [{
name: 'test anme',
type: 'radar',
data: [
{name: 'data one', value: [1000, 666, 321, 2432, 2424, 223]},
{name: 'data two', value: [73, 346, 1231, 1432, 2224, 23]},
{name: 'data three', value: [999, 666, 2231, 2132, 424, 1323]}
]
}]
9. dataZoom 区域缩放组件
用来概览数据整体，关注数据细节，有三种类型
内置型，内置于坐标系中，用户在坐标系中通过鼠标拖拽来缩放
滑动条型，有单独的滑动条，在滑动条上进行缩放
框选型， 提供选框进行数据缩放
dataZoom 组件主要是对数轴进行操作，同时存在多个 dataZoom 组件控制同一个数轴，他们会自动联动
dataZoom: [
{
type: 'slider', // 缩放组件类型
show: true,
dataBackground: { // 数据阴影的样式
lineStyle: {
color: 'red'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
fillerColor: 'rgba(2, 35, 220, .3)', // 选中范围的填充颜色
borderColor: '#6a45e2', // 边框颜色
// handleIcon: '', // 可以设置成图片
handleStyle: { // 手柄的样式设置
color: '#892e8a'
},
labelPrecision: 'auto', // 显示 label 的小数精度，默认根据数据自动决定
labelFormatter: 'p{value}p', // 显示 label 的格式化器
showDetail: true, // 是否在拖拽时显示 label
showDataShadow: 'auto', // 是否显示数据阴影
realtime: false, // 是否是实时刷新，设置 false 表示拖拽结束时更新
textStyle: { // 文字颜色
color: 'red'
},
xAxisIndex: [0], // 设置当前区域缩放组件控制的 x轴，可以控制多个
// yAxisIndex: [0], // 设置当前区域缩放组件控制的 y轴，可以控制多个
filterMode: 'weakFilter', // 设置数据过滤模式
start: 10, // start|end 数据缩放范围百分比
end: 50, // startValue|endValue 数据窗口范围的具体数值
minSpan: 30, // 数据窗口的最小百分比
maxSpan: 70, // 数据窗口的最大百分比
origin: 'horizontal', // 布局方向
zoomLock: true, // 是否锁定选择区域大小
throttle: 200, // 节流设置，设置视图刷新频率
left: 'center', // left\top\right\bottom 定位
},
{
type: 'inside', // 参数与 slider 类型类似
disabled: false, // 是否禁用
xAxisIndex: [0], // 显式的指定控制的 x 轴
filterMode: 'weakFilter', // 设置过滤模式
}
],
10. visualMap 视觉映射组件，也就是将数据映射到视觉元素
以下是可映射的视觉元素
symbol: 图形形状
symbolSize: 图形大小
color: 图形颜色
colorAlpha: 颜色透明度
opacity: 透明度
colorLightness: 颜色的明暗度， // 以下三个对应 HSL y颜色表示法
colorSaturation: 颜色的饱和度
colorHue: 颜色的色调
组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射，组件可以定义为分段型或连续型，通过 type 来区分
{
type: 'continuous', // 视觉映射的类型
min: 0, // min|max 指定视觉映射的定义域
max: 2500,
range: [0, 2500], // 设置显示范围，默认 [min, max]
calculable: true, // 是否显示可选定范围的手柄
realtime: true, // 是否实时刷新视图
inverse: true, // 是否反转组件
precision: 1, // 数据展示的精度，小数点后几位
itemWidth: 20, // itemWidth|itemHeight 组件图形的宽高
align: 'auto', // 指定组件中手柄和文字的摆放位置
text: ['High', 'Low'], // 组件两端文本
textGap: 20, // 文本与组件间距
show: true, // 组件是否显示，即使不显示，图表视觉映射效果依然存在
dimension: 1, // 指定数据的那个维度映射到视觉元素上
seriesIndex: 0, // 对应某个 series.data 。指定映射的数据来源
hoverLink: true, // 高亮
inRange: { // 定义选中范围的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
},
outOfRange: { // 定义选定范围之外的视觉元素
color: 'yellow'
},
controller: { // 控制器的 inRange|outOfRange 设置
inRange: {},
outOfRange: {}
},
orient: 'vertical', // 如何放置 visualMap 组件
formatter: '{value}', // 标签格式化
},
{
type: 'piecewise', // 分段式映射组件
splitNumber: 5, // 分段
// pieces: [ // 分段组件每一段的范围，以及样式
// {min: 2500},
// {min: 1000, max: 2500},
// {min: 500, max: 1000},
// {min: 200, max: 500},
// {max: 200},
// ],
// categories: [], 离散型数据不用 pieces 用这个定义
min: 0,
max: 2500,
precision: 0,
selectedMode: 'multiple', // 选择模式
minOpen: true, // minOpen|maxOpen 设置会多出超出边界值选块
maxOpen: true,
inverse: true, // 反转
itemWidth: 23, // itemWidth|itemHeight 设置图形宽高
align: 'left',
text: ['H', 'L'], // 两端文本，设置后不显示 label
// 其他与 连续型组件配置相似
}
11. tooltip 提示框组件
提示框组件可以设置在多种地方
全局设置 tooltip
设置在坐标系中 grid.tooltip polar.tooltip single.tooltip
设置在系列中 series.tooltip
设置在系列的数据项中 series.data.tooltip
tooltip: {
show: true,
trigger: 'axis', // 触发类型
axisPointer: { // 坐标轴指示器配置项，指示坐标轴当前刻度的指示器， 优先级低于在坐标轴组件上的同名定义项
type: 'cross',
snap: true,
},
showContent: true, // 是否显示提示框浮层
// alwaysShowContent: false, // 焦点移出触发提示框区域后，是否还显示提示框
triggerOn: 'mousemove|click', // 提示框触发条件
showDelay: 0, // 浮层显示的延迟
hideDelay: 100, // 浮层隐藏的延迟
enterable: false, // 鼠标是否可以进入浮层, 得配合其他属性使用
confine: true, // 是否把提示框限制在图表区域内
transitionDuration: 1, // 提示框跟随鼠标移动动画时长
// position: 'right', // 提示框浮层的位置，默认不设置会跟随鼠标的位置
formatter: '{a}-{b}-{c}', // 浮层内容格式器
textStyle: { // 浮层文字样式
color: 'red'
},
extraCssText: '', // 额外附加到图层的 css 样式
},
12. axisPointer 坐标轴指示器组件
直角坐标系 grid、极坐标系polar、单轴坐标系 single 中的每个轴都由自己的 axisPointer
axisPointer: {
show: true,
type: 'line', // 指示器类型
snap: true, // 指示器是否自动吸附到点上
label: { // 坐标轴指示器的文本报标签
show: true,
precision: 0, // 标签中数值的精度
formatter: '-{value}-', // 格式器
margin: 10, // label 与轴距离
textStyle: { // 不好使
color: '#666',
},
// padding: 5, // label 内边距
},
lineStyle: { // type: line
color: '#836521',
type: 'dashed'
},
shadowStyle: {}, // type: shadow
triggerTooltip: true, // 是否触发 tooltip
value: null, // 使用 handle 时的初始值设定
status: 'hide', // 当前状态
handle: { // 拖拽手柄，适用于触屏
show: true,
// icon: 'image://url', // 手柄图标
size: 20,
margin: 70, // 手柄与轴间距
color: '#256392',
throttle: 40, // 节流更新频率
},
link: [], // 联动设置
triggerOn: 'click', // 提示框触发条件
},
13. toolbox 工具栏插件
toolbox: {
show: true,
orient: 'vertical', // 方向
itemSize: 15, // icon 大小
itemGap: 10, // icon 间隔
showTitle: true,
feature: {
saveAsImage: {
type: 'svg',
name: 'test',
excludeComponents: ['toolbox', 'legend'], // 忽略的组件
show: true,
title: '保存图片',
// icon: '' // icon 的 svgPath
iconStyle: {
color: '#41390d'
},
emphasis: {
iconStyle: {
color: '#9976ad'
}
},
pixelRatio: 2, // 保存的图片的分辨率
},
restore: { // 配置项还原
show: true,
},
dataView: {
show: true,
readOnly: false, // 是否是只读的
optionToContent: function (opt) { // 定制化展示样式
let axisData = opt.xAxis[0].data;
let series = opt.series;
let table = `"width:100%;text-align:center">
时间td> ${series[0].name} td>tr>`;
for (let i = 0, l = axisData.length; i < l; i++) {
table += `
${axisData[i]} td> ${series[0].data[i]} td>tr>`;
}
table += 'tbody>table>';
return table;
},
},
dataZoom: { // 数据区域缩放
show: true,
xAxisIndex: [0], // xAxisIndex|yAxisIndex 指定被控制的 x,y 轴
},
magicType: { // 动态类型切换
show: true,
type: ['line', 'bar'],
option: { // 对应 type 中的各个类型的配置项
line: {},
},
seriesIndex: { // 各个类型对应的系列
line: [0]
}
},
brush: { // 选框组件的控制按钮， 也可以在 brush.toolbox 中设置
type: ['rect', 'polygon']
}
},
iconStyle: {
color: '#61259d'
}
},
14. brush 区域选择组件
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
brushLink: null, // 联动选项
seriesIndex: 'all', // 指定可以被筛选的系列
brushType: 'lineX', // 默认刷子类型
brushMode: 'multiple', // 默认刷子模式
transformable: true, // 已经选好的选框是否可以被调整形状或平移。
brushStyle: {}, // 选框默认样式
throttleType: 'debounce', // 节流的类型
throttleDelay: 0, // 节流的时间
inBrush: {}, // 选中范围的视觉元素
outOfBrush: {}, // 选中范围外的视觉元素
},
15. geo 地理坐标系组件
geo: {
show: true,
map: 'china', // 地图类型, 地图数据需要另外引入，在 'echarts/map/js/china' 中
roam: true, // 鼠标缩放和平移漫游 scale|move|true(都开启)
center: [115.97, 29.71], // 当前视角的中心点
aspectScale: 0.75, // 设置地图长宽比
boundingCoords: null, // 定义左上角右下角经纬度
zoom: 1.5, // 当前视角的缩放比例
scaleLimit: {min: 0.6, max: 1.7}, // 缩放比例限制
nameMap: {'China': '中国'}, // 自定义区域名称映射
selectedMode: true, // 是否支持多选
label: { // 图形上的文本标签，说明图形上的一些数据
show: true,
position: 'top', // 标签位置
distance: 20, // 距离图形元素的距离
rotate: -30, // 标签旋转
offset: [100, 100], // 是否对文字进行偏移
formatter: '{b}：{@score}', // 内容格式器
},
itemStyle: { // 地图区域多边形样式
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: { // 高亮状态下的多边形和标签样式。
itemStyle: {
areaColor: '#2a333d'
}
},
regions: [ // 在地图中对特定的区域配置样式。
{name: '广东', itemStyle: {areaColor: 'red', color: 'red'}}
],
silent: false, // 是否不响应和触发鼠标事件
},
16. parallel 平行坐标系
平行坐标系适用于对这种多维数据进行可视化分析，每一个维度对应一个坐标轴，每一个数据项是一条线，贯穿多个坐标轴，在坐标轴上可以进行数据选取等操作
parallel: {
left: '5%', // left|top|right|bottom 定义组件容器大小
right: '13%',
bottom: '10%',
top: '20%',
layout: 'horizontal', // 布局方向
axisExpandable: true, // 坐标轴可扩展，用于维度较多的情况
axisExpandCenter: 3, // 初始时，以哪个轴为展开中心
axisExpandCount: 6, // 初始时处于展开状态的轴的数量
axisExpandWidth: 60, // 展开轴的间距
axisExpandTriggerOn: 'mousemove', // 触发展开的操作
parallelAxisDefault: { // 多个坐标轴的一些默认配置项，即 parallelAxis 中每项配置
type: 'value', // 坐标轴类型
name: 'AQI指数', // 坐标轴名称
nameLocation: 'end', // 名称显示位置
nameGap: 20, // 名称与轴线间距
nameTextStyle: { // 名称样式
fontSize: 12
},
nameRotate: 15, // 角度
inverse: false, // 反向
boundaryGap: false, // 留白
// min: 'dataMin', // 最小刻度
// max: 'dataMax', // 最大值
scale: true, // 不强制包含零刻度
splitNumber: 5, // 分割段数
axisLine: { // 坐标轴轴线设置
lineStyle: {
color: 'red'
}
},
data: [], // 类目轴中有效，设置数据，默认会从 series.data 中获取
}
},
17. parallelAxis 平行坐标系中坐标轴
{
dim: 0, // 坐标轴的维度序号
parallelIndex: 0, // 表示坐标轴定义到哪个坐标系中
realtime: true, // 是否是实时刷新视图，在筛选的时候
areaSelectStyle: { // 每个坐标轴上都由一个选框，在这里进行设置样式
color: 'blue'
},
name: schema[0].text,
inverse: true,
max: 31,
nameLocation: 'start'
... 其他设置与 parallel.parallelAxisDefault 配置一致
},
18. singleAxis 单轴
{
left: '20%', // left|top|right|bottom
orient: 'horizontal', // 轴的朝向
type: 'category', // 坐标轴类型
name: day,
nameLocation: 'start',
nameTextStyle: {
color: '#333',
fontSize: 16,
},
nameGap: 20,
nameRotate: 15,
boundaryGap: false, // 留白策略
inverse: false, // 反向坐标轴
data: hours,
top: (idx * 100 / 7 + 5) + '%',
height: (100 / 7 - 10) + '%',
axisLabel: {
interval: 2
}
});
19. timeline 时间线组件
timeline 组件，提供了在多个 ECharts option 之间进行切换、播放等操作的功能
公有的配置项，推荐配置在 baseOption 中， timeline 播放切换时，会把 option 数组中的对应option 与 baseOption 进行 merge
timeline:{
show: true,
type: 'slider',
axisType: 'category', // 轴的类型
currentIndex: 3, // 当前选中项
autoPlay: false, // 自动播放
rewind: true, // 反向播放
loop: true, // 循环播放
playInterval: 1000, // 速度
realtime: true, // 实时更新
controlPosition: 'right', // 播放按钮位置
data: ['2002', '2003', '2004', '2005', '2006'], // timeline 数据，每一项可以是数值也可以是配置对象
},
20. graphic 图形元素组件
graphic: [
{
type: 'group',
id: 'test-1', // 指定图形元素
$action: 'merge', // setOption 时指定合并规则 merge|replace|remove
right: 110, // left|top|right|bottom 元素定位
bottom: 110,
bounding: 'raw', // 决定图形元素定位时，是否限制在父元素范围中
invisible: true, // 节点是否可见
cursor: 'pointer', // 鼠标悬浮样式
draggable: true, // 是否可以被拖拽
progressive: false, // 渐进式渲染
rotation: Math.PI / 4,
z: 100,
ondrag: function (params) {
console.log('drag', params);
},
children: [ // 子节点列表，其中项都是一个图形元素定义。
{
type: 'rect', // 其他图形接口类似
left: 'center',
top: 'center',
z: 100,
shape: {
width: 400,
height: 50
},
style: {
fill: 'rgba(0, 0, 0, 0.3)'
}
},
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: '#fff',
text: 'haike test'
}
}
]
}
],
21. calendar 日历坐标系组件
可切换中西方日历习惯、
calendar: {
top: 120, // left|top|right|bottom 限制组件大小
left: 30,
right: 30,
cellSize: 'auto', // 日历每格的大小
range: '2018', // 日历坐标的范围 ['2017-01-02', '2017-02-23']
orient: 'vertical', // 日历坐标的布局朝向
itemStyle: {
normal: { borderWidth: 0.5 }
},
splitLine: {
// 日历坐标分割线样式
show: true,
lineStyle: {
color: '#12786d'
}
},
itemStyle: {
// 设置日历格的样式
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
dayLabel: {
show: true,
firstDay: 1, // 一周从周几开始
margin: 10, // 星期八标签与轴线间距
position: 'start', // 星期的位置
nameMap: 'cn', // 星期显示效果 en|cn
},
monthLabel: { // 月份轴的样式
show: true,
align: 'center',
margin: 10, // 间隔
position: 'end', // 位置
nameMap: 'cn', // 显示效果
formatter: null, // 格式器
},
yearLabel: { // 年的样式
show: true,
margin: 30, // 间距
position: 'top', // 位置
}
},
22. dataset 数据集组件
ECharts 4 开始支持 数据集 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射，使用上方便了很多
const initialOption = {
title: {
top: 30,
left: 'center',
text: '2018 每天步数'
},
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
}
],
yAxis: {},
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]
// ],
source: [
['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]
],
dimensions: ['product', '2015', '2016', '2017'], // 维度信息
sourceHeader: null, // 第一行是否是维度信息
},
// series: [
// {type: 'bar'}, // 对应纵向几个系列
// {type: 'bar'},
// {type: 'bar'},
// ]
series: [
{ type: 'bar'},
{ type: 'bar'},
{ type: 'bar'}
]
};
23. series 系列列表
每个系列通过 type 决定自己的图表类型
查看代码库 vue-ECharts-template
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved.
京ICP备09083238号