前端可视化工具ECharts 学习笔记(一)
这段时间有幸接触到百度开源的前端可视化工具ECharts, 很好很用心的一套工具, 说明文档例子很丰富.
很多年都是在内网不能上外网的工作环境, 所以下面的内容都是记录在OneNote 里面的, 在搬到这里来.
交互：
滚动操作：
option下面
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
{ // 这个dataZoom组件，默认控制x轴。鼠标滚动变化
type: 'inside', // 使用这个, 在图里面可以使用鼠标滚轮操作
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
],
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0], //有多个x轴的时候用到
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0], //有多个Y轴的时候用到
filterMode: 'empty'
}
],
dataZoom 的数据窗口范围的设置，目前支持两种形式：
- 百分比形式：即设置 dataZoom.start 和 dataZoom.end。
- 绝对数值形式：即设置 dataZoom.startValue 和 dataZoom.endValue。
提示框组件 tooltip
tooltip: {
trigger:'axis'
},
tooltip.trigger | string
[ default: 'item' ]
提示框组件的触发类型。
可选：
- 'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
- 'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
- 'none'：什么都不触发。
工具栏
toolbox: {
feature: {
magicType: {
type: ['line', 'bar', 'stack','tiled'] //线型图,柱状图,堆叠（叠加），平铺
},
restore: {}, //重置
saveAsImage: { //保存图片
pixelRatio: 2
}，
dataView:{}//数据试图，一般要重写optionToContent: function(opt) 方法return 表格的html 字符串格式
}
},
平行的比对线
Series 里面
,{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
silent: true,
data:[
{ yAxis: 12 }, { yAxis: 15 }, {yAxis:20}
]
}
}
线型图有填充的
在series 里面
areaStyle: {
normal: {}
},
多y轴， 系列数据指定Y轴
yAxis: [
{ name: '销量1', type: 'value' },
{
name: '销量2', type: 'value'
}
],
Series 指定Y轴， 序号从0开始，没有指定的话默认用0
yAxisIndex:1,
data: data2
polar.tooltip.axisPointer.type | string
[ default: 'line' ]
设置 polar 坐标轴指示器类型。
可选
- 'line' 直线指示器
- 'shadow' 阴影指示器
- 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
y轴显示值处理
axisLabel: {
formatter:'{value}rmb'
}
柱状图上面显示数值
series 里面的
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
return parseInt(params.value);
}
}
}
X轴的一些设置
xAxis.type | string
[ default: 'category' ]
坐标轴类型。
可选：
- 'value' 数值轴，适用于连续数据。
- 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
- 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- 'log' 对数轴。适用于对数数据。
X轴显示的文字倾斜度
在xAxis 里面
axisLabel: {
rotate: 60 }
X轴文字显示不全的话, 在option 里面加grid 调整底部
grid: {
bottom: '80px'
},
xAxis: {
type: 'category',
data: date,
axisLabel: {
interale: 0,
rotate: 60
}
},
对X 轴的文字的颜色定义
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisLabel: {
interale: 0,
rotate: -60,
//对x 轴 的文本的单独自定义颜色
color: function (value,dataIndex) {
//alert(dataIndex);
if (dataIndex%2==0)
return '#000';
else
return '#ccc';
}
}
},
Y轴上显示指针对应的值
在yAxis 里面
axisPointer: {//y轴上显示指针对应的值
show:true,
triggerTooltip: false //不要再有多的提示
}
在yAxis 里面
axisLine: {//设置Y轴的颜色
lineStyle: {
color: color2,
width:6, //宽度
}
},
多个Y轴的位置, 设置Y轴位置
position: 'left',
offset: 70,
效果如下:
lin49940
下面是test 用的html 代码
ECharts lin49940 test