Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 cfaaed87 编写于 作者: L lang
浏览文件
操作

Gauge

上级 f1626be4
隐藏空白更改
内联 并排
Showing with 664 addition and 5 deletion
src/chart/gauge.js 0 → 100644
浏览文件 @ cfaaed87
define(function (require) {
require('./gauge/GaugeSeries');
require('./gauge/GaugeView');
});
\ No newline at end of file
src/chart/gauge/GaugeSeries.js 0 → 100644
浏览文件 @ cfaaed87
define(function (require) {
var List = require('../../data/List');
var SeriesModel = require('../../model/Series');
var zrUtil = require('zrender/core/util');
var GaugeSeries = SeriesModel.extend({
type: 'series.gauge',
getInitialData: function (option, ecModel) {
var list = new List(['value'], this);
var dataOpt = option.data || [];
if (!zrUtil.isArray(dataOpt)) {
dataOpt = [dataOpt];
}
// Only use the first data item
list.initData(dataOpt && dataOpt.slice(0, 1));
return list;
},
defaultOption: {
zlevel: 0,
z: 2,
// 默认全局居中
center: ['50%', '50%'],
clickable: true,
legendHoverLink: true,
radius: '75%',
startAngle: 225,
endAngle: -45,
clockwise: true,
// 最小值
min: 0,
// 最大值
max: 100,
// 分割段数，默认为10
splitNumber: 10,
// 坐标轴线
axisLine: {
// 默认显示，属性show控制显示与否
show: true,
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 30
}
},
// 分隔线
splitLine: {
// 默认显示，属性show控制显示与否
show: true,
// 属性length控制线长
length: 30,
// 属性lineStyle（详见lineStyle）控制线条样式
lineStyle: {
color: '#eee',
width: 2,
type: 'solid'
}
},
// 坐标轴小标记
axisTick: {
// 属性show控制显示与否，默认不显示
show: true,
// 每份split细分多少段
splitNumber: 5,
// 属性length控制线长
length: 8,
// 属性lineStyle控制线条样式
lineStyle: {
color: '#eee',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: true,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'auto'
}
},
pointer: {
show: true,
length: '80%',
width: 8,
color: 'auto'
},
title: {
show: true,
// x, y，单位px
offsetCenter: [0, '-40%'],
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
color: '#333',
fontSize: 15
}
},
detail: {
show: true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
// x, y，单位px
offsetCenter: [0, '40%'],
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
color: 'auto',
fontSize: 30
}
}
}
});
return GaugeSeries;
});
\ No newline at end of file
src/chart/gauge/GaugeView.js 0 → 100644
浏览文件 @ cfaaed87
define(function (require) {
var graphic = require('../../util/graphic');
var numberUtil = require('../../util/number');
var parsePercent = numberUtil.parsePercent;
var zrUtil = require('zrender/core/util');
function parsePosition(seriesModel, api) {
var center = seriesModel.get('center');
var width = api.getWidth();
var height = api.getHeight();
var size = Math.min(width, height);
var cx = parsePercent(center[0], api.getWidth());
var cy = parsePercent(center[1], api.getHeight());
var r = parsePercent(seriesModel.get('radius'), size / 2);
return {
cx: cx,
cy: cy,
r: r
};
}
var PI2 = Math.PI * 2;
// function getAngleRange(seriesModel) {
// var startAngle = seriesModel.get('startAngle');
// var endAngle = seriesModel.get('endAngle');
// var clockwise = seriesModel.get('clockwise');
// // Thresh to [0, Math.PI * 2]
// startAngle = startAngle % (PI2);
// if (startAngle < 0) {
// startAngle = startAngle + PI2;
// }
// endAngle = endAngle % (PI2);
// if (endAngle < 0) {
// endAngle = endAngle + PI2;
// }
// if (startAngle > endAngle && clockwise) {
// endAngle += PI2;
// }
// else if (startAngle < endAngle && !clockwise) {
// startAngle += PI2;
// }
// if (!clockwise) {
// var tmp = endAngle;
// endAngle = startAngle;
// startAngle = tmp;
// }
// return [startAngle, endAngle];
// }
var GaugeView = require('../../view/Chart').extend({
type: 'gauge',
render: function (seriesModel, ecModel, api) {
this.group.removeAll();
var colorList = seriesModel.get('axisLine.lineStyle.color');
var posInfo = parsePosition(seriesModel, api);
this._renderMain(
seriesModel, ecModel, api, colorList, posInfo
);
},
_renderMain: function (seriesModel, ecModel, api, colorList, posInfo) {
var group = this.group;
var axisLineModel = seriesModel.getModel('axisLine');
var lineStyleModel = axisLineModel.getModel('lineStyle');
var clockwise = seriesModel.get('clockwise');
var startAngle = -seriesModel.get('startAngle') / 180 * Math.PI;
var endAngle = -seriesModel.get('endAngle') / 180 * Math.PI;
// Thresh to [0, Math.PI * 2]
// startAngle = startAngle % (PI2);
// if (startAngle < 0) {
// startAngle = startAngle + PI2;
// }
// endAngle = endAngle % (PI2);
// if (endAngle < 0) {
// endAngle = endAngle + PI2;
// }
var angleRangeSpan = (endAngle - startAngle) % PI2;
var prevEndAngle = startAngle;
var axisLineWidth = lineStyleModel.get('width');
for (var i = 0; i < colorList.length; i++) {
var endAngle = startAngle + angleRangeSpan * colorList[i][0];
var sector = new graphic.Sector({
shape: {
startAngle: prevEndAngle,
endAngle: endAngle,
cx: posInfo.cx,
cy: posInfo.cy,
clockwise: clockwise,
r0: posInfo.r - axisLineWidth,
r: posInfo.r
}
});
sector.setStyle({
fill: colorList[i][1]
});
sector.setStyle(lineStyleModel.getLineStyle(
// Because we use sector to simulate arc
// so the properties for stroking are useless
['color', 'borderWidth', 'borderColor']
));
group.add(sector);
prevEndAngle = endAngle;
}
var getColor = function (percent) {
// Less than 0
if (percent <= 0) {
return colorList[0][1];
}
for (var i = 0; i < colorList.length; i++) {
if (colorList[i][0] >= percent
&& (i === 0 ? 0 : colorList[i - 1][0]) < percent
) {
return colorList[i][1];
}
}
// More than 1
return colorList[i - 1][1];
};
this._renderTicks(
seriesModel, ecModel, api, getColor, posInfo,
startAngle, endAngle, clockwise
);
},
_renderTicks: function (
seriesModel, ecModel, api, getColor, posInfo,
startAngle, endAngle, clockwise
) {
var group = this.group;
var cx = posInfo.cx;
var cy = posInfo.cy;
var r = posInfo.r;
var minVal = seriesModel.get('min');
var maxVal = seriesModel.get('max');
var splitLineModel = seriesModel.getModel('splitLine');
var tickModel = seriesModel.getModel('axisTick');
var labelModel = seriesModel.getModel('axisLabel');
var labelFormatter = labelModel.get('formatter');
var splitNumber = seriesModel.get('splitNumber');
var subSplitNumber = tickModel.get('splitNumber');
var splitLineLen = splitLineModel.get('length');
var tickLen = tickModel.get('length');
var angle = startAngle;
var step = (endAngle - startAngle) / splitNumber;
var subStep = step / subSplitNumber;
var splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
var tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
var textStyleModel = labelModel.getModel('textStyle');
for (var i = 0; i <= splitNumber; i++) {
var unitX = Math.cos(angle);
var unitY = Math.sin(angle);
// Split line
if (splitLineModel.get('show')) {
var splitLine = new graphic.Line({
shape: {
x1: unitX * r + cx,
y1: unitY * r + cy,
x2: unitX * (r - splitLineLen) + cx,
y2: unitY * (r - splitLineLen) + cy
},
style: splitLineStyle
});
if (splitLineStyle.stroke === 'auto') {
splitLine.setStyle({
stroke: getColor(i / splitNumber)
});
}
group.add(splitLine);
}
// Label
if (labelModel.get('show')) {
var label = numberUtil.round(i / splitNumber * (maxVal - minVal) + minVal);
if (labelFormatter) {
if (typeof labelFormatter === 'string') {
label = labelFormatter.replace('{value}', label);
}
else if (typeof labelFormatter === 'function') {
label = labelFormatter(label);
}
}
var text = new graphic.Text({
style: {
text: label,
x: unitX * (r - splitLineLen - 5) + cx,
y: unitY * (r - splitLineLen - 5) + cy,
fill: textStyleModel.get('color'),
font: textStyleModel.getFont(),
textBaseline: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
}
});
if (text.style.fill === 'auto') {
text.setStyle({
fill: getColor(i / splitNumber)
});
}
group.add(text);
}
// Axis tick
if (tickModel.get('show') && i !== splitNumber) {
for (var j = 0; j <= subSplitNumber; j++) {
var unitX = Math.cos(angle);
var unitY = Math.sin(angle);
var tickLine = new graphic.Line({
shape: {
x1: unitX * r + cx,
y1: unitY * r + cy,
x2: unitX * (r - tickLen) + cx,
y2: unitY * (r - tickLen) + cy
},
style: tickLineStyle
});
if (tickLineStyle.stroke === 'auto') {
tickLine.setStyle({
stroke: getColor((i + j / subSplitNumber) / splitNumber)
});
}
group.add(tickLine);
angle += subStep;
}
angle -= subStep;
}
else {
angle += step;
}
}
console.log(startAngle, endAngle);
},
_renderPointer: function (seriesModel, ecModel, api, getColor) {
},
_renderTitle: function (seriesModel, ecModel, api) {
},
_renderDetail: function (seriesModel, ecModel, api) {
}
});
return GaugeView;
});
\ No newline at end of file
src/chart/pie/PieView.js
浏览文件 @ cfaaed87
......@@ -134,8 +134,6 @@ define(function (require) {
.add(function (idx) {
var layout = data.getItemLayout(idx);
console.log(layout);
var sector = createSectorAndLabel(
layout, '', hasAnimation && !isFirstRender
);
......
src/model/mixin/lineStyle.js
浏览文件 @ cfaaed87
......@@ -11,8 +11,8 @@ define(function (require) {
]
);
return {
getLineStyle: function () {
var style = getLineStyle.call(this);
getLineStyle: function (excludes) {
var style = getLineStyle.call(this, excludes);
var lineDash = this.getLineDash();
lineDash && (style.lineDash = lineDash);
return style;
......
src/preprocessor/backwardCompat.js
浏览文件 @ cfaaed87
......@@ -75,7 +75,9 @@ define(function (require) {
seriesOpt.map = seriesOpt.map || seriesOpt.mapType;
}
if (seriesOpt.type === 'pie' || seriesOpt.type === 'gauge') {
seriesOpt.clockwise = seriesOpt.clockwise != null ? seriesOpt.clockwise : seriesOpt.clockWise;
if (seriesOpt.clockWise != null) {
seriesOpt.clockwise = seriesOpt.clockWise;
}
}
});
};
......
test/gauge.html 0 → 100644
浏览文件 @ cfaaed87
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/dat.gui.min.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/gauge',
'echarts/component/legend',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
chart.setOption({
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'速度',
type:'gauge',
z: 3,
min:0,
max:220,
splitNumber:11,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
title : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
data:[{value: 40, name: 'km/h'}]
},
{
name:'转速',
type:'gauge',
center : ['25%', '55%'], // 默认全局居中
radius : '50%',
min:0,
max:7,
endAngle:45,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title : {
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
}
},
data:[{value: 1.5, name: 'x1000 r/min'}]
},
{
name:'油表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:135,
endAngle:45,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
splitNumber:5,
length :10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return 'E';
case '1' : return 'Gas';
case '2' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:2
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
},
{
name:'水表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:315,
endAngle:225,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return 'H';
case '1' : return 'Water';
case '2' : return 'C';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:2
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
}
]
});
// var config = {
// labelPosition: 'outside',
// clockwise: true,
// labelLineLen: 20,
// labelLineLen2: 5
// };
// function update() {
// chart.setOption({
// series: [{
// name: 'pie',
// clockwise: config.clockwise,
// label: {
// normal: {
// position: config.labelPosition
// }
// },
// labelLine: {
// length: config.labelLineLen,
// length2: config.labelLineLen2
// }
// }]
// });
// }
// var gui = new dat.GUI();
// gui.add(config, 'clockwise')
// .onChange(update);
// gui.add(config, 'labelPosition', ['inside', 'outside'])
// .onChange(update);
// gui.add(config, 'labelLineLen', 0, 100)
// .onChange(update);
// gui.add(config, 'labelLineLen2', 0, 100)
// .onChange(update);
})
</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.
先完成此消息的编辑！
想要评论请 注册 或