Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

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

DataView add optionToContent, contentToOption. #2872

上级 f20b82d5
隐藏空白更改
内联 并排
Showing with 481 addition and 15 deletion
src/component/toolbox/feature/DataView.js
浏览文件 @ 7f05cb69
......@@ -273,6 +273,9 @@ define(function (require) {
DataView.defaultOption = {
show: true,
readOnly: false,
optionToContent: null,
contentToOption: null,
icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
title: '数据视图',
lang: ['数据视图', '关闭', '刷新'],
......@@ -301,16 +304,33 @@ define(function (require) {
header.style.cssText = 'margin: 10px 20px;';
header.style.color = model.get('textColor');
var viewMain = document.createElement('div');
var textarea = document.createElement('textarea');
// Textarea style
textarea.style.cssText = 'display:block;width:100%;font-size:14px;line-height:1.6rem;font-family:Monaco,Consolas,Courier new,monospace';
textarea.readOnly = model.get('readOnly');
textarea.style.color = model.get('textColor');
textarea.style.borderColor = model.get('textareaBorderColor');
textarea.style.backgroundColor = model.get('textareaColor');
viewMain.style.cssText = 'display:block;width:100%;overflow:hidden;';
var optionToContent = model.get('optionToContent');
var contentToOption = model.get('contentToOption');
var result = getContentFromModel(ecModel);
textarea.value = result.value;
if (typeof optionToContent === 'function') {
var htmlOrDom = optionToContent(api.getOption());
if (typeof htmlOrDom === 'string') {
viewMain.innerHTML = htmlOrDom;
}
else if (zrUtil.isDom(htmlOrDom)) {
viewMain.appendChild(htmlOrDom);
}
}
else {
// Use default textarea
viewMain.appendChild(textarea);
textarea.readOnly = model.get('readOnly');
textarea.style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;';
textarea.style.color = model.get('textColor');
textarea.style.borderColor = model.get('textareaBorderColor');
textarea.style.backgroundColor = model.get('textareaColor');
textarea.value = result.value;
}
var blockMetaList = result.meta;
var buttonContainer = document.createElement('div');
......@@ -335,16 +355,23 @@ define(function (require) {
eventTool.addEventListener(refreshButton, 'click', function () {
var newOption;
try {
newOption = parseContents(textarea.value, blockMetaList);
if (typeof contentToOption === 'function') {
newOption = contentToOption(viewMain, api.getOption());
}
else {
newOption = parseContents(textarea.value, blockMetaList);
}
}
catch (e) {
close();
throw new Error('Data view format error ' + e);
}
api.dispatchAction({
type: 'changeDataView',
newOption: newOption
});
if (newOption) {
api.dispatchAction({
type: 'changeDataView',
newOption: newOption
});
}
close();
});
......@@ -354,7 +381,7 @@ define(function (require) {
refreshButton.style.cssText = buttonStyle;
closeButton.style.cssText = buttonStyle;
buttonContainer.appendChild(refreshButton);
!model.get('readOnly') && buttonContainer.appendChild(refreshButton);
buttonContainer.appendChild(closeButton);
// http://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea
......@@ -377,10 +404,10 @@ define(function (require) {
});
root.appendChild(header);
root.appendChild(textarea);
root.appendChild(viewMain);
root.appendChild(buttonContainer);
textarea.style.height = (container.clientHeight - 80) + 'px';
viewMain.style.height = (container.clientHeight - 80) + 'px';
container.appendChild(root);
this._dom = root;
......
test/dataView.html 0 → 100644
浏览文件 @ 7f05cb69
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src=""></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
#main {
background: #fff;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/toolbox',
'zrender/vml/vml'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('类目' + i);
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({
toolbox: {
// y: 'bottom',
feature: {
dataView: {
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
},
contentToOption: function () {
console.log(arguments);
}
},
saveAsImage: {
pixelRatio: 2
}
}
},
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',
data: data1
}, {
name: 'bar2',
type: 'bar',
stack: 'one',
data: data2
}, {
name: 'bar3',
type: 'bar',
stack: 'two',
data: data3
}, {
name: 'bar4',
type: 'bar',
stack: 'two',
data: data4
}]
});
window.onresize = chart.resize;
});
</script>
</body>
</html>
\ No newline at end of file
test/radar.html
浏览文件 @ 7f05cb69
......@@ -42,6 +42,11 @@
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
label: {
normal: {
show: true
}
},
// areaStyle: {normal: {}},
data : [
{
......
test/radar3.html 0 → 100644
浏览文件 @ 7f05cb69
<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/radar',
'echarts/component/legend',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title: {
text: '多雷达图'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 'center',
data:['某软件','某主食手机','某水果手机','降水量','蒸发量']
},
radar: [
{
indicator: [
{text: '品牌', max: 100},
{text: '内容', max: 100},
{text: '可用性', max: 100},
{text: '功能', max: 100}
],
center: ['25%',200],
radius: 80
},
{
indicator: [
{text: '外观', max: 100},
{text: '拍照', max: 100},
{text: '系统', max: 100},
{text: '性能', max: 100},
{text: '屏幕', max: 100}
],
radius: 80
},
{
indicator: (function (){
var res = [];
for (var i = 1; i <= 12; i++) {
res.push({text:i+'月',max:100});
}
return res;
})(),
center: ['75%', 200],
radius: 80
}
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [60,73,85,40],
name: '某软件'
}
]
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: [85, 90, 90, 95, 95],
name: '某主食手机'
},
{
value: [95, 80, 95, 90, 93],
name: '某水果手机'
}
]
},
{
type: 'radar',
radarIndex: 2,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
name: '降水量',
value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
},
{
name:'蒸发量',
value:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
}
]
}
]
});
});
</script>
</body>
</html>
\ No newline at end of file
test/radar4.html 0 → 100644
浏览文件 @ 7f05cb69
<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/radar',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
tooltip : {
trigger: 'item'
},
legend: {
x : 'left',
data:['图一','图二','图三']
},
polar : [
{
indicator : [
{ text : '指标一' },
{ text : '指标二' },
{ text : '指标三' },
{ text : '指标四' },
{ text : '指标五' }
],
center : ['25%',210],
radius : 150,
startAngle: 90,
splitNumber: 8,
name : {
formatter:'【{value}】',
textStyle: {color:'red'}
},
scale: true
},
{
indicator : [
{ text : '语文', max : 150, nameTextStyle: {
color:'#000000',fontSize:5
}},
{ text : '数学', max : 150, axisLine: {
lineStyle: {
color: 'red'
}
} },
{ text : '英语', max : 150, axisLine: {
lineStyle: {
color: 'red'
}
} },
{ text : '物理', max : 120, axisLine: {
lineStyle: {
color: 'red'
}
} },
{ text : '化学', max : 108, axisLine: {
lineStyle: {
color: 'red'
}
} },
{ text : '生物', max : 72, axisLine: {
lineStyle: {
color: 'red'
}
} }
],
center : ['75%', 210],
radius : 150
}
],
series : [
{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color: 各异,
lineStyle: {
width: 4
}
}
},
data : [
{
value : [100, 8, 0.40, -80, 2000],
name : '图一',
symbol: 'star5',
symbolSize: 4,
itemStyle: {
normal: {
lineStyle: {
type: 'dashed'
}
}
}
},
{
value : [10, 3, 0.20, -100, 1000],
name : '图二',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
}
},
{
value : [20, 3, 0.3, -13.5, 3000],
name : '图三',
symbol: 'none', // 拐点图形类型，非标准参数
itemStyle: {
normal: {
lineStyle: {
type: 'dotted'
}
}
}
}
]
},
{
name: '成绩单',
type: 'radar',
polarIndex : 1,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: '张三',
itemStyle: {
normal: {
label: {
show: true,
formatter:function(params) {
return params.value;
}
}
}
}
},
{
value : [90, 113, 140, 30, 70, 60],
name : '李四',
itemStyle: {
normal: {
lineStyle: {
type: 'dashed'
}
}
}
}
]
}
]
});
});
</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.
先完成此消息的编辑！
想要评论请 注册 或