Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 2283a443 编写于 作者: 1 100pah
浏览文件
操作

add pictorial bar chart

上级 9b2dc7c4
隐藏空白更改
内联 并排
Showing with 1387 addition and 221 deletion
index.js
浏览文件 @ 2283a443
......@@ -22,6 +22,7 @@ require('./lib/chart/candlestick');
require('./lib/chart/effectScatter');
require('./lib/chart/lines');
require('./lib/chart/heatmap');
require('./lib/chart/pictorialBar');
require('./lib/component/graphic');
require('./lib/component/grid');
......
src/chart/bar/BarSeries.js
浏览文件 @ 2283a443
define(function(require) {
'use strict';
var SeriesModel = require('../../model/Series');
var createListFromArray = require('../helper/createListFromArray');
return SeriesModel.extend({
return require('./BaseBarSeries').extend({
type: 'series.bar',
dependencies: ['grid', 'polar'],
getInitialData: function (option, ecModel) {
if (__DEV__) {
var coordSys = option.coordinateSystem;
if (coordSys !== 'cartesian2d') {
throw new Error('Bar only support cartesian2d coordinateSystem');
}
}
return createListFromArray(option.data, this, ecModel);
},
getMarkerPosition: function (value) {
var coordSys = this.coordinateSystem;
if (coordSys) {
// PENDING if clamp ?
var pt = coordSys.dataToPoint(value, true);
var data = this.getData();
var offset = data.getLayout('offset');
var size = data.getLayout('size');
var offsetIndex = coordSys.getBaseAxis().isHorizontal() ? 0 : 1;
pt[offsetIndex] += offset + size / 2;
return pt;
}
return [NaN, NaN];
},
brushSelector: 'rect',
defaultOption: {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
coordinateSystem: 'cartesian2d',
legendHoverLink: true,
// stack: null
// Cartesian coordinate system
// xAxisIndex: 0,
// yAxisIndex: 0,
// 最小高度改为0
barMinHeight: 0,
// barMaxWidth: null,
// 默认自适应
// barWidth: null,
// 柱间距离，默认为柱形宽度的30%，可设固定值
// barGap: '30%',
// 类目间柱形距离，默认为类目间距的20%，可设固定值
// barCategoryGap: '20%',
// label: {
// normal: {
// show: false
// }
// },
itemStyle: {
normal: {
// color: '各异'
},
emphasis: {}
}
}
brushSelector: 'rect'
});
});
\ No newline at end of file
src/chart/bar/BarView.js
浏览文件 @ 2283a443
......@@ -4,21 +4,13 @@ define(function (require) {
var zrUtil = require('zrender/core/util');
var graphic = require('../../util/graphic');
var helper = require('./helper');
// FIXME
// Just for compatible with ec2.
zrUtil.extend(require('../../model/Model').prototype, require('./barItemStyle'));
function fixLayoutWithLineWidth(layout, lineWidth) {
var signX = layout.width > 0 ? 1 : -1;
var signY = layout.height > 0 ? 1 : -1;
// In case width or height are too small.
lineWidth = Math.min(lineWidth, Math.abs(layout.width), Math.abs(layout.height));
layout.x += signX * lineWidth / 2;
layout.y += signY * lineWidth / 2;
layout.width -= signX * lineWidth;
layout.height -= signY * lineWidth;
}
return require('../../echarts').extendChartView({
var BarView = require('../../echarts').extendChartView({
type: 'bar',
......@@ -42,170 +34,62 @@ define(function (require) {
var cartesian = seriesModel.coordinateSystem;
var baseAxis = cartesian.getBaseAxis();
var isHorizontal = baseAxis.isHorizontal();
var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
var enableAnimation = seriesModel.get('animation');
var barBorderWidthQuery = ['itemStyle', 'normal', 'barBorderWidth'];
function createRect(dataIndex, isUpdate) {
var layout = data.getItemLayout(dataIndex);
var lineWidth = data.getItemModel(dataIndex).get(barBorderWidthQuery) || 0;
fixLayoutWithLineWidth(layout, lineWidth);
var rect = new graphic.Rect({
shape: zrUtil.extend({}, layout)
});
// Animation
if (enableAnimation) {
var rectShape = rect.shape;
var animateProperty = isHorizontal ? 'height' : 'width';
var animateTarget = {};
rectShape[animateProperty] = 0;
animateTarget[animateProperty] = layout[animateProperty];
graphic[isUpdate? 'updateProps' : 'initProps'](rect, {
shape: animateTarget
}, seriesModel, dataIndex);
}
return rect;
}
data.diff(oldData)
.add(function (dataIndex) {
// 空数据
if (!data.hasValue(dataIndex)) {
return;
}
var rect = createRect(dataIndex);
data.setItemGraphicEl(dataIndex, rect);
group.add(rect);
var itemModel = data.getItemModel(dataIndex);
var layout = getRectItemLayout(data, dataIndex, itemModel);
var el = createRect(data, dataIndex, itemModel, layout, isHorizontal, animationModel);
data.setItemGraphicEl(dataIndex, el);
group.add(el);
updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal);
})
.update(function (newIndex, oldIndex) {
var rect = oldData.getItemGraphicEl(oldIndex);
// 空数据
var el = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(rect);
group.remove(el);
return;
}
if (!rect) {
rect = createRect(newIndex, true);
}
var layout = data.getItemLayout(newIndex);
var lineWidth = data.getItemModel(newIndex).get(barBorderWidthQuery) || 0;
fixLayoutWithLineWidth(layout, lineWidth);
graphic.updateProps(rect, {
shape: layout
}, seriesModel, newIndex);
var itemModel = data.getItemModel(newIndex);
var layout = getRectItemLayout(data, newIndex, itemModel);
data.setItemGraphicEl(newIndex, rect);
if (el) {
graphic.updateProps(el, {shape: layout}, animationModel, newIndex);
}
else {
el = createRect(data, newIndex, itemModel, layout, isHorizontal, animationModel, true);
}
data.setItemGraphicEl(newIndex, el);
// Add back
group.add(rect);
group.add(el);
updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontal);
})
.remove(function (idx) {
var rect = oldData.getItemGraphicEl(idx);
if (rect) {
// Not show text when animating
rect.style.text = '';
graphic.updateProps(rect, {
shape: {
width: 0
}
}, seriesModel, idx, function () {
group.remove(rect);
});
}
.remove(function (dataIndex) {
var el = oldData.getItemGraphicEl(dataIndex);
el && removeRect(dataIndex, animationModel, el);
})
.execute();
this._updateStyle(seriesModel, data, isHorizontal);
this._data = data;
},
_updateStyle: function (seriesModel, data, isHorizontal) {
function setLabel(style, model, color, labelText, labelPositionOutside) {
graphic.setText(style, model, color);
style.text = labelText;
if (style.textPosition === 'outside') {
style.textPosition = labelPositionOutside;
}
}
data.eachItemGraphicEl(function (rect, idx) {
var itemModel = data.getItemModel(idx);
var color = data.getItemVisual(idx, 'color');
var opacity = data.getItemVisual(idx, 'opacity');
var layout = data.getItemLayout(idx);
var itemStyleModel = itemModel.getModel('itemStyle.normal');
var hoverStyle = itemModel.getModel('itemStyle.emphasis').getBarItemStyle();
rect.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
rect.useStyle(zrUtil.defaults(
{
fill: color,
opacity: opacity
},
itemStyleModel.getBarItemStyle()
));
var labelPositionOutside = isHorizontal
? (layout.height > 0 ? 'bottom' : 'top')
: (layout.width > 0 ? 'left' : 'right');
var labelModel = itemModel.getModel('label.normal');
var hoverLabelModel = itemModel.getModel('label.emphasis');
var rectStyle = rect.style;
if (labelModel.get('show')) {
setLabel(
rectStyle, labelModel, color,
zrUtil.retrieve(
seriesModel.getFormattedLabel(idx, 'normal'),
seriesModel.getRawValue(idx)
),
labelPositionOutside
);
}
else {
rectStyle.text = '';
}
if (hoverLabelModel.get('show')) {
setLabel(
hoverStyle, hoverLabelModel, color,
zrUtil.retrieve(
seriesModel.getFormattedLabel(idx, 'emphasis'),
seriesModel.getRawValue(idx)
),
labelPositionOutside
);
}
else {
hoverStyle.text = '';
}
graphic.setHoverStyle(rect, hoverStyle);
});
},
remove: function (ecModel, api) {
var group = this.group;
var data = this._data;
if (ecModel.get('animation')) {
if (this._data) {
this._data.eachItemGraphicEl(function (el) {
// Not show text when animating
el.style.text = '';
graphic.updateProps(el, {
shape: {
width: 0
}
}, ecModel, el.dataIndex, function () {
group.remove(el);
});
if (data) {
data.eachItemGraphicEl(function (el) {
removeRect(el.dataIndex, ecModel, el);
});
}
}
......@@ -214,4 +98,79 @@ define(function (require) {
}
}
});
function createRect(data, dataIndex, itemModel, layout, isHorizontal, animationModel, isUpdate) {
var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
// Animation
if (animationModel) {
var rectShape = rect.shape;
var animateProperty = isHorizontal ? 'height' : 'width';
var animateTarget = {};
rectShape[animateProperty] = 0;
animateTarget[animateProperty] = layout[animateProperty];
graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
shape: animateTarget
}, animationModel, dataIndex);
}
return rect;
}
function removeRect(dataIndex, animationModel, el) {
// Not show text when animating
el.style.text = '';
graphic.updateProps(el, {
shape: {
width: 0
}
}, animationModel, dataIndex, function () {
el.parent && el.parent.remove(el);
});
}
function getRectItemLayout(data, dataIndex, itemModel) {
var layout = data.getItemLayout(dataIndex);
var fixedLineWidth = helper.getLineWidth(itemModel, layout);
// fix layout with lineWidth
var signX = layout.width > 0 ? 1 : -1;
var signY = layout.height > 0 ? 1 : -1;
return {
x: layout.x + signX * fixedLineWidth / 2,
y: layout.y + signY * fixedLineWidth / 2,
width: layout.width - signX * fixedLineWidth,
height: layout.height - signY * fixedLineWidth
};
}
function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal) {
var color = data.getItemVisual(dataIndex, 'color');
var opacity = data.getItemVisual(dataIndex, 'opacity');
var itemStyleModel = itemModel.getModel('itemStyle.normal');
var hoverStyle = itemModel.getModel('itemStyle.emphasis').getBarItemStyle();
el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
el.useStyle(zrUtil.defaults(
{
fill: color,
opacity: opacity
},
itemStyleModel.getBarItemStyle()
));
var labelPositionOutside = isHorizontal
? (layout.height > 0 ? 'bottom' : 'top')
: (layout.width > 0 ? 'left' : 'right');
helper.setLabel(
el.style, hoverStyle, itemModel, color,
seriesModel, dataIndex, labelPositionOutside
);
graphic.setHoverStyle(el, hoverStyle);
}
return BarView;
});
\ No newline at end of file
src/chart/bar/BaseBarSeries.js 0 → 100644
浏览文件 @ 2283a443
define(function(require) {
'use strict';
var SeriesModel = require('../../model/Series');
var createListFromArray = require('../helper/createListFromArray');
return SeriesModel.extend({
type: 'series.__base_bar__',
getInitialData: function (option, ecModel) {
if (__DEV__) {
var coordSys = option.coordinateSystem;
if (coordSys !== 'cartesian2d') {
throw new Error('Bar only support cartesian2d coordinateSystem');
}
}
return createListFromArray(option.data, this, ecModel);
},
getMarkerPosition: function (value) {
var coordSys = this.coordinateSystem;
if (coordSys) {
// PENDING if clamp ?
var pt = coordSys.dataToPoint(value, true);
var data = this.getData();
var offset = data.getLayout('offset');
var size = data.getLayout('size');
var offsetIndex = coordSys.getBaseAxis().isHorizontal() ? 0 : 1;
pt[offsetIndex] += offset + size / 2;
return pt;
}
return [NaN, NaN];
},
defaultOption: {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
coordinateSystem: 'cartesian2d',
legendHoverLink: true,
// stack: null
// Cartesian coordinate system
// xAxisIndex: 0,
// yAxisIndex: 0,
// 最小高度改为0
barMinHeight: 0,
// barMaxWidth: null,
// 默认自适应
// barWidth: null,
// 柱间距离，默认为柱形宽度的30%，可设固定值
// barGap: '30%',
// 类目间柱形距离，默认为类目间距的20%，可设固定值
// barCategoryGap: '20%',
// label: {
// normal: {
// show: false
// }
// },
itemStyle: {
normal: {
// color: '各异'
},
emphasis: {}
}
}
});
});
\ No newline at end of file
src/chart/bar/PictorialBarSeries.js 0 → 100644
浏览文件 @ 2283a443
define(function(require) {
return require('./BaseBarSeries').extend({
type: 'series.pictorialBar',
dependencies: ['grid'],
defaultOption: {
symbol: 'circle', // Customized bar shape
symbolSize: null, // Can be ['100%', '100%'], null means auto.
symbolRotate: null,
symbolPosition: null, // 'start' or 'end' or 'center', null means auto.
symbolOffset: null,
symbolMargin: null, // start margin and end margin. Can be a number or a percent string.
// Auto margin by defualt.
symbolRepeat: false, // Can be a number, specifies repeat times.
// Or false/null/undefined, means no repeat.
symbolClip: false,
symbolBoundingData: null,
// Disable progressive
progressive: 0,
hoverAnimation: true
// cases:
// repeat: bg:Y, clip:Y, ani:cliprect, size:symbolSize and calc by gridSize.
// fixed size: bg:Y, clip:Y, ani:cliprect, size:symbolSize.
// stretch: bg:N, clip:Y, ani:position(by layout), size:byRect
// img: bg:N, clip:Y, ani:position(include clip), size:byRect or bySymbolSize.
}
});
});
\ No newline at end of file
src/chart/bar/PictorialBarView.js 0 → 100644
浏览文件 @ 2283a443
define(function (require) {
var zrUtil = require('zrender/core/util');
var graphic = require('../../util/graphic');
var symbolUtil = require('../../util/symbol');
var numberUtil = require('../../util/number');
var helper = require('./helper');
var parsePercent = numberUtil.parsePercent;
// index: +isHorizontal
var LAYOUT_ATTRS = [
{xy: 'x', wh: 'width', index: 0, posDesc: ['left', 'right']},
{xy: 'y', wh: 'height', index: 1, posDesc: ['top', 'bottom']}
];
var BarView = require('../../echarts').extendChartView({
type: 'pictorialBar',
render: function (seriesModel, ecModel, api) {
var group = this.group;
var data = seriesModel.getData();
var oldData = this._data;
var cartesian = seriesModel.coordinateSystem;
var baseAxis = cartesian.getBaseAxis();
var isHorizontal = baseAxis.isHorizontal();
var coordSysRect = cartesian.grid.getRect();
var opt = {
seriesModel: seriesModel,
coordSys: cartesian,
coordSysExtent: [
[coordSysRect.x, coordSysRect.x + coordSysRect.width],
[coordSysRect.y, coordSysRect.y + coordSysRect.height]
],
animationModel: seriesModel.isAnimationEnabled() ? seriesModel : null,
isHorizontal: isHorizontal,
valueDim: LAYOUT_ATTRS[+isHorizontal],
categoryDim: LAYOUT_ATTRS[1 - isHorizontal],
hoverAnimation: seriesModel.get('hoverAnimation')
};
data.diff(oldData)
.add(function (dataIndex) {
if (!data.hasValue(dataIndex)) {
return;
}
var itemModel = data.getItemModel(dataIndex);
var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
var bar = createBar(data, dataIndex, itemModel, opt, symbolMeta);
bar.__pictorialShapeStr = getShapeStr(data, dataIndex, symbolMeta);
data.setItemGraphicEl(dataIndex, bar);
group.add(bar);
updateStyle(bar, dataIndex, itemModel, opt, symbolMeta);
})
.update(function (newIndex, oldIndex) {
var bar = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(bar);
return;
}
var itemModel = data.getItemModel(newIndex);
var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
var pictorialShapeStr = getShapeStr(data, newIndex, symbolMeta);
if (pictorialShapeStr !== bar.__pictorialShapeStr) {
group.remove(bar);
bar = null;
}
if (bar) {
updateBar(data, newIndex, itemModel, opt, symbolMeta, bar);
}
else {
bar = createBar(data, newIndex, itemModel, opt, symbolMeta, true);
}
data.setItemGraphicEl(newIndex, bar);
// Add back
group.add(bar);
updateStyle(bar, newIndex, itemModel, opt, symbolMeta);
})
.remove(function (dataIndex) {
var bar = oldData.getItemGraphicEl(dataIndex);
bar && removeBar(dataIndex, opt, bar);
})
.execute();
this._data = data;
return this.group;
},
dispose: zrUtil.noop,
remove: function (ecModel, api) {
var group = this.group;
var data = this._data;
if (ecModel.get('animation')) {
if (data) {
var opt = {animationModel: ecModel};
data.eachItemGraphicEl(function (bar) {
removeBar(bar.dataIndex, opt, bar);
});
}
}
else {
group.removeAll();
}
}
});
// Set or calculate default value about symbol, and calculate layout info.
function getSymbolMeta(data, dataIndex, itemModel, opt) {
var layout = data.getItemLayout(dataIndex);
var symbolRepeat = itemModel.get('symbolRepeat');
var symbolClip = itemModel.get('symbolClip');
var lineWidth = helper.getLineWidth(itemModel, layout);
var symbolPosition = itemModel.get('symbolPosition')
|| ((symbolRepeat || symbolClip) ? 'start' : 'center');
var symbolRotate = itemModel.get('symbolRotate');
var symbolMeta = {
layout: layout,
lineWidth: lineWidth,
symbolType: data.getItemVisual(dataIndex, 'symbol') || 'circle',
color: data.getItemVisual(dataIndex, 'color'),
symbolClip: symbolClip,
symbolRepeat: symbolRepeat,
rotation: (symbolRotate || 0) * Math.PI / 180 || 0
};
prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
prepareSymbolSize(
data, dataIndex, layout, opt, symbolRepeat, symbolClip,
symbolMeta.barFullLength, symbolMeta
);
var symbolSize = symbolMeta.symbolSize;
var symbolOffset = itemModel.get('symbolOffset');
if (zrUtil.isArray(symbolOffset)) {
symbolOffset = [
parsePercent(symbolOffset[0], symbolSize[0]),
parsePercent(symbolOffset[1], symbolSize[1])
];
}
prepareLayoutInfo(
itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
symbolPosition, lineWidth, symbolMeta.barFullLength, symbolMeta.repeatLength,
opt, symbolMeta
);
return symbolMeta;
}
// bar length can be negative.
function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
var valueDim = opt.valueDim;
var symbolBoundingData = itemModel.get('symbolBoundingData');
var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
var barFullLength = output.barFullLength = symbolBoundingData != null
? valueAxis.toGlobalCoord(valueAxis.dataToCoord(symbolBoundingData)) - zeroPx
: symbolRepeat
? opt.coordSysExtent[valueDim.index][1 - +(layout[valueDim.wh] <= 0)] - zeroPx
: layout[valueDim.wh];
output.repeatLength = symbolBoundingData != null ? barFullLength : layout[valueDim.wh];
}
// Support ['100%', '100%']
function prepareSymbolSize(data, dataIndex, layout, opt, symbolRepeat, symbolClip, barFullLength, output) {
var valueDim = opt.valueDim;
var categoryDim = opt.categoryDim;
var categorySize = Math.abs(layout[categoryDim.wh]);
var symbolSize = zrUtil.retrieve(
data.getItemVisual(dataIndex, 'symbolSize'),
['100%', '100%']
);
if (!zrUtil.isArray(symbolSize)) {
symbolSize = [symbolSize, symbolSize];
}
symbolSize[categoryDim.index] = parsePercent(
symbolSize[categoryDim.index],
categorySize
);
symbolSize[valueDim.index] = parsePercent(
symbolSize[valueDim.index],
symbolRepeat ? categorySize : Math.abs(barFullLength)
);
output.symbolSize = symbolSize;
}
function prepareLayoutInfo(
itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
symbolPosition, lineWidth, barFullLength, repeatLength, opt, output
) {
var categoryDim = opt.categoryDim;
var valueDim = opt.valueDim;
var symbolMargin = parsePercent(
zrUtil.retrieve(itemModel.get('symbolMargin'), symbolRepeat ? '15%' : 0),
symbolSize[valueDim.index]
);
var unitLength = symbolSize[valueDim.index] + lineWidth;
var pathLength;
if (symbolRepeat) {
var unitWithMargin = unitLength + symbolMargin * 2;
var absBarFullLength = Math.abs(barFullLength);
var repeatTimes = numberUtil.isNumeric(symbolRepeat)
? symbolRepeat : Math.ceil(absBarFullLength / unitWithMargin);
// Adjust calculate margin, to ensure each symbol is displayed
// entirely in the given layout area.
symbolMargin = (absBarFullLength / repeatTimes - unitLength) / 2;
// Update repeatTimes if symbolBoundingData not set.
repeatTimes = output.repeatTimes = numberUtil.isNumeric(symbolRepeat)
? symbolRepeat : Math.ceil(Math.abs(repeatLength) / unitWithMargin);
pathLength = repeatTimes * (unitLength + symbolMargin * 2);
}
else {
pathLength = unitLength + symbolMargin * 2;
}
output.symbolMargin = symbolMargin;
var sizeFix = (barFullLength > 0 ? 1 : -1) * (pathLength / 2);
var pathPosition = output.pathPosition = [];
pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
pathPosition[valueDim.index] = symbolPosition === 'start'
? sizeFix
: symbolPosition === 'end'
? barFullLength - sizeFix
: barFullLength / 2; // 'center'
if (symbolOffset) {
pathPosition[0] += symbolOffset[0];
pathPosition[1] += symbolOffset[1];
}
var bundlePosition = output.bundlePosition = [];
bundlePosition[categoryDim.index] = layout[categoryDim.xy];
bundlePosition[valueDim.index] = layout[valueDim.xy];
var barRectShape = output.barRectShape = zrUtil.extend({}, layout);
barRectShape[valueDim.wh] = barFullLength;
barRectShape[categoryDim.wh] = layout[categoryDim.wh];
var clipShape = output.clipShape = {x: 0, y: 0};
clipShape[valueDim.wh] = layout[valueDim.wh];
clipShape[categoryDim.wh] = layout[categoryDim.wh];
// If x or y is less than zero, show reversed shape.
var symbolScale = output.symbolScale = [symbolSize[0] / 2, symbolSize[1] / 2];
// Follow convention, 'right' and 'top' is the normal scale.
symbolScale[valueDim.index] *= opt.isHorizontal
? (barFullLength > 0 ? -1 : 1)
: (barFullLength >= 0 ? 1 : -1);
}
function createPath(symbolMeta) {
var path = symbolUtil.createSymbol(
symbolMeta.symbolType, -1, -1, 2, 2, symbolMeta.color
);
path.attr({
culling: true
});
return path;
}
function updateRepeatSymbols(bar, dataIndex, opt, symbolMeta) {
var bundle = bar.__pictorialBundle;
var animationModel = opt.animationModel;
var symbolSize = symbolMeta.symbolSize;
var lineWidth = symbolMeta.lineWidth;
var pathPosition = symbolMeta.pathPosition;
var valueDim = opt.valueDim;
var repeatTimes = symbolMeta.repeatTimes || 0;
var unit = symbolSize[opt.valueDim.index] + lineWidth + symbolMeta.symbolMargin * 2;
var index = 0;
eachPath(bar, function (path) {
if (index < repeatTimes) {
graphic.updateProps(path, makeTarget(index), animationModel, dataIndex);
}
else {
graphic.updateProps(path, {scale: [0, 0]}, animationModel, dataIndex, function () {
bundle.remove(path);
});
}
index++;
});
for (; index < repeatTimes; index++) {
var path = createPath(symbolMeta);
var target = makeTarget(index, true);
// FIXME
// start position?
path.attr({position: target.position, scale: [0, 0]});
graphic.initProps(path, {
scale: target.scale,
rotation: target.rotation
}, animationModel, dataIndex);
bundle.add(path);
}
function makeTarget(index) {
var position = pathPosition.slice();
position[valueDim.index] = unit * (index - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
return {
position: position,
scale: symbolMeta.symbolScale.slice(),
rotation: symbolMeta.rotation
};
}
}
// bar rect is used for label and enlarge hover area.
function updateBarRect(bar, dataIndex, opt, symbolMeta) {
var rectShape = zrUtil.extend({}, symbolMeta.barRectShape);
var barRect = bar.__pictorialBarRect;
if (!barRect) {
barRect = bar.__pictorialBarRect = new graphic.Rect({
z2: 2,
shape: rectShape,
style: {
stroke: 'transparent',
fill: 'transparent',
lineWidth: 0
}
});
// FIXME
// If all emphasis/normal through action.
barRect
.on('mouseover', onMouseOver)
.on('mouseout', onMouseOut);
bar.add(barRect);
}
else {
graphic.updateProps(barRect, {shape: rectShape}, opt.animationModel, dataIndex);
}
function onMouseOver() {
eachPath(bar, function (path) {
path.trigger('emphasis');
});
}
function onMouseOut() {
eachPath(bar, function (path) {
path.trigger('normal');
});
}
}
function createBar(data, dataIndex, itemModel, opt, symbolMeta, isUpdate) {
var valueDim = opt.valueDim;
// bar is the main element for each data.
var bar = new graphic.Group();
// bundle is used for location and clip.
var bundle = new graphic.Group();
bar.add(bundle);
bar.__pictorialBundle = bundle;
bundle.attr('position', symbolMeta.bundlePosition.slice());
if (symbolMeta.symbolRepeat) {
updateRepeatSymbols(bar, dataIndex, opt, symbolMeta);
}
else {
var path = bar.__pictorialMainPath = createPath(symbolMeta);
bundle.add(path);
path.attr({
position: symbolMeta.pathPosition.slice(),
scale: symbolMeta.symbolScale.slice(),
rotation: symbolMeta.rotation
});
}
var clipPath;
if (symbolMeta.symbolClip) {
clipPath = new graphic.Rect({
shape: zrUtil.extend({}, symbolMeta.clipShape)
});
bundle.setClipPath(clipPath);
bar.__pictorialClipPath = clipPath;
}
updateBarRect(bar, dataIndex, opt, symbolMeta);
// Three animation types: clip, position, scale.
var animationModel = opt.animationModel;
var updateMethod = isUpdate ? 'updateProps' : 'initProps';
if (animationModel) {
// clipPath animation
if (clipPath) {
var rectShape = clipPath.shape;
var target = {};
target[valueDim.wh] = rectShape[valueDim.wh];
rectShape[valueDim.wh] = 0;
graphic[updateMethod](clipPath, {shape: target}, animationModel, dataIndex);
}
// FIXME
// animation clip path?
// bar.position[valueDim.index] = layout[valueDim.xy];
// eachPath(bar, function (path) {
// var target;
// // scale ainmation
// if (symbolMeta.symbolRepeat) {
// target = {scale: path.scale.slice()};
// path.attr({
// position: path.position.slice(),
// scale: [0, 0]
// });
// }
// // // position ainmation
// // else {
// // target = {position: position};
// // path.attr({
// // scale: scale
// // });
// // // FIXME
// // // start pos?
// // path.position[valueDim.index] = layout[valueDim.xy];
// // }
// graphic[updateMethod](path, target, animationModel, dataIndex);
// });
}
return bar;
}
function updateBar(data, dataIndex, itemModel, opt, symbolMeta, bar) {
var clipPath = bar.__pictorialClipPath;
var mainPath;
var animationModel = opt.animationModel;
var bundle = bar.__pictorialBundle;
graphic.updateProps(
bundle, {position: symbolMeta.bundlePosition.slice()}, animationModel, dataIndex
);
if (symbolMeta.symbolRepeat) {
updateRepeatSymbols(bar, dataIndex, opt, symbolMeta);
}
else {
mainPath = bar.__pictorialMainPath;
}
updateBarRect(bar, dataIndex, opt, symbolMeta);
if (clipPath) {
graphic.updateProps(
clipPath,
{shape: zrUtil.extend({}, symbolMeta.clipShape)},
animationModel,
dataIndex
);
}
mainPath && graphic.updateProps(
mainPath,
{
position: symbolMeta.pathPosition.slice(),
scale: symbolMeta.symbolScale.slice(),
rotation: symbolMeta.rotation
},
animationModel,
dataIndex
);
}
function removeBar(dataIndex, opt, bar) {
// Not show text when animating
var labelRect = bar.__pictorialBarRect;
labelRect && (labelRect.style.text = '');
var clipPath = bar.__pictorialClipPath;
var targetEl = clipPath || bar.__pictorialBundle;
var targetObj = clipPath
? {shape: {width: 0}}
: {style: {opacity: 0}};
graphic.updateProps(
targetEl, targetObj, opt.animationModel, dataIndex,
function () {
bar.parent && bar.parent.remove(bar);
}
);
}
function getShapeStr(data, dataIndex, symbolMeta) {
return [
data.getItemVisual(dataIndex, 'symbol') || 'none',
!!symbolMeta.symbolRepeat,
!!symbolMeta.symbolClip
].join(':');
}
function eachPath(bar, cb, context) {
// Do not use Group#eachChild, because it do not support remove.
zrUtil.each(bar.__pictorialBundle.children(), function (el) {
el !== bar.__pictorialBarRect && cb.call(context, el);
});
}
function updateStyle(bar, dataIndex, itemModel, opt, symbolMeta) {
var color = symbolMeta.color;
// Color must be excluded.
// Because symbol provide setColor individually to set fill and stroke
var normalStyle = itemModel.getModel('itemStyle.normal').getItemStyle(['color']);
var hoverStyle = itemModel.getModel('itemStyle.emphasis').getItemStyle();
eachPath(bar, function (path) {
// PENDING setColor should be before setStyle!!!
path.setColor(color);
path.setStyle(zrUtil.defaults(
{
fill: color,
opacity: symbolMeta.opacity
},
normalStyle
));
graphic.setHoverStyle(path, hoverStyle);
});
var barRectHoverStyle = {};
var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.barFullLength > 0)];
var barRect = bar.__pictorialBarRect;
helper.setLabel(
barRect.style, barRectHoverStyle, itemModel,
color, opt.seriesModel, dataIndex, barPositionOutside
);
graphic.setHoverStyle(barRect, barRectHoverStyle);
}
return BarView;
});
\ No newline at end of file
src/chart/bar/helper.js 0 → 100644
浏览文件 @ 2283a443
define(function (require) {
var zrUtil = require('zrender/core/util');
var graphic = require('../../util/graphic');
var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'normal', 'barBorderWidth'];
var helper = {};
helper.setLabel = function (
normalStyle, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside
) {
var labelModel = itemModel.getModel('label.normal');
var hoverLabelModel = itemModel.getModel('label.emphasis');
if (labelModel.get('show')) {
setLabel(
normalStyle, labelModel, color,
zrUtil.retrieve(
seriesModel.getFormattedLabel(dataIndex, 'normal'),
seriesModel.getRawValue(dataIndex)
),
labelPositionOutside
);
}
else {
normalStyle.text = '';
}
if (hoverLabelModel.get('show')) {
setLabel(
hoverStyle, hoverLabelModel, color,
zrUtil.retrieve(
seriesModel.getFormattedLabel(dataIndex, 'emphasis'),
seriesModel.getRawValue(dataIndex)
),
labelPositionOutside
);
}
else {
hoverStyle.text = '';
}
};
function setLabel(style, model, color, labelText, labelPositionOutside) {
graphic.setText(style, model, color);
style.text = labelText;
if (style.textPosition === 'outside') {
style.textPosition = labelPositionOutside;
}
}
// In case width or height are too small.
helper.getLineWidth = function (itemModel, rawLayout) {
var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
};
return helper;
});
\ No newline at end of file
src/chart/pictorialBar.js 0 → 100644
浏览文件 @ 2283a443
define(function (require) {
var zrUtil = require('zrender/core/util');
require('../coord/cartesian/Grid');
require('./bar/PictorialBarSeries');
require('./bar/PictorialBarView');
var barLayoutGrid = require('../layout/barGrid');
var echarts = require('../echarts');
echarts.registerLayout(zrUtil.curry(barLayoutGrid, 'pictorialBar'));
echarts.registerVisual(zrUtil.curry(
require('../visual/symbol'), 'pictorialBar', 'roundRect', null
));
// In case developer forget to include grid component
require('../component/grid');
});
\ No newline at end of file
src/util/graphic.js
浏览文件 @ 2283a443
......@@ -417,12 +417,9 @@ define(function(require) {
if (animationEnabled) {
var postfix = isUpdate ? 'Update' : '';
var duration = animatableModel
&& animatableModel.getShallow('animationDuration' + postfix);
var animationEasing = animatableModel
&& animatableModel.getShallow('animationEasing' + postfix);
var animationDelay = animatableModel
&& animatableModel.getShallow('animationDelay' + postfix);
var duration = animatableModel.getShallow('animationDuration' + postfix);
var animationEasing = animatableModel.getShallow('animationEasing' + postfix);
var animationDelay = animatableModel.getShallow('animationDelay' + postfix);
if (typeof animationDelay === 'function') {
animationDelay = animationDelay(dataIndex);
}
......
src/util/number.js
浏览文件 @ 2283a443
......@@ -313,5 +313,16 @@ define(function (require) {
}
};
/**
* parseFloat NaNs numeric-cast false positives (null|true|false|"")
* ...but misinterprets leading-number strings, particularly hex literals ("0x...")
* subtraction forces infinities to NaN
* @param {*} v
* @return {boolean}
*/
number.isNumeric = function (v) {
return v - parseFloat(v) >= 0;
};
return number;
});
\ No newline at end of file
test/pictorial-repeat.html 0 → 100644
浏览文件 @ 2283a443
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="reset.css">
</head>
<body>
<style>
body {
}
.chart {
position: relative;
height: 500px;
max-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
font-size: 16px;
line-height: 30px;
font-weight: normal;
background: #A3AEFF;
}
</style>
<h2>vertical | no clip | symbol w/h ratio and margin adjust</h2>
<div class="chart" id="main1"></div>
<h2>vertical | clip | fixed repeatTimes</h2>
<div class="chart" id="main1.1"></div>
<h2>horizontal | clip | positive | rotate</h2>
<div class="chart" id="main2"></div>
<h2>horizontal | clip | negative | no animation</h2>
<div class="chart" id="main3"></div>
<script>
function makeChart(id, option, noDataZoom) {
require([
'echarts',
'echarts/chart/pictorialBar',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/component/grid',
'echarts/component/legend',
'echarts/component/tooltip',
'echarts/component/dataZoom'
], function (echarts) {
var main = document.getElementById(id);
if (main) {
var chartMain = document.createElement('div');
chartMain.style.cssText = 'height:100%';
main.appendChild(chartMain);
var chart = echarts.init(chartMain);
chart.setOption(option);
window.addEventListener('resize', chart.resize);
}
});
}
var pumpkin = 'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z';
var shoppingCart = 'path://M12 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 16v-12h-24c0-1.105-0.895-2-2-2h-6v2h4l1.502 12.877c-0.915 0.733-1.502 1.859-1.502 3.123 0 2.209 1.791 4 4 4h24v-2h-24c-1.105 0-2-0.895-2-2 0-0.007 0-0.014 0-0.020l26-3.98z';
var pentagram = 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z';
</script>
<script>
makeChart('main1', {
legend: {
data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
selected: {
'original bar': false,
'original bg': false
}
},
tooltip: {
},
yAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
axisTick: {show: false}
},
xAxis: {
splitLine: {show: false}
},
// animationDuration: 2000,
// animationDurationUpdate: 2000,
series: [{
name: 'data',
type: 'pictorialBar',
symbol: shoppingCart,
symbolRepeat: true,
symbolMargin: '40%',
symbolSize: ['100%', '80%'],
z: 10,
data: [12, 60, 54, '-', 23, -16, 0, 25]
}, {
name: 'data2',
type: 'pictorialBar',
symbol: shoppingCart,
symbolRepeat: true,
symbolMargin: '40%',
symbolSize: ['100%', '80%'],
z: 10,
data: [33, 1, 41, -18, 23, -56, 0, 15]
}, {
name: 'original bar',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [12, 60, 54, '-', 23, -16, 0, 25]
}, {
name: 'original bg',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [60, 60, 60, '-', 60, -30, 60, 60]
}]
});
</script>
<script>
makeChart('main1.1', {
legend: {
data: ['data', 'bg'],
selected: {
'original bar': false,
'original bg': false
}
},
tooltip: {
},
yAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
axisTick: {show: false},
axisLine: {show: false}
},
xAxis: {
splitLine: {show: false},
axisTick: {show: false},
axisLabel: {show: false},
axisLine: {show: false}
},
// animationDuration: 2000,
// animationDurationUpdate: 2000,
series: [{
name: 'bg',
type: 'pictorialBar',
symbol: pentagram,
symbolRepeat: 5,
itemStyle: {
normal: {
color: '#ddd'
}
},
barGap: '-100%',
data: [12, 60, 54, 25, 23, 16, 1, 25]
}, {
name: 'data',
type: 'pictorialBar',
symbol: pentagram,
symbolRepeat: 5,
symbolClip: true,
z: 10,
data: [12, 60, 54, 25, 23, 16, 1, 25]
}]
});
</script>
<script>
makeChart('main2', {
legend: {
data: ['data', 'bg', 'original bar', 'original bg'],
selected: {
'original bar': false,
'original bg': false
}
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'line'
// }
},
xAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
axisTick: {show: false}
},
yAxis: {
splitLine: {show: false}
},
series: [{
name: 'bg',
type: 'pictorialBar',
barGap: '-100%',
symbol: pumpkin,
symbolRotate: 30,
itemStyle: {
normal: {
color: '#ddd'
}
},
label: {
normal: {
show: true,
position: 'outside',
textStyle: {
color: '#c23531',
fontSize: 20
}
}
},
silent: true,
symbolRepeat: true,
symbolBoundingData: 60,
data: [12, 60, 54, '-', 23, 2, 0, 25]
}, {
name: 'data',
type: 'pictorialBar',
symbol: pumpkin,
symbolRotate: 30,
symbolRepeat: true,
symbolClip: true,
symbolBoundingData: 60,
z: 10,
data: [12, 60, 54, '-', 23, -2, 0, 25]
}, {
name: 'original bar',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [12, 60, 54, '-', 23, -2, 0, 25]
}, {
name: 'original bg',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [60, 60, 60, '-', 60, 60, 60, 60]
}]
});
</script>
<script>
makeChart('main3', {
animation: false,
legend: {
data: ['data', 'bg', 'original bar', 'original bg'],
selected: {
'original bar': false,
'original bg': false
}
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'line'
// }
},
xAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
axisTick: {show: false},
position: 'top'
},
yAxis: {
splitLine: {show: false}
},
series: [{
name: 'bg',
type: 'pictorialBar',
barGap: '-100%',
symbol: pumpkin,
itemStyle: {
normal: {
color: '#ddd'
}
},
label: {
normal: {
show: true,
position: 'outside',
textStyle: {
color: '#c23531',
fontSize: 20
}
}
},
silent: true,
symbolRepeat: true,
symbolClip: false,
symbolBoundingData: -60,
symbolRotate: 30,
data: [-12, -60, -54, '-', -23, -2, 0, -25]
}, {
name: 'data',
type: 'pictorialBar',
itemStyle: {
emphasis: {
color: 'blue'
}
},
symbol: pumpkin,
symbolRepeat: true,
symbolClip: true,
symbolRotate: 30,
symbolBoundingData: -60,
data: [-12, -60, -54, '-', -23, -2, 0, -25]
}, {
name: 'original bar',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [-12, -60, -54, '-', -23, -2, 0, -25]
}, {
name: 'original bg',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [-60, -60, -60, '-', -60, -60, -60, -60]
}]
});
</script>
</body>
</html>
\ No newline at end of file
test/pictorial-single.html 0 → 100644
浏览文件 @ 2283a443
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="reset.css">
</head>
<body>
<style>
body {
}
.chart {
position: relative;
height: 500px;
max-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
font-size: 16px;
line-height: 30px;
font-weight: normal;
background: #A3AEFF;
}
</style>
<h2>horizontal | no clip | symbolOffset</h2>
<div class="chart" id="main1"></div>
<script>
function makeChart(id, option, noDataZoom) {
require([
'echarts',
'echarts/chart/pictorialBar',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/component/grid',
'echarts/component/legend',
'echarts/component/tooltip',
'echarts/component/dataZoom'
], function (echarts) {
var main = document.getElementById(id);
if (main) {
var chartMain = document.createElement('div');
chartMain.style.cssText = 'height:100%';
main.appendChild(chartMain);
var chart = echarts.init(chartMain);
chart.setOption(option);
window.addEventListener('resize', chart.resize);
}
});
}
var pumpkin = 'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z';
var shoppingCart = 'path://M12 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 16v-12h-24c0-1.105-0.895-2-2-2h-6v2h4l1.502 12.877c-0.915 0.733-1.502 1.859-1.502 3.123 0 2.209 1.791 4 4 4h24v-2h-24c-1.105 0-2-0.895-2-2 0-0.007 0-0.014 0-0.020l26-3.98z';
var pentagram = 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z';
</script>
<script>
var rawData = [
{name: '驯鹿', velocity: 123},
{name: '光速', velocity: 60},
{name: '飞机', velocity: 25},
{name: '高铁', velocity: 18},
{name: '轮船', velocity: 12},
{name: '汽车', velocity: 9},
{name: '跑步', velocity: 2},
{name: '步行', velocity: 1}
];
makeChart('main1', {
legend: {
data: ['hill', 'glyph']
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'line'
// }
},
xAxis: {
data: rawData.map(function (item) {
return item.name;
}),
axisTick: {show: false},
axisLine: {show: false}
},
yAxis: {
splitLine: {show: false},
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {show: false}
},
animation: false,
series: [{
name: 'hill',
type: 'pictorialBar',
symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
data: rawData.map(function (item) {
return item.velocity;
})
}, {
name: 'glyph',
type: 'pictorialBar',
barGap: '-100%',
symbol: pumpkin,
symbolPosition: 'end',
symbolSize: [30, 30],
symbolOffset: [0, -35],
data: rawData.map(function (item) {
return item.velocity;
})
}]
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或