Skip to content

E
echarts

alon@wen / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

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

提交 2e8177f6 编写于 作者: S sushuang
浏览文件
操作

Should better not share plain object, update status at one place and use in the other place.

上级 9922d7ec
隐藏空白更改
内联 并排
Showing with 509 addition and 1 deletion
src/chart/pie/PieView.js
浏览文件 @ 2e8177f6
......@@ -155,7 +155,7 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
toggleItemSelected(
this,
data.getItemLayout(idx),
itemModel.get('selected'),
seriesModel.isSelected(null, idx),
seriesModel.get('selectedOffset'),
seriesModel.get('animation')
);
......
test/lines-grid.html 0 → 100644
浏览文件 @ 2e8177f6
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
#main {
height: 500px;
}
</style>
<div id="main"></div>
<script>
var echarts;
var colorTool;
var chart;
var myChart;
var groupCategories = [];
var groupColors = [];
require([
'echarts'
// 'zrender/tool/color',
// 'echarts/chart/lines',
// 'echarts/chart/line',
// 'echarts/component/grid',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'echarts/component/toolbox',
// 'echarts/component/visualMap'
], function (ec, ct) {
echarts = ec;
colorTool = echarts.color;
chart = myChart = echarts.init(document.getElementById('main'));
var json = {
chart0:{
text: '未来一周气温变化',
subtext: '纯属虚构',
legend: [['最高气温', '最低气温'],['A','B']],
xcategory: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
high: [11, 11, 15, 13, 12, 13, 10],
highLine: [],
low: [1, -2, 2, 5, 3, 2, 0],
lowLine:[],
avg:[]
}
};
var zrUtil = echarts.util;
var zrVector = echarts.vector;
var zrMatrix = echarts.matrix;
var zrNumber = echarts.number;
var zrFormat = echarts.format;
var zrGraphic = echarts.graphic;
zrUtil.each(json.chart0.xcategory, function(item, index){
json.chart0.highLine.push([{coord:[index,json.chart0.high[index]] },{coord:[index+1,json.chart0.high[index+1]]}]);
});
zrUtil.each(json.chart0.xcategory, function(item, index){
json.chart0.lowLine.push([{coord:[index,json.chart0.low[index]] },{coord:[index+1,json.chart0.low[index+1]]}]);
});
zrUtil.each(json.chart0.high, function(item, index){
json.chart0.avg.push((json.chart0.low[index] + json.chart0.high[index]) / 2);
});
var option = {
title: {
text: json.chart0.text,
subtext: json.chart0.subtext
},
animationEasing: 'ElasticOut',
legend: [{
data: json.chart0.legend[0]
},{
data: json.chart0.legend[1],
top:15,
}],
calculable: true,
xAxis: [{
type: 'category',
axisLabel:{
formatter:function(value){
var sepCount = 1;//每几个字符分隔
return value.replace(/(\S{1})(?=[^$])/g, "$1\n\n")
}
},
boundaryGap: false,
data: json.chart0.xcategory
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '最高气温',
type: 'line',
data: json.chart0.high
}, {
name: '最低气温',
type: 'line',
data: json.chart0.low
},{
name: '平均气温',
type: 'line',
data: json.chart0.avg
},{
name: 'A',
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 2,
effect: {
show: true,
smooth: false,
period: 6,
//trailLength: 0,
//symbol: planePath,
//color:'rgba(55,155,255,0.5)',
symbolSize: 8
},
data: json.chart0.highLine
},{
name: 'B',
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 2,
effect: {
show: true,
smooth: false,
period: 6,
symbolSize: 8
},
data: json.chart0.lowLine
}]
};
chart.setOption(option);
});
</script>
</body>
</html>
\ No newline at end of file
test/map-default.html 0 → 100644
浏览文件 @ 2e8177f6
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<script src="../dist/echarts.js"></script>
<script src="../map/js/china.js"></script>
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
h1 {
line-height: 60px;
height: 60px;
background: #146402;
text-align: center;
font-weight: bold;
color: #eee;
font-size: 14px;
}
.chart {
height: 500px;
}
</style>
<button onclick="setOption()">setOption()</button>
<div class="chart" id="main0"></div>
<script>
var chart;
require([
'echarts'
], function (echarts) {
require(['map/js/china'], function () {
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
legend: {
top: 0,
left: 'center',
data: ['中国A', '中国B']
},
series: [
{
name: '中国A',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
roam: true,
nameMap: {
'广东': 'guangdong',
'广西': 'guangxi'
},
data:[
{name:'广东', selected:true}
]
},
{
name: '中国B',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
roam: true,
// nameMap: {
// '广东': 'guangdong',
// '广西': 'guangxi'
// },
data:[
{name:'广东', selected: true},
{name:'山东', selected: true}
]
}
]
};
chart = testHelper.createChart(echarts, 'main0', option);
});
});
function setOption() {
chart.setOption({
series: {
label: {
normal: {
color: 'red'
}
}
}
});
}
</script>
</body>
</html>
\ No newline at end of file
test/map-locate.html 0 → 100644
浏览文件 @ 2e8177f6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
.test-title {
background: #146402;
color: #fff;
}
</style>
<div id="main0"></div>
<script>
require([
'echarts', 'map/js/china'
], function (echarts) {
var locations = [{
name: '上海',
coord: [121.472644, 31.231706]
}, {
name: '北京',
coord: [116.405285, 39.904989]
}, {
name: '广东',
coord: [113.280637, 23.839463714285714]
}];
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
}
}
]
};
var myChart = testHelper.create(echarts, 'main0', {
title: 'Original series data is empty and no dataset',
option: option
});
var currentLoc = 0;
setInterval(function () {
myChart.setOption({
series: [{
center: locations[currentLoc].coord,
zoom: 4,
data:[
{name: locations[currentLoc].name, selected: true}
],
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
}]
});
currentLoc = (currentLoc + 1) % locations.length;
}, 2000);
});
</script>
</body>
</html>
\ No newline at end of file
test/map-province.html 0 → 100644
浏览文件 @ 2e8177f6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
.test-title {
background: #146402;
color: #fff;
}
</style>
<div id="main0"></div>
<script>
var chart;
require([
'echarts'/*, 'map/js/china' */
], function (echarts) {
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
function showProvince() {
var name = provinces[currentIdx];
// myChart.showLoading();
$.get('../map/json/province/' + name + '.json', function (geoJson) {
// myChart.hideLoading();
echarts.registerMap(name, geoJson);
chart.setOption({
backgroundColor: '#404a59',
title: {
text: provincesText[currentIdx],
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [
{
type: 'map',
mapType: name,
label: {
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false
// animationDurationUpdate: 1000,
// animationEasingUpdate: 'quinticInOut'
}
]
});
});
}
var currentIdx = 0;
var option = {
graphic: [{
id: 'left-btn',
type: 'circle',
shape: { r: 20 },
style: {
text: '<',
fill: '#eee'
},
left: 10,
top: 'middle',
onclick: function () {
currentIdx -= 1;
if (currentIdx < 0) {
currentIdx += provinces.length;
}
showProvince();
}
}, {
id: 'right-btn',
type: 'circle',
shape: { r: 20 },
style: {
text: '>',
fill: '#eee'
},
top: 'middle',
right: 10,
onclick: function () {
currentIdx = (currentIdx + 1) % provinces.length;
showProvince();
}
}],
series: []
};
chart = testHelper.create(echarts, 'main0', {
option: option
});
showProvince();
});
</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.
先完成此消息的编辑！
想要评论请 注册 或