提交 22477f6f 编写于 作者: P pah100

Merge branch 'master' of https://github.com/pissang/echarts-next

......@@ -28,7 +28,6 @@ define(function (require) {
var cartesian = seriesModel.coordinateSystem;
var baseAxis = cartesian.getBaseAxis();
var isInverse = cartesian.getOtherAxis(baseAxis).inverse;
var isHorizontal = baseAxis.isHorizontal();
var enableAnimation = ecModel.get('animation');
......@@ -126,21 +125,26 @@ define(function (require) {
this._data = data;
},
remove: function () {
if (this._data) {
var group = this.group;
this._data.eachItemGraphicEl(function (el) {
// Not show text when animating
el.style.text = '';
el.animateTo({
shape: {
width: 0
}
}, 300, 'cubicOut',
function () {
group.remove(el);
remove: function (ecModel) {
var group = this.group;
if (ecModel.get('animation')) {
if (this._data) {
this._data.eachItemGraphicEl(function (el) {
// Not show text when animating
el.style.text = '';
el.animateTo({
shape: {
width: 0
}
}, 300, 'cubicOut',
function () {
group.remove(el);
});
});
});
}
}
else {
group.removeAll();
}
}
});
......
......@@ -397,11 +397,11 @@ define(function(require) {
return clipPath;
},
remove: function () {
remove: function (ecModel) {
var group = this.group;
group.remove(this._polyline);
group.remove(this._polygon);
this._dataSymbol.remove(true);
this._dataSymbol.remove(ecModel.get('animation'));
}
});
});
\ No newline at end of file
......@@ -44,7 +44,7 @@ define(function (require) {
var itemStyle = itemStyleModel.getItemStyle();
var hoverItemStyle = hoverItemStyleModel.getItemStyle();
// FIXME 兼容 2.0
// Competitable with 2.0
var areaStylePath = 'areaStyle.color';
itemStyle.fill = itemStyleModel.get(areaStylePath);
hoverItemStyle.fill = hoverItemStyleModel.get(areaStylePath);
......@@ -106,6 +106,7 @@ define(function (require) {
cy: point[1],
r: 3
},
silent: true,
z2: 10
});
......
......@@ -17,8 +17,8 @@ define(function (require) {
);
},
remove: function () {
this._dataSymbol.remove(true);
remove: function (ecModel) {
this._dataSymbol.remove(ecModel.get('animation'));
}
});
});
\ No newline at end of file
......@@ -55,7 +55,8 @@ define(function (require) {
r: radiusExtent[1]
},
style: lineStyleModel.getLineStyle(),
z2: 1
z2: 1,
silent: true
});
circle.style.fill = null;
......
......@@ -550,10 +550,7 @@ define(function (require) {
var labelPrecision = dataZoomModel.get('labelPrecision');
if (labelPrecision == null) {
var dataExtent = axis.scale.getExtent();
labelPrecision = Math.abs(
Math.floor(Math.log(dataExtent[1] - dataExtent[0]) / Math.LN10)
);
labelPrecision = axis.getFormatPrecision();
}
return (value == null && isNaN(value))
......
......@@ -3,6 +3,8 @@ define(function(require) {
'use strict';
var echarts = require('../echarts');
var graphic = require('../util/graphic');
var layout = require('../util/layout');
// Model
echarts.extendComponentModel({
......@@ -10,35 +12,61 @@ define(function(require) {
type: 'title',
defaultOption: {
zlevel: 0, // 一级层叠
z: 6, // 二级层叠
// 一级层叠
zlevel: 0,
// 二级层叠
z: 6,
show: true,
text: '',
// link: null, // 超链接跳转
// target: null, // 仅支持self | blank
// 超链接跳转
// link: null,
// 仅支持self | blank
// target: null,
subtext: '',
// sublink: null, // 超链接跳转
// subtarget: null, // 仅支持self | blank
x: 'left', // 水平安放位置,默认为左对齐,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
//textAlign: null // 水平对齐方式,默认根据x设置自动调整
// 超链接跳转
// sublink: null,
// 仅支持self | blank
// subtarget: null,
// 水平安放位置,默认为左对齐,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
x: 'left',
// 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
y: 'top',
// 水平对齐
// 'auto' | 'left' | 'right'
// 默认根据 x 的位置判断是左对齐还是右对齐
//textAlign: null
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框)
padding: 5, // 标题内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
itemGap: 5, // 主副标题纵向间隔,单位px,默认为10,
// 标题边框颜色
borderColor: '#ccc',
// 标题边框线宽,单位px,默认为0(无边框)
borderWidth: 0,
// 标题内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
padding: 5,
// 主副标题纵向间隔,单位px,默认为10,
itemGap: 10,
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
// 主标题文字颜色
color: '#333'
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
// 副标题文字颜色
color: '#aaa'
}
}
});
......@@ -49,7 +77,86 @@ define(function(require) {
type: 'title',
render: function (titleModel, ecModel, api) {
this.group.removeAll();
if (!titleModel.get('show')) {
return;
}
var group = this.group;
var textStyleModel = titleModel.getModel('textStyle');
var subtextStyleModel = titleModel.getModel('subtextStyle');
var textAlign = titleModel.get('textAlign');
var textEl = new graphic.Text({
style: {
text: titleModel.get('text'),
textFont: textStyleModel.getFont(),
fill: textStyleModel.get('color'),
textBaseline: 'top'
}
});
var textRect = textEl.getBoundingRect();
var subTextEl = new graphic.Text({
style: {
text: titleModel.get('subtext'),
textFont: subtextStyleModel.getFont(),
fill: subtextStyleModel.get('color'),
y: textRect.height + titleModel.get('itemGap'),
textBaseline: 'top'
}
});
var link = titleModel.get('link');
var sublink = titleModel.get('sublink');
textEl.silent = !link;
subTextEl.silent = !sublink;
if (link) {
textEl.on('click', function () {
window.open(link, titleModel.get('target'));
});
}
if (sublink) {
subTextEl.on('click', function () {
window.open(link, titleModel.get('subtarget'));
});
}
group.add(textEl);
group.add(subTextEl);
layout.positionGroup(
group, {
x: titleModel.get('x'),
y: titleModel.get('y'),
x2: titleModel.get('x2'),
y2: titleModel.get('y2')
}, {
width: api.getWidth(),
height: api.getHeight()
}, null, true, false
);
// Adjust text align based on position
if (!textAlign) {
var percent = group.position[0] / api.getWidth();
if (percent < 0.2) {
textAlign = 'left';
}
else if (percent < 0.6) {
textAlign = 'center';
}
else {
textAlign = 'right';
}
}
textEl.style.textAlign = subTextEl.style.textAlign = textAlign;
}
});
});
\ No newline at end of file
......@@ -4,6 +4,9 @@ define(function (require) {
var TooltipContent = require('./tooltip/TooltipContent');
var graphic = require('../util/graphic');
var zrUtil = require('zrender/core/util');
var formatUtil = require('../util/format');
require('./tooltip/TooltipModel');
function getAxisPointerKey(coordName, axisType) {
return coordName + axisType;
......@@ -39,8 +42,6 @@ define(function (require) {
};
}
require('./tooltip/TooltipModel');
require('../echarts').extendComponentView({
type: 'tooltip',
......@@ -68,22 +69,59 @@ define(function (require) {
this._tooltipContent.hide();
var seriesGroupByCoordSys = {};
// Prepare data for axis trigger
var seriesGroupByAxis = {};
ecModel.eachSeries(function (seriesModel) {
var coordSys = seriesModel.coordinateSystem;
if (coordSys) {
var name = coordSys.name;
seriesGroupByCoordSys[name] = seriesGroupByCoordSys[name] || {
coordSys: coordSys,
series: []
};
seriesGroupByCoordSys[name].series.push(seriesModel);
if (!coordSys) {
return;
}
var coordSysType = coordSys.type;
var baseAxis;
var key;
// Only cartesian2d and polar support axis trigger
if (coordSysType === 'cartesian2d') {
// FIXME `axisPointer.axis` is not baseAxis
baseAxis = coordSys.getBaseAxis();
var baseDim = baseAxis.dim;
var axisIndex = seriesModel.get(baseDim + 'AxisIndex');
key = baseDim + axisIndex;
}
else if (coordSysType === 'polar') {
baseAxis = coordSys.getBaseAxis();
key = baseAxis.dim + coordSys.name;
}
if (!key) {
return;
}
seriesGroupByAxis[key] = seriesGroupByAxis[key] || {
coordSys: [],
series: []
};
seriesGroupByAxis[key].coordSys.push(coordSys);
seriesGroupByAxis[key].series.push(seriesModel);
}, this);
this._coordinateSystems = seriesGroupByCoordSys;
this._seriesGroupByAxis = seriesGroupByAxis;
var crossText = this._crossText;
if (crossText) {
this.group.add(crossText);
}
},
/**
* mousemove handler
* @param {Object} e
* @private
*/
_mouseMove: function (e) {
var el = e.target;
var tooltipModel = this._tooltipModel;
......@@ -101,51 +139,60 @@ define(function (require) {
return;
}
var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex);
this._showItemTooltip(seriesModel, el.dataIndex, e);
}
else {
this._showAxisTooltip(e);
}
// Always show item tooltip if mouse is on the element with dataIndex
if (el && el.dataIndex) {
var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex);
this._showItemTooltip(seriesModel, el.dataIndex, e);
}
},
/**
* Show tooltip on axis
* @param {Object} e
* @private
*/
_showAxisTooltip: function (e) {
var tooltipModel = this._tooltipModel;
var axisPointerModel = tooltipModel.getModel('axisPointer');
zrUtil.each(this._coordinateSystems, function (item) {
zrUtil.each(this._seriesGroupByAxis, function (item) {
// Try show the axis pointer
this.group.show();
var coordSys = item.coordSys;
var allCoordSys = item.coordSys;
var coordSys = allCoordSys[0];
// If mouse position is not in the grid or polar
var point = [e.offsetX, e.offsetY];
if (coordSys && !coordSys.containPoint(point)) {
if (!coordSys.containPoint(point)) {
// Hide axis pointer
this._hide();
return;
}
// Make sure point is discrete on cateogry axis
var value = coordSys.pointToData(point);
var value = coordSys.pointToData(point, true);
point = coordSys.dataToPoint(value);
if (coordSys.type === 'cartesian2d') {
this._showCartesianPointer(axisPointerModel, coordSys, point);
this._showCartesianPointer(axisPointerModel, allCoordSys, point);
}
else if (coordSys.type === 'polar') {
this._showPolarPointer(axisPointerModel, coordSys, point);
this._showPolarPointer(axisPointerModel, allCoordSys, point);
}
this._showSeriesTooltip(coordSys, item.series, point, value);
if (axisPointerModel.get('type') !== 'cross') {
this._showSeriesTooltip(coordSys, item.series, point, value);
}
}, this);
},
......@@ -153,25 +200,30 @@ define(function (require) {
/**
* Show tooltip on axis of cartesian coordinate
* @param {module:echarts/model/Model} axisPointerModel
* @param {module:echarts/coord/cartesian/Cartesian2D} cartesian
* @param {Array.<module:echarts/coord/cartesian/Cartesian2D>} cartesians
* @param {Array.<number>} point
* @private
*/
_showCartesianPointer: function (axisPointerModel, cartesian, point) {
_showCartesianPointer: function (axisPointerModel, cartesians, point) {
var self = this;
var cateogryAxis = cartesian.getAxesByScale('ordinal')[0];
var axisPointerType = axisPointerModel.get('type');
var cartesian = cartesians[0];
if (axisPointerType === 'cross') {
moveGridLine('x', point, cartesian.getAxis('y').getExtent());
moveGridLine('y', point, cartesian.getAxis('x').getExtent());
this._updateCrossText(cartesian, point, axisPointerModel);
}
else {
// Use the first cartesian
var baseAxis = cartesian.getBaseAxis();
var axisType = axisPointerModel.get('axis');
if (axisType === 'auto') {
axisType = (cateogryAxis && cateogryAxis.dim) || 'x';
axisType = (baseAxis && baseAxis.dim) || 'x';
}
var otherAxis = cartesian.getAxis(axisType === 'x' ? 'y' : 'x');
......@@ -226,20 +278,24 @@ define(function (require) {
/**
* Show tooltip on axis of polar coordinate
* @param {module:echarts/model/Model} axisPointerModel
* @param {module:echarts/coord/polar/Polar} polar
* @param {Array.<module:echarts/coord/polar/Polar>} polars
* @param {Array.<number>} point
*/
_showPolarPointer: function (axisPointerModel, polar, point) {
_showPolarPointer: function (axisPointerModel, polars, point) {
var self = this;
var axisPointerType = axisPointerModel.get('type');
var polar = polars[0];
var angleAxis = polar.getAngleAxis();
var radiusAxis = polar.getRadiusAxis();
if (axisPointerType === 'cross') {
movePolarLine('angle', point, angleAxis.getExtent());
movePolarLine('radius', point, radiusAxis.getExtent());
movePolarLine('angle', point, radiusAxis.getExtent());
movePolarLine('radius', point, angleAxis.getExtent());
this._updateCrossText(polar, point, axisPointerModel);
}
else {
var axisType = axisPointerModel.get('axis');
......@@ -319,6 +375,50 @@ define(function (require) {
}
},
_updateCrossText: function (coordSys, point, axisPointerModel) {
var crossStyleModel = axisPointerModel.getModel('crossStyle');
var textStyleModel = crossStyleModel.getModel('textStyle');
var tooltipModel = this._tooltipModel;
var text = this._crossText;
if (!text) {
text = this._crossText = new graphic.Text({
style: {
textAlign: 'left',
textBaseline: 'bottom'
}
});
this.group.add(text);
}
var value = coordSys.pointToData(point);
var dims = coordSys.dimensions;
value = zrUtil.map(value, function (val, idx) {
var axis = coordSys.getAxis(dims[idx]);
if (axis.type === 'category') {
val = axis.scale.getLabel(val);
}
else {
val = formatUtil.addCommas(
val.toFixed(axis.getFormatPrecision())
);
}
return val;
});
text.setStyle({
fill: textStyleModel.get('color') || crossStyleModel.get('color'),
textFont: textStyleModel.getFont(),
text: value.join(', '),
x: point[0] + 5,
y: point[1] - 5
});
text.z = tooltipModel.get('z');
text.zlevel = tooltipModel.get('zlevel');
},
/**
* Hide axis tooltip
*/
......@@ -327,7 +427,9 @@ define(function (require) {
},
_getPointerElement: function (coordSys, pointerModel, axisType) {
var z = this._tooltipModel.get('z');
var tooltipModel = this._tooltipModel;
var z = tooltipModel.get('z');
var zlevel = tooltipModel.get('zlevel');
var axisPointers = this._axisPointers;
var key = getAxisPointerKey(coordSys.name, axisType);
if (axisPointers[key]) {
......@@ -341,7 +443,7 @@ define(function (require) {
var style = styleModel[isShadow ? 'getAreaStyle' : 'getLineStyle']();
var elementType = coordSys.type === 'polar'
? (isShadow ? 'Sector' : 'Circle')
? (isShadow ? 'Sector' : (axisType === 'radius' ? 'Circle' : 'Line'))
: (isShadow ? 'Rect' : 'Line');
isShadow ? (style.stroke = null) : (style.fill = null);
......@@ -349,6 +451,7 @@ define(function (require) {
var el = axisPointers[key] = new graphic[elementType]({
style: style,
z: z,
zlevel: zlevel,
silent: true
});
......@@ -362,10 +465,10 @@ define(function (require) {
var tooltipContent = this._tooltipContent;
var data = seriesList[0].getData();
var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
if (categoryAxis && rootTooltipModel.get('showContent')) {
var rank = value[categoryAxis.dim === 'x' ? 0 : 1];
var dataIndex = data.indexOf(categoryAxis.dim, rank);
var baseAxis = coordSys.getBaseAxis();
if (baseAxis && rootTooltipModel.get('showContent')) {
var rank = value[baseAxis.dim === 'x' ? 0 : 1];
var dataIndex = data.indexOf(baseAxis.dim, rank);
var html = data.getName(dataIndex) + '<br />'
+ zrUtil.map(seriesList, function (series) {
......
......@@ -80,7 +80,11 @@ define(function (require) {
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
type: 'dashed',
// TODO formatter
textStyle: {}
},
// 阴影指示器样式设置
......
define(function (require) {
var linearMap = require('../util/number').linearMap;
var numberUtil = require('../util/number')
var linearMap = numberUtil.linearMap;
var zrUtil = require('zrender/core/util');
function fixExtentWithBands(extent, nTick) {
......@@ -82,6 +83,23 @@ define(function (require) {
return ret;
},
/**
* Get precision used for formatting
* @return {number}
*/
getFormatPrecision: function () {
var log = Math.log;
var LN10 = Math.LN10;
var dataExtent = this.scale.getExtent();
var extent = this._extent;
var dataQuantity = Math.floor(log(dataExtent[1] - dataExtent[0]) / LN10);
var sizeQuantity = Math.ceil(log(Math.abs(extent[1] - extent[0])) / LN10);
return Math.max(
-dataQuantity + sizeQuantity,
0
);
},
/**
* Set coord extent
* @param {number} min
......
......@@ -84,12 +84,13 @@ define(function(require) {
/**
* @param {Array.<number>} point
* @param {boolean} [clamp=false]
* @return {Array.<number>}
*/
pointToData: function (point) {
pointToData: function (point, clamp) {
return [
this.getAxis('x').coordToData(point[0]),
this.getAxis('y').coordToData(point[1])
this.getAxis('x').coordToData(point[0], clamp),
this.getAxis('y').coordToData(point[1], clamp)
];
},
......
......@@ -154,25 +154,27 @@ define(function(require) {
* Convert a single data item to (x, y) point.
* Parameter data is an array which the first element is radius and the second is angle
* @param {Array.<number>} data
* @param {boolean} [clamp=false]
* @return {Array.<number>}
*/
dataToPoint: function (data) {
dataToPoint: function (data, clamp) {
return this.coordToPoint([
this._radiusAxis.dataToRadius(data[0]),
this._angleAxis.dataToAngle(data[1])
this._radiusAxis.dataToRadius(data[0], clamp),
this._angleAxis.dataToAngle(data[1], clamp)
])
},
/**
* Convert a (x, y) point to data
* @param {Array.<number>} point
* @param {boolean} [clamp=false]
* @return {Array.<number>}
*/
pointToData: function (point) {
pointToData: function (point, clamp) {
var coord = this.pointToCoord(point);
return [
this._radiusAxis.radiusToData(coord[0]),
this._angleAxis.angleToData(coord[1])
this._radiusAxis.radiusToData(coord[0], clamp),
this._angleAxis.angleToData(coord[1], clamp)
];
},
......
......@@ -460,12 +460,14 @@ define(function (require) {
/**
* @param {number} idx
* @param {boolean} [notDefaultIdx=false]
* @return {string}
*/
listProto.getName = function (idx) {
listProto.getName = function (idx, notDefaultIdx) {
var nameList = this._nameList;
var rawIndex = this.indices[idx];
return nameList[rawIndex] || (rawIndex + '');
return nameList[rawIndex]
|| (notDefaultIdx ? '' : (rawIndex + ''));
};
......
......@@ -423,7 +423,7 @@ define(function (require) {
// Remove groups of charts
zrUtil.each(this._chartsList, function (chart) {
if (!chart.__keepAlive) {
chart.remove();
chart.remove(ecModel, api);
}
}, this);
},
......
......@@ -118,11 +118,15 @@ define(function(require) {
var data = this._data;
var value = data.getRawValue(dataIndex);
var formattedValue = zrUtil.isArray(value)
? zrUtil.map(value, addCommas) : addCommas(value);
var name = data.getName(dataIndex);
return !mutipleSeries ? (encodeHTML(this.name) + '<br />'
+ encodeHTML(name) + ' : ' + formattedValue)
? zrUtil.map(value, addCommas).join(', ') : addCommas(value);
var name = data.getName(dataIndex, true);
return !mutipleSeries
? (encodeHTML(this.name) + '<br />'
+ (name
? encodeHTML(name) + ' : ' + formattedValue
: formattedValue)
)
: (encodeHTML(this.name) + ' : ' + formattedValue);
},
......
......@@ -93,10 +93,10 @@ define(function (require) {
*/
setExtent: function (start, end) {
var thisExtent = this._extent;
if (! isNaN(start)) {
if (!isNaN(start)) {
thisExtent[0] = start;
}
if (! isNaN(end)) {
if (!isNaN(end)) {
thisExtent[1] = end;
}
},
......@@ -158,6 +158,15 @@ define(function (require) {
return labels;
},
/**
* @param {number} n
* @return {number}
*/
// FIXME addCommas
getLabel: function (data) {
return data;
},
/**
* Update interval and extent of intervals for nice ticks
* Algorithm from d3.js
......
......@@ -142,6 +142,8 @@ define(function (require) {
/**
* Get item on rank n
* @param {number} n
* @return {string}
*/
getLabel: function (n) {
return this._data[n];
......
......@@ -59,9 +59,12 @@ define(function(require) {
* @param {number|string} [positionInfo.y2]
* @param {Object} containerRect
* @param {string|number} margin
* @param {boolean} [notAlignX=false]
* @param {boolean} [notAlignY=false]
*/
layout.positionGroup = function (
group, positionInfo, containerRect, margin
group, positionInfo, containerRect, margin,
notAlignX, notAlignY
) {
margin = formatUtil.normalizeCssArray(margin || 0);
......@@ -89,22 +92,26 @@ define(function(require) {
y = y2 - height;
}
switch (positionInfo.x || positionInfo.x2) {
case 'center':
x = containerWidth / 2 - width / 2;
break;
case 'right':
x = containerWidth - width;
break;
if (!notAlignX) {
switch (positionInfo.x || positionInfo.x2) {
case 'center':
x = containerWidth / 2 - width / 2;
break;
case 'right':
x = containerWidth - width;
break;
}
}
switch (positionInfo.y || positionInfo.y2) {
case 'middle':
y = containerHeight / 2 - height / 2;
break;
case 'bottom':
y = containerHeight - height;
break;
if (!notAlignY) {
switch (positionInfo.y || positionInfo.y2) {
case 'middle':
y = containerHeight / 2 - height / 2;
break;
case 'bottom':
y = containerHeight - height;
break;
}
}
group.position = [
......
define(function (require) {
var zrUtil = require('zrender/core/util');
var Group = require('zrender/container/Group');
var componentUtil = require('../util/component');
......@@ -27,7 +26,7 @@ define(function (require) {
render: function (seriesModel, ecModel, api) {},
remove: function () {
remove: function (ecModel, api) {
this.group.removeAll();
},
......
define(function (require) {
var zrUtil = require('zrender/core/util');
var Group = require('zrender/container/Group');
var componentUtil = require('../util/component');
......
......@@ -3,6 +3,7 @@
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
......
......@@ -20,6 +20,8 @@
'geoJson/china_geo',
'echarts/chart/map',
'echarts/component/title',
'echarts/component/legend',
'echarts/component/geo',
'echarts/component/dataRange'
......@@ -40,7 +42,7 @@
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
......
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/bar',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip'
], function (echarts) {
var itemStyle = {
normal: {
label: {
show: false,
position: 'outside'
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
console.profile('setOption');
var main = document.getElementById('main');
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
div.style.cssText = 'width: 400px; height:200px;';
main.appendChild(div);
var chart = echarts.init(div, null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var j = 0; j < 10; j++) {
xAxisData.push('类目' + j);
data1.push((Math.random() * 5).toFixed(2));
data2.push(-Math.random().toFixed(2));
data3.push((Math.random() + 0.5).toFixed(2));
data4.push((Math.random() + 0.3).toFixed(2));
}
chart.setOption({
animation: false,
// legend: {
// data: [{
// name: 'bar'
// }, 'bar2', 'bar3', 'bar4'],
// selected: {
// // 'bar': false
// },
// orient: 'vertical',
// x: 'right',
// y: 'bottom',
// align: 'right'
// },
tooltip: {},
xAxis: {
data: xAxisData,
axisLine: {
onZero: true
},
splitLine: {
show: false
},
splitArea: {
show: false
}
},
yAxis: {
inverse: true,
splitArea: {
show: false
}
},
series: [{
name: 'bar',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data1
}, {
name: 'bar2',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data2
}, {
name: 'bar3',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data: data3
}, {
name: 'bar4',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data: data4
}]
});
}
console.profileEnd('setOption');
})
</script>
</body>
</html>
\ No newline at end of file
......@@ -18,7 +18,8 @@
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/polar'
'echarts/component/polar',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
......@@ -38,6 +39,12 @@
data: ['line']
},
polar: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value'
},
......
......@@ -30,10 +30,14 @@
var data2 = [];
var data3 = [];
for (var i = 0; i < 100; i++) {
data1.push([Math.random() * 5, Math.random() * 4, Math.random().toFixed(2)]);
data2.push([Math.random() * 10, Math.random() * 5, (Math.random() + 0.3).toFixed(2)]);
data3.push([Math.random() * 15, Math.random() * 10, Math.random().toFixed(2)]);
var random = function (max) {
return (Math.random() * max).toFixed(3);
}
for (var i = 0; i < 200; i++) {
data1.push([random(5), random(5), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
chart.setOption({
......
......@@ -76,7 +76,11 @@ var theme = {
// 类目轴
categoryAxis: {
axisLine: { // 坐标轴线
show: false
show: true,
lineStyle: {
width: 1,
color: ['#aaa']
}
},
axisTick: { // 坐标轴小标记
show: false
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册