Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 555cacbc 编写于 作者: Y Yi Shen
浏览文件
操作

Merge pull request #1348 from loutongbing/master 

韦恩图
上级 5494c4d0 6c02e6ec
隐藏空白更改
内联 并排
Showing with 562 addition and 1 deletion
doc/asset/js/echartsExample.js
浏览文件 @ 555cacbc
......@@ -163,7 +163,7 @@ if (developMode) {
},
{
name: 'zrender',
//location: 'http://ecomfe.github.io/zrender/src',
// location: 'http://ecomfe.github.io/zrender/src',
location: '../../../zrender/src',
main: 'zrender'
}
......@@ -206,6 +206,7 @@ function launchExample() {
'echarts/chart/gauge',
'echarts/chart/funnel',
'echarts/chart/eventRiver',
'echarts/chart/venn',
needMap() ? 'echarts/chart/map' : 'echarts'
],
requireCallback
......
doc/example/venn.html 0 → 100644
浏览文件 @ 555cacbc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>ECharts · Example</title>
<link rel="shortcut icon" href="../asset/ico/favicon.png">
<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/carousel.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="./www/js/echarts.js"></script>
<script src="../asset/js/codemirror.js"></script>
<script src="../asset/js/javascript.js"></script>
<link href="../asset/css/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid example">
<div id="sidebar-code" class="col-md-4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
option = {
title : {
text: '访问 vs 咨询',
subtext: '各个数据的集合'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'韦恩图',
type:'venn',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontFamily: 'Arial, Verdana, sans-serif',
fontSize: 16,
fontStyle: 'italic',
fontWeight: 'bolder'
}
},
labelLine: {
show: false,
length: 10,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
color: '#cc99cc',
borderWidth: 3,
borderColor: '#996699'
}
},
data:[
{value:100, name:'访问',color: '#999933'},
{value:50, name:'咨询',color: '#669999'},
{value:20, name:'公共'}
]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="col-md-8">
<div id="main" class="main"></div>
<div>
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
<span class="text-primary">切换主题</span>
<select id="theme-select"></select>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
src/chart/venn.js 0 → 100644
浏览文件 @ 555cacbc
/**
* echarts图表类：维恩图
*
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
* @author Loutongbing (娄同兵, loutongbing@126.com)
*/
define(function (require) {
var ChartBase = require('./base');
// 图形依赖
var TextShape = require('zrender/shape/Text');
var CircleShape = require('zrender/shape/Circle');
var PathShape = require('zrender/shape/Path');
var ecConfig = require('../config');
// 维恩图默认参数
ecConfig.venn = {
zlevel: 0, // 一级层叠
z: 1, // 二级层叠
calculable: false
};
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
/**
* 构造函数
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {Object} series 数据
* @param {Object} component 组件
* @constructor
* @exports Venn
*/
function Venn(ecTheme, messageCenter, zr, option, myChart) {
// 图表基类
ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart);
this.refresh(option);
}
Venn.prototype = {
type : ecConfig.CHART_TYPE_RADAR,
/**
* 绘制图形
*/
_buildShape : function () {
this.selectedMap = {};
this._symbol = this.option.symbolList;
this._queryTarget;
this._dropBoxList = [];
this._vennDataCounter = 0;
var series = this.series;
this.data = series[0].data;
this._buildVenn(this.data);
this.addShapeList();
},
/**
* 构建单个
*
* @param {Object} data 数据
*/
_buildVenn : function (data) {
var r0;
var r1;
if (data[0].value > data[1].value) {
r0 = this.zr.getHeight() / 3;
r1 = r0 * Math.sqrt(data[1].value) / Math.sqrt(data[0].value);
}
else {
r1 = this.zr.getHeight() / 3;
r0 = r1 * Math.sqrt(data[0].value) / Math.sqrt(data[1].value);
}
var x0 = this.zr.getWidth() / 2 - r0;
// 估值 两个圆心的距离与两圆半径均值之比等于交集与两集合均值的开方之比。
// 公共距离（coincideLengthAnchor）/ 公共数值开方 = 半径平均值 / 各自数值均值的开方
var coincideLengthAnchor = ((r0 + r1) / 2) * Math.sqrt(data[2].value) / Math.sqrt((data[0].value + data[1].value) / 2);
// 如果两者没有公共面积，则圆心距就为两圆半径之和
var coincideLength = r0 + r1;
if (data[2].value !== 0) {
coincideLength = this._getCoincideLength(
data[0].value,
data[1].value,
data[2].value,
r0, r1,
coincideLengthAnchor,
Math.abs(r0 - r1),
r0 + r1
);
}
var x1 = x0 + coincideLength;
var y = this.zr.getHeight() / 2;
this._buildItem(
0, 0,
data[0].color || this.zr.getColor(0),
x0,
y,
r0
);
this._buildItem(
0, 1,
data[1].color || this.zr.getColor(1),
x1,
y,
r1
);
// 包含关系与无交集关系均不画公共部分
if (
data[2].value !== 0
&& data[2].value !== data[0].value
&& data[2].value !== data[1].value
) {
var xLeft = (r0 * r0 - r1 * r1) / (2 * coincideLength) + coincideLength / 2;
var xRight = coincideLength / 2 - (r0 * r0 - r1 * r1) / (2 * coincideLength);
var h = Math.sqrt(r0 * r0 - xLeft * xLeft);
// 判断大小圆弧
var rightLargeArcFlag = 0;
var leftLargeArcFlag = 0;
if (
data[0].value > data[1].value
&& x1 < x0 + xLeft
) {
leftLargeArcFlag = 1;
}
if (
data[0].value < data[1].value
&& x1 < x0 + xRight
) {
rightLargeArcFlag = 1;
}
this._buildCoincideItem(
2, 2,
data[2].color || this.zr.getColor(2),
x0 + xLeft,
y - h,
y + h,
r0,
r1,
rightLargeArcFlag,
leftLargeArcFlag
);
}
},
/**
* 逼近算法得到两圆的间距
* @param {number} value0 第一个圆的原始数值
* @param {number} value1 第二个圆的原始数值
* @param {number} value3 公共部分的原始数值
* @param {number} r0 第一个圆的半径
* @param {number} r1 第二个圆的半径
* @param {number} coincideLengthAnchor 锚定
* @param {number} coincideLengthAnchorMin 下限
* @param {number} coincideLengthAnchorMax 上限
* @return {Node}
*/
_getCoincideLength: function (
value0,
value1,
value2,
r0,
r1,
coincideLengthAnchor,
coincideLengthAnchorMin,
coincideLengthAnchorMax
) {
// 计算
var x = (r0 * r0 - r1 * r1) / (2 * coincideLengthAnchor) + coincideLengthAnchor / 2;
var y = coincideLengthAnchor / 2 - (r0 * r0 - r1 * r1) / (2 * coincideLengthAnchor);
// 夹角
var alfa = Math.acos(x / r0);
var beta = Math.acos(y / r1);
// 第一个圆的面积
var area0 = r0 * r0 * Math.PI;
// 计算的公共面积 (思路是扇形减三角形)
var area2 = alfa * r0 * r0 - x * r0 * Math.sin(alfa) + beta * r1 * r1 - y * r1 * Math.sin(beta);
var scaleAnchor = area2 / area0;
var scale = value2 / value0;
var approximateValue = Math.abs(scaleAnchor / scale);
if (approximateValue > 0.999 && approximateValue < 1.001) {
return coincideLengthAnchor;
}
// 若是公共面积比较小，使距离减小一些，让公共面积增大
else if (approximateValue <= 0.999) {
coincideLengthAnchorMax = coincideLengthAnchor;
// 二分法计算新的步调
coincideLengthAnchor = (coincideLengthAnchor + coincideLengthAnchorMin) / 2;
return this._getCoincideLength(value0, value1, value2, r0, r1,
coincideLengthAnchor, coincideLengthAnchorMin, coincideLengthAnchorMax);
}
// 若是公共面积比较大，使距离增大一些，让公共面积减小
else {
coincideLengthAnchorMin = coincideLengthAnchor;
coincideLengthAnchor = (coincideLengthAnchor + coincideLengthAnchorMax) / 2;
return this._getCoincideLength(value0, value1, value2, r0, r1,
coincideLengthAnchor, coincideLengthAnchorMin, coincideLengthAnchorMax);
}
},
/**
* 构建单个圆及指标
*/
_buildItem : function (
seriesIndex, dataIndex, defaultColor,
x, y, r
) {
var series = this.series;
var circle = this.getCircle(
seriesIndex, dataIndex, defaultColor,
x, y, r
);
ecData.pack(
circle,
series[0], seriesIndex,
series[0].data[dataIndex], dataIndex,
series[0].data[dataIndex].name
);
this.shapeList.push(circle);
if (series[0].itemStyle.normal.label.show) {
// 文本标签
var label = this.getLabel(
seriesIndex, dataIndex, defaultColor,
x, y, r
);
ecData.pack(
label,
series[0], seriesIndex,
series[0].data[dataIndex], dataIndex,
series[0].data[dataIndex].name
);
this.shapeList.push(label);
}
},
_buildCoincideItem : function (
seriesIndex, dataIndex, defaultColor,
x, y0, y1, r0, r1, rightLargeArcFlag, leftLargeArcFlag
) {
var series = this.series;
var serie = series[0];
var data = this.data[dataIndex];
var queryTarget = [data, serie];
// 多级控制
var normal = this.deepMerge(
queryTarget,
'itemStyle.normal'
) || {};
var emphasis = this.deepMerge(
queryTarget,
'itemStyle.emphasis'
) || {};
var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data)
|| defaultColor;
var path = 'M' + x + ',' + y0
+ 'A' + r0 + ',' + r0 + ',0,' + rightLargeArcFlag + ',1,' + x + ',' + y1
+ 'A' + r1 + ',' + r1 + ',0,' + leftLargeArcFlag + ',1,' + x + ',' + y0;
var style = {
color: defaultColor,
// path: rx ry x-axis-rotation large-arc-flag sweep-flag x y
path: path
};
var shape = {
zlevel: this.getZlevelBase(),
z: this.getZBase(),
style: style,
highlightStyle: {
color: emphasisColor,
lineWidth: emphasis.borderWidth,
strokeColor: emphasis.borderColor
}
};
shape = new PathShape(shape);
if (shape.buildPathArray) {
shape.style.pathArray = shape.buildPathArray(style.path);
}
ecData.pack(
shape,
series[0], 0,
series[0].data[dataIndex], dataIndex,
series[0].data[dataIndex].name
);
this.shapeList.push(shape);
},
/**
* 构建圆形
*/
getCircle : function (
seriesIndex, dataIndex, defaultColor,
x, y, r
) {
var serie = this.series[0];
var data = this.data[dataIndex];
var queryTarget = [data, serie];
// 多级控制
var normal = this.deepMerge(
queryTarget,
'itemStyle.normal'
) || {};
var emphasis = this.deepMerge(
queryTarget,
'itemStyle.emphasis'
) || {};
var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data)
|| defaultColor;
var circle = {
zlevel: this.getZlevelBase(),
clickable: true,
style: {
x: x,
y: y,
r: r,
brushType: 'fill',
opacity: 1,
color: defaultColor
},
highlightStyle: {
color: emphasisColor,
lineWidth: emphasis.borderWidth,
strokeColor: emphasis.borderColor
}
};
if (this.deepQuery([data, serie, this.option], 'calculable')) {
this.setCalculable(circle);
circle.draggable = true;
}
return new CircleShape(circle);
},
/**
* 需要显示则会有返回构建好的shape，否则返回undefined
*/
getLabel : function (
seriesIndex, dataIndex, defaultColor,
x, y, r
) {
var serie = this.series[0];
var itemStyle = serie.itemStyle;
var status = 'normal';
// label配置
var labelControl = itemStyle[status].label;
var textStyle = labelControl.textStyle || {};
var text = this.getLabelText(seriesIndex, dataIndex, status);
var textFont = this.getFont(textStyle);
var textColor = defaultColor;
// 求出label的纵坐标
var textSize = textStyle.fontSize || 12;
var textShape = {
zlevel: ecConfig.venn.zlevel + 1,
style: {
x: x,
y: y - r - textSize,
color: textStyle.color || textColor,
text: text,
textFont: textFont,
textAlign: 'center'
}
};
return new TextShape(textShape);
},
/**
* 根据lable.format计算label text
*/
getLabelText : function (seriesIndex, dataIndex, status) {
var series = this.series;
var serie = series[0];
var data = serie.data[dataIndex];
var formatter = this.deepQuery(
[data, serie],
'itemStyle.' + status + '.label.formatter'
);
if (formatter) {
if (typeof formatter == 'function') {
return formatter(
serie.name,
data.name,
data.value
);
}
else if (typeof formatter == 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
formatter = formatter.replace('{a0}', serie.name)
.replace('{b0}', data.name)
.replace('{c0}', data.value);
return formatter;
}
}
else {
return data.name;
}
},
/**
* 刷新
*/
refresh : function (newOption) {
if (newOption) {
this.option = newOption;
this.series = newOption.series;
}
this._buildShape();
}
};
zrUtil.inherits(Venn, ChartBase);
// 图表注册
require('../chart').define('venn', Venn);
return Venn;
});
\ No newline at end of file
src/component/legend.js
浏览文件 @ 555cacbc
......@@ -575,6 +575,7 @@ define(function (require) {
itemShape.highlightStyle.lineWidth = 3;
break;
case 'radar':
case 'venn':
case 'scatter':
itemShape.highlightStyle.lineWidth = 3;
break;
......
src/config.js
浏览文件 @ 555cacbc
......@@ -14,6 +14,7 @@ define(function() {
CHART_TYPE_SCATTER: 'scatter',
CHART_TYPE_PIE: 'pie',
CHART_TYPE_RADAR: 'radar',
CHART_TYPE_VENN: 'venn',
CHART_TYPE_MAP: 'map',
CHART_TYPE_K: 'k',
CHART_TYPE_ISLAND: 'island',
......
test/allchart/all.js
浏览文件 @ 555cacbc
......@@ -159,6 +159,7 @@ function launchExample() {
'echarts/chart/map',
'echarts/chart/gauge',
'echarts/chart/funnel',
'echarts/chart/venn',
'echarts/chart/eventRiver'
],
requireCallback
......
test/performance/p.js
浏览文件 @ 555cacbc
......@@ -73,6 +73,7 @@ function launchExample() {
'echarts/chart/map',
'echarts/chart/gauge',
'echarts/chart/funnel',
'echarts/chart/venn',
'echarts/chart/eventRiver'
],
requireCallback
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或