Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 7ce8b95c 编写于 作者: P pah100
浏览文件
操作

fix visual map align

上级 91740f82
隐藏空白更改
内联 并排
Showing with 516 addition and 985 deletion
src/component/visualMap/ContinuousView.js
浏览文件 @ 7ce8b95c
......@@ -7,6 +7,7 @@ define(function(require) {
var sliderMove = require('../helper/sliderMove');
var linearMap = numberUtil.linearMap;
var LinearGradient = require('zrender/graphic/LinearGradient');
var helper = require('./helper');
var each = zrUtil.each;
// Notice:
......@@ -151,15 +152,9 @@ define(function(require) {
var visualMapModel = this.visualMapModel;
var shapes = this._shapes;
var itemSize = visualMapModel.itemSize;
var api = this.api;
var orient = this._orient;
var useHandle = this._useHandle;
var itemAlign = this.getItemAlignByOrient(
orient === 'horizontal' ? 'vertical' : 'horizontal',
orient === 'horizontal' ? api.getWidth() : api.getHeight()
);
var itemAlign = helper.getItemAlign(visualMapModel, this.api, itemSize);
var barGroup = shapes.barGroup = this._createBarGroup(itemAlign);
// Bar
......@@ -193,7 +188,7 @@ define(function(require) {
/**
* @private
*/
_createHandle: function (barGroup, handleIndex, itemSize, textSize, orient, itemAlign) {
_createHandle: function (barGroup, handleIndex, itemSize, textSize, orient) {
var handleGroup = new graphic.Group({position: [itemSize[0], 0]});
var handleThumb = createPolygon(
createHandlePoints(handleIndex, textSize),
......@@ -391,12 +386,12 @@ define(function(require) {
return new graphic.Group(
(orient === 'horizontal' && !inverse)
? {scale: itemAlign === 'top' ? [1, 1] : [-1, 1], rotation: Math.PI / 2}
? {scale: itemAlign === 'bottom' ? [1, 1] : [-1, 1], rotation: Math.PI / 2}
: (orient === 'horizontal' && inverse)
? {scale: itemAlign === 'top' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2}
? {scale: itemAlign === 'bottom' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2}
: (orient === 'vertical' && !inverse)
? {scale: itemAlign === 'right' ? [1, -1] : [-1, -1]}
: {scale: itemAlign === 'right' ? [1, 1] : [-1, 1]}
? {scale: itemAlign === 'left' ? [1, -1] : [-1, -1]}
: {scale: itemAlign === 'left' ? [1, 1] : [-1, 1]}
);
},
......
src/component/visualMap/PiecewiseView.js
浏览文件 @ 7ce8b95c
......@@ -5,6 +5,7 @@ define(function(require) {
var graphic = require('../../util/graphic');
var symbolCreators = require('../../util/symbol');
var layout = require('../../util/layout');
var helper = require('./helper');
var PiecewiseVisualMapView = VisualMapView.extend({
......@@ -20,13 +21,11 @@ define(function(require) {
thisGroup.removeAll();
var visualMapModel = this.visualMapModel;
var api = this.api;
var ecWidth = api.getWidth();
var textGap = visualMapModel.get('textGap');
var textStyleModel = visualMapModel.textStyleModel;
var textFont = textStyleModel.getFont();
var textFill = textStyleModel.getTextColor();
var itemAlign = this.getItemAlignByOrient('horizontal', ecWidth);
var itemAlign = this._getItemAlign();
var itemSize = visualMapModel.itemSize;
var viewData = this._getViewData();
......@@ -56,11 +55,11 @@ define(function(require) {
if (showLabel) {
itemGroup.add(new graphic.Text({
style: {
x: itemAlign === 'right' ? itemSize[0] + textGap : -textGap,
x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
y: itemSize[1] / 2,
text: item.piece.text,
textBaseline: 'middle',
textAlign: itemAlign === 'right' ? 'left' : 'right',
textAlign: itemAlign,
textFont: textFont,
fill: textFill
}
......@@ -71,6 +70,26 @@ define(function(require) {
}
},
/**
* @private
*/
_getItemAlign: function () {
var visualMapModel = this.visualMapModel;
var modelOption = visualMapModel.option;
if (modelOption.orient === 'vertical') {
return helper.getItemAlign(
visualMapModel, this.api, visualMapModel.itemSize
);
}
else { // horizontal, most case left unless specifying right.
var align = modelOption.align;
if (!align || align === 'auto') {
align = 'left';
}
return align;
}
},
/**
* @private
*/
......
src/component/visualMap/VisualMapView.js
浏览文件 @ 7ce8b95c
......@@ -129,39 +129,6 @@ define(function (require) {
return visualObj;
},
/**
* @protected
*/
getItemAlignByOrient: function (itemOrient, ecSize) {
var modelOption = this.visualMapModel.option;
var itemAlign = modelOption.align;
var orient = modelOption.orient;
return itemOrient === 'horizontal'
? getAlign('x', ['left', 'right'])
: getAlign('y', ['top', 'bottom']);
function getAlign(dim, values) {
var dim2 = dim + '2';
var v = zrUtil.retrieve(modelOption[dim], modelOption[dim2], 0);
if (!itemAlign || itemAlign === 'auto') {
itemAlign = (orient === 'horizontal' && orient === itemOrient)
? 'right'
: has(dim, dim2, values[1])
? values[0]
: has(dim, dim2, values[0])
? values[1]
: (v > ecSize * 0.6 ? values[0] : values[1]);
}
return itemAlign;
}
function has(attr1, attr2, value) {
return modelOption[attr1] === value || modelOption[attr2] === value;
}
},
/**
* @protected
*/
......
src/component/visualMap/helper.js 0 → 100644
浏览文件 @ 7ce8b95c
define(function(require) {
var layout = require('../../util/layout');
var helper = {
/**
* @param {module:echarts/component/visualMap/VisualMapModel} visualMapModel\
* @param {module:echarts/ExtensionAPI} api
* @param {Array.<number>} itemSize always [short, long]
* @return {string} 'left' or 'right' or 'top' or 'bottom'
*/
getItemAlign: function (visualMapModel, api, itemSize) {
var modelOption = visualMapModel.option;
var itemAlign = modelOption.align;
if (itemAlign != null && itemAlign !== 'auto') {
return itemAlign;
}
// Auto decision align.
var ecSize = {width: api.getWidth(), height: api.getHeight()};
var realIndex = modelOption.orient === 'horizontal' ? 1 : 0;
var paramsSet = [
['left', 'right', 'width'],
['top', 'bottom', 'height']
];
var reals = paramsSet[realIndex];
var fakeValue = [0, null, 10];
var layoutInput = {};
for (var i = 0; i < 3; i++) {
layoutInput[paramsSet[1 - realIndex][i]] = fakeValue[i];
layoutInput[reals[i]] = i === 2 ? itemSize[0] : modelOption[reals[i]];
}
var rParam = [['x', 'width', 3], ['y', 'height', 0]][realIndex];
var rect = layout.getLayoutRect(layoutInput, ecSize, modelOption.padding);
return reals[
(rect.margin[rParam[2]] || 0) + rect[rParam[0]] + rect[rParam[1]] * 0.5
< ecSize[rParam[1]] * 0.5 ? 0 : 1
];
}
};
return helper;
});
test/lib/draggable.js
浏览文件 @ 7ce8b95c
......@@ -29,6 +29,9 @@
}
var mainEl = $(mainEl);
$('.draggable-control').remove();
var controlEl = $(
'<div class="draggable-control">DRAG<span class="draggable-label"></span></div>'
);
......@@ -44,6 +47,7 @@
'color': '#fff',
'cursor': 'pointer',
'font-size': '18px',
'box-shadow': '0 0 5px #333',
'-webkit-user-select': 'none',
'user-select': 'none'
});
......
test/visualMap-layout.html 0 → 100644
浏览文件 @ 7ce8b95c
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<link rel="stylesheet" href="reset.css">
<style>
#main {
position: relative;
min-width: 1080px;
}
.block {
text-align: center;
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
height: 400px;
margin: 20px;
}
.block .ec {
float: left;
width: 600px;
height: 100%;
border: 3px solid #777;
}
.block label {
margin-left: 500px;
display: block;
width: 400px;
height: 100%;
background: #777;
color: #fff;
font-size: 12px;
line-height: 18px;
border: 3px solid #777;
text-align: left;
overflow: auto;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
require([
'echarts',
'zrender/core/util',
'echarts/chart/scatter',
'echarts/component/grid',
'echarts/component/visualMap'
], function (echarts, zrUtil) {
makeChart({
show: true,
splitNumber: 7,
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
visualSelected: {
data: ['red', 'pink']
}
});
makeChart({
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
left: 200,
backgroundColor: '#eee',
visualSelected: {
data: ['red', 'pink']
}
});
makeChart({
splitNumber: 5,
right: 0,
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'symbol',
data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
}
});
makeChart({
splitNumber: 6,
top: 0,
left: 0,
orient: 'horizontal',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorSaturation'
}
});
makeChart({
splitNumber: 5,
top: 20,
right: 0,
orient: 'horizontal',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorLightness'
}
});
makeChart({
splitNumber: 6,
top: 40,
orient: 'horizontal',
align: 'right',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorAlpha'
}
});
// -------------------------------------------
makeChart({
show: true,
splitNumber: 7,
text: ['高1', '低'],
inverse: true,
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
visualSelected: {
data: ['red', 'pink']
}
});
makeChart({
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
left: 200,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
data: ['red', 'pink']
}
});
makeChart({
splitNumber: 5,
right: 0,
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'symbol',
data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
}
});
makeChart({
splitNumber: 6,
top: 0,
left: 0,
orient: 'horizontal',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorSaturation'
}
});
makeChart({
splitNumber: 5,
top: 20,
right: 0,
orient: 'horizontal',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorLightness'
}
});
makeChart({
splitNumber: 6,
top: 40,
orient: 'horizontal',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorAlpha'
}
});
// -------------------------------------------
makeChart({
show: true,
splitNumber: 0,
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
calculable: true,
inRange: {
color: ['red', 'pink']
}
});
makeChart({
left: 200,
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
inverse: true,
calculable: true,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
});
makeChart({
right: 0,
splitNumber: 5,
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
});
makeChart({
left: 0,
top: 0,
orient: 'horizontal',
splitNumber: 6,
calculable: true,
inverse: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorSaturation'
});
makeChart({
right: 0,
top: 20,
orient: 'horizontal',
splitNumber: 5,
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorLightness'
});
makeChart({
top: 40,
splitNumber: 6,
orient: 'horizontal',
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
});
makeChart({
left: 'center',
top: 'bottom',
orient: 'horizontal',
splitNumber: 6,
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
});
// -------------------------------------------
makeChart({
show: true,
splitNumber: 7,
text: ['高2', '低'],
backgroundColor: '#eee',
inverse: true,
padding: [10, 30, 5, 40],
calculable: true,
inRange: {
color: ['red', 'pink']
}
});
makeChart({
left: 200,
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
inverse: true,
text: ['高', '低'],
calculable: true,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
});
makeChart({
right: 0,
splitNumber: 5,
text: ['高', '低'],
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
});
makeChart({
left: 0,
top: 0,
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 6,
calculable: true,
inverse: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorSaturation'
});
makeChart({
right: 0,
top: 20,
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 5,
align: 'bottom',
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorLightness'
});
makeChart({
top: 40,
splitNumber: 6,
orient: 'horizontal',
text: ['高', '低'],
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
});
makeChart({
left: 'center',
bottom: 0,
orient: 'horizontal',
splitNumber: 6,
text: ['高', '低'],
calculable: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
});
function makeChart(opt) {
var label = JSON.stringify(opt, null, 4);
opt = {visualMap: opt || {}};
var containerEl = document.getElementById('main');
var el = document.createElement('div');
el.className = 'block';
el.innerHTML = '<div class="ec"></div><label><pre>' + encodeHTML(label) + '</pre></label>';
containerEl.appendChild(el);
var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
chart.setOption(zrUtil.merge(opt, getOption()));
}
function encodeHTML(source) {
return source == null
? ''
: String(source)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
};
function getOption() {
return {
grid: {top: 'center', left: 'center', width: 50, height: 50},
xAxis: {type: 'value', splitLine: {show: false}},
yAxis: {type: 'value', splitLine: {show: false}},
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: 5,
data: []
}
]
};
}
});
</script>
</body>
</html>
\ No newline at end of file
test/visualMap-scatter-layout1-text.html 已删除 100644 → 0
浏览文件 @ 91740f82
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/visualMapPiecewise'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
top: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
top: '26%',
bottom: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
visualMap: [
{
show: true,
splitNumber: 7,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
visualSelected: {
data: ['red', 'pink']
}
},
{
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
left: 200,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
data: ['red', 'pink']
}
},
{
splitNumber: 5,
left: 'right',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'symbol',
data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
}
},
{
splitNumber: 6,
top: 'top',
left: 'left',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorSaturation'
}
},
{
splitNumber: 5,
top: 20,
left: 'right',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorLightness'
}
},
{
splitNumber: 6,
top: 40,
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorAlpha'
}
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/visualMap-scatter-layout1.html 已删除 100644 → 0
浏览文件 @ 91740f82
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/visualMapPiecewise'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
top: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
top: '26%',
bottom: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
visualMap: [
{
show: true,
splitNumber: 7,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
visualSelected: {
data: ['red', 'pink']
}
},
{
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
left: 200,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
visualSelected: {
data: ['red', 'pink']
}
},
{
splitNumber: 5,
left: 'right',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'symbol',
data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
}
},
{
splitNumber: 6,
top: 'top',
left: 'left',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorSaturation'
}
},
{
splitNumber: 5,
top: 20,
left: 'right',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorLightness'
}
},
{
splitNumber: 6,
top: 40,
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
visualSelected: {
type: 'colorAlpha'
}
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/visualMap-scatter-layout2-text.html 已删除 100644 → 0
浏览文件 @ 91740f82
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/visualMapContinuous'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
top: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
top: '26%',
bottom: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
visualMap: [
{
show: true,
splitNumber: 7,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
calculable: true,
inRange: {
color: ['red', 'pink']
}
},
{
left: 200,
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
inverse: true,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
left: 'right',
splitNumber: 5,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
x: 'left',
y: 'top',
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 6,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
inverse: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorSaturation'
},
{
left: 'right',
top: 20,
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 5,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorLightness'
},
{
top: 40,
splitNumber: 6,
orient: 'horizontal',
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
},
{
left: 'center',
top: 'bottom',
orient: 'horizontal',
splitNumber: 6,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/visualMap-scatter-layout2.html 已删除 100644 → 0
浏览文件 @ 91740f82
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/visualMapContinuous'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
top: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
top: '26%',
bottom: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
visualMap: [
{
show: true,
splitNumber: 0,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
calculable: true,
inRange: {
color: ['red', 'pink']
}
},
{
left: 200,
show: true,
pieces: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
inverse: true,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
left: 'right',
splitNumber: 5,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
left: 'left',
top: 'top',
orient: 'horizontal',
splitNumber: 6,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
inverse: true,
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorSaturation'
},
{
left: 'right',
top: 20,
orient: 'horizontal',
splitNumber: 5,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorLightness'
},
{
top: 40,
splitNumber: 6,
orient: 'horizontal',
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
},
{
left: 'center',
top: 'bottom',
orient: 'horizontal',
splitNumber: 6,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 3,
backgroundColor: '#eee',
inRange: 'colorAlpha'
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</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.
先完成此消息的编辑！
想要评论请 注册 或