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
此差异已折叠。
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.
先完成此消息的编辑！
想要评论请 注册 或