Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 92bbc2e1 编写于 作者: K kener
浏览文件
操作

文档更新

上级 4dfd5d14
隐藏空白更改
内联 并排
Showing with 1685 addition and 1383 deletion
doc/changelog.html
浏览文件 @ 92bbc2e1
......@@ -69,6 +69,7 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 2.0.4+</li>
</ul>
</div>
<div>
<h3>2.0.3<small>（2014-09-05）</small></h3>
<ul>
......@@ -97,8 +98,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 2.0.3+</li>
</ul>
</div>
<div>
<h3>2.0.2<small>（2014-08-13）</small></h3>
<h3>2.0.2<small> (2014-08-13)</small></h3>
<ul>
<li>【#】 IE8-不显示bug，fix <a href="https://github.com/ecomfe/echarts/issues/475" target="_blank">#475 »</a></li>
<li>[#] [gauge]精度计算，fix <a href="http://www.oschina.net/question/1410502_164606" target="_blank">this »</a></li>
......@@ -108,8 +110,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 2.0.2+</li>
</ul>
</div>
<div>
<h3>2.0.1<small>（2014-07-24）</small></h3>
<h3>2.0.1<small> (2014-07-24)</small></h3>
<ul>
<li>【#】 移动设备事件失效</li>
<li>[#] [gauge]min max非默认值时计算错误</li>
......@@ -125,8 +128,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 2.0.1+</li>
</ul>
</div>
<div>
<h3>2.0.0<small>（2014-06-30）</small></h3>
<h3>2.0.0<small> (2014-06-30)</small></h3>
<ul>
<li>【+】 [timeline]新增组件：时间轴（timeline），支持与任意图表组合使用，try <a href="./example/bar11.html" target="_blank">bar »</a>、<a href="./example/scatter4.html" target="_blank">scatter »</a>、<a href="./example/pie7.html" target="_blank">pie »</a>、<a href="./example/map14.html" target="_blank">map »</a></li>
<li>【+】 [gauge]新增图表：仪表盘（gauge），查看 <a href="./example.html#gauge " target="_blank">this »</a></li>
......@@ -172,8 +176,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 2.0.0+</li>
</ul>
</div>
<div>
<h3>1.4.1<small>（2014-04-14）</small></h3>
<h3>1.4.1<small> (2014-04-14)</small></h3>
<ul>
<li>[#] [bar][line]空值数据计算特殊值错误</li>
<li>[#] [dataZoom]数据阴影长度计算错误</li>
......@@ -183,8 +188,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.1.1+</li>
</ul>
</div>
<div>
<h3>1.4.0<small>（2014-04-02）</small></h3>
<h3>1.4.0<small> (2014-04-02)</small></h3>
<ul>
<li>【+】 多图联动，try <a href="./example/mix8.html" target="_blank">this »</a>，support <a href="https://github.com/ecomfe/echarts/issues/248" target="_blank">#248 »</a> <a href="http://www.oschina.net/question/1457761_145010" target="_blank">this »</a></li>
<li>【+】 标注（markPoint）、标线（markLine）炫光特效，try <a href="./example/map11.html" target="_blank">百度迁徙（模拟） »</a> <a href="./example/map12.html" target="_blank">中国铁路运输主干线 »</a></li>
......@@ -212,8 +218,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.1.1+</li>
</ul>
</div>
<div>
<h3>1.3.8<small>（2014-03-04）</small></h3>
<h3>1.3.8<small> (2014-03-04)</small></h3>
<ul>
<li>【+】 theme主题支持，try <a href='./example/themeDesigner.html' target="_blank">ECharts Theme Designer</a></li>
<li>[+] symbolList 折线图、散点图、雷达图默认symbol顺序可控</li>
......@@ -234,8 +241,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.1.0+</li>
</ul>
</div>
<div>
<h3>1.3.7<small>（2014-01-27）</small></h3>
<h3>1.3.7<small> (2014-01-27)</small></h3>
<ul>
<li>[^] [categoryAxis]boundaryGap留空样式优化，前后一个类目空间调整为半个类目空间</li>
<li>[^] [toolbox]工具箱支持自定义图标，featureImageIcon</li>
......@@ -258,8 +266,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.9+</li>
</ul>
</div>
<div>
<h3>1.3.6<small>（2014-01-15）</small></h3>
<h3>1.3.6<small> (2014-01-15)</small></h3>
<ul>
<li>【^】 全图表支持标注（markPoint）、标线（markLine），try <a href="./example/map9.html" target="_blank">markPoine »</a> <a href="./example/map10.html" target="_blank">markLine »</a></li>
<li>【^】 全面开放chart、component实例对象，实现更深度个性化，更多新奇玩法，try <a href="./example/mix7.html" target="_blank">this »</a></li>
......@@ -278,8 +287,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.8+</li>
</ul>
</div>
<div>
<h3>1.3.5<small>（2013-12-19）</small></h3>
<h3>1.3.5<small> (2013-12-19)</small></h3>
<ul>
<li>【+】 srcipt标签式引入，兼容非模块化或基于CMD模块化（如seajs）项目引入ECharts，详见 <a href="doc.html#引入ECharts3" target="_blank">this »</a></li>
<li>【^】 [map]支持滚轮缩放和拖拽漫游，roam:true开启</li>
......@@ -296,8 +306,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.7+</li>
</ul>
</div>
<div>
<h3>1.3.1<small>（2013-11-22）</small></h3>
<h3>1.3.1<small> (2013-11-22)</small></h3>
<ul>
<li>【+】 支持渲染为图片模式 renderAsImage</li>
<li>【+】 新增接口getOption/getSeries/getDataURL/getImage</li>
......@@ -315,8 +326,9 @@
<li>[#] [chord][radar]文字样式修复</li>
</ul>
</div>
<div>
<h3>1.3.0<small>（2013-11-05）</small></h3>
<h3>1.3.0<small> (2013-11-05)</small></h3>
<ul>
<li>【+】 [chord]新增和弦图，支持多维选择</li>
<li>【^】 [pie]升级支持南丁格尔玫瑰图（半径/面积）模式</li>
......@@ -332,8 +344,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.5+</li>
</ul>
</div>
<div>
<h3>1.2.1<small>（2013-09-29）</small></h3>
<h3>1.2.1<small> (2013-09-29)</small></h3>
<ul>
<li>【^】 [line]平滑曲线支持，icon shape交互易用性优化</li>
<li>【^】 [line][bar][scatter]文本标签支持</li>
......@@ -350,8 +363,9 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.4+</li>
</ul>
</div>
<div>
<h3>1.2.0<small>（2013-09-13）</small></h3>
<h3>1.2.0<small> (2013-09-13)</small></h3>
<ul>
<li>【+】 [radar] 雷达图</li>
<li>【+】 动态数据添加接口及动画支持 support <a href="https://github.com/ecomfe/echarts/issues/45" target="_blank">this »</a></li>
......@@ -368,6 +382,7 @@
<li>[?] 依赖升级，<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.3+</li>
</ul>
</div>
<div>
<h3>1.1.2<small>（2013-08-21）</small></h3>
<ul>
......@@ -382,8 +397,9 @@
<li>[#] [toolbox] 保存图片显示位置居中修正</li>
</ul>
</div>
<div>
<h3>1.1.1<small>（2013-07-30）</small></h3>
<h3>1.1.1<small> (2013-07-30)</small></h3>
<ul>
<li>[+] [component] 新增Title组件，图表标题支持</li>
<li>【+】 图片导出支持（IE8-不支持）</li>
......@@ -400,8 +416,9 @@
<li>【#】 数据修改后（拖拽，数据视图）的反向同步及restore还原修复</li>
</ul>
</div>
<div>
<h3>1.1.0<small>（2013-07-08）</small></h3>
<h3>1.1.1<small> (2013-07-30)</small></h3>
<ul>
<li>新增图表</li>
<ul>
......@@ -437,8 +454,9 @@
<li>默认动画缓动效果从'BounceOut'改为'ExponentialOut'</li>
</ul>
</div>
<div>
<h3>1.0.0<small>（2013-06-30）</small></h3>
<h3>1.0.0<small> (2013-06-30)</small></h3>
<ul>
<li>提供商业产品常用图表库，支持折线图（区域图）、柱状图（条状图）、饼图（环形图）</li>
<li>特性</li>
......
doc/doc.html
浏览文件 @ 92bbc2e1
......@@ -535,12 +535,8 @@ require(
</ul>
<h3>自定义构建echarts单文件<a name="自定义构建echarts单文件"></a></h3>
<p>
默认echarts通过build目录下的build.sh（build.bat）脚本可以输出是否包含地图，是否压缩和是否打包esl（可以标签引入）排列组合总共6个版本的echarts单文件，大部分场景下已经够用，但是如果你还是觉得很多图表用不到还放在里面非常浪费，可以通过build目录下的build.js来构建一个更加贴身的echarts单文件。
</p>
<p>
运行build.js只需要一个<a href="http://nodejs.org/">node</a>环境， build文件夹内已经为你准备好配置项， 可根据你的项目需求修改config-tpl.js以构建你的最佳配置， 你甚至可以在终端里通过命令行参数的方式运行 node build.js 构建脚本，具体示例：
</p>
<p>默认echarts通过build目录下的build.sh（build.bat）脚本可以输出是否包含地图，是否压缩和是否打包esl（可以标签引入）排列组合总共6个版本的echarts单文件，大部分场景下已经够用，但是如果你还是觉得很多图表用不到还放在里面非常浪费，可以通过build目录下的build.js来构建一个更加贴身的echarts单文件。</p>
<p>运行build.js只需要一个<a href="http://nodejs.org/">node</a>环境， build文件夹内已经为你准备好配置项， 可根据你的项目需求修改config-tpl.js以构建你的最佳配置， 你甚至可以在终端里通过命令行参数的方式运行 node build.js 构建脚本，具体示例：</p>
<div class="code">
<pre>node build.js optimize=true exclude=map,force,line output=echarts.js plain=true</pre>
</div>
......@@ -1555,7 +1551,6 @@ require(['echarts'], function (ec){
<td> 10 </td>
<td> 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图 </td>
</tr>
<!--
<tr>
<td> <b>{number}</b> itemWidth </td>
<td> 20 </td>
......@@ -1566,7 +1561,6 @@ require(['echarts'], function (ec){
<td> 14 </td>
<td> 图例图形高度 </td>
</tr>
-->
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {color: '#333'} </td>
......@@ -4092,6 +4086,7 @@ geoCoord : {
// step1: 找到目标地区的geoJson数据文件，如HK_geo.json
// step2: 在require('echarts/util/mapData/params').params中命名你的地图类型，如HK
// step3: 命名赋值为对象{}, 实现接口方法getGeoJson，通过callback返回目标地区geoJson数据文件
require('echarts/util/mapData/params').params.HK = {
getGeoJson: function (callback) {
......
doc/feature.html
浏览文件 @ 92bbc2e1
......@@ -243,7 +243,7 @@
</div>
<div class="col-md-6">
<h2 class="featurette-heading">个性化定制</h2>
<p>超过500个可配置选项结合多级控制设计满足高度定制的个性化需求。</p>
<p>超过600个可配置选项结合多级控制设计满足高度定制的个性化需求。</p>
<a href="./doc.html" target="_blank">详细文档 &raquo;</a>
</div>
</div>
......
doc/slide/js/whyEcharts.js
浏览文件 @ 92bbc2e1
var developMode = false;
var developMode = true;
if (developMode) {
// for develop
require.config({
paths : {
webkitDep : '../../doc/example/webkit-dep'
},
paths : {
webkitDep : '../../doc/example/webkit-dep'
},
packages: [
{
name: 'echarts',
......@@ -38,14 +38,14 @@ else {
'echarts/chart/force': fileLocation,
'echarts/chart/gauge': fileLocation,
'echarts/chart/funnel': fileLocation,
webkitDep : '../../doc/example/webkit-dep'
webkitDep : '../../doc/example/webkit-dep'
}
});
}
var theme = {
backgroundColor:'#fff',
color: [
color: [
'#5d9cec', '#62c87f', '#f15755', '#fc863f', '#7053b6',
'#6ed5e6','#ffce55', '#f57bc1', '#dcb186', '#647c9d'
],
......@@ -67,22 +67,6 @@ var theme = {
}
}
}
/*
require.config({
paths:{
echarts: '../../doc/example/www/js/echarts-map',
'echarts/chart/line': '../../doc/example/www/js/echarts-map',
'echarts/chart/bar': '../../doc/example/www/js/echarts-map',
'echarts/chart/scatter': '../../doc/example/www/js/echarts-map',
'echarts/chart/k': '../../doc/example/www/js/echarts-map',
'echarts/chart/pie': '../../doc/example/www/js/echarts-map',
'echarts/chart/radar': '../../doc/example/www/js/echarts-map',
'echarts/chart/map': '../../doc/example/www/js/echarts-map',
'echarts/chart/force': '../../doc/example/www/js/echarts-map',
'echarts/chart/chord': '../../doc/example/www/js/echarts-map'
}
});
*/
var echarts;
var webkitDepData;
require(
......@@ -115,10 +99,15 @@ require(
}
}
}
optionMap.force2.series[0] = webkitDepData;
optionMap.force2.color = ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'];
if (typeof curEvent != 'undefined') {
clearTimeout(showChartTimer);
getCurParams();
showChart()
clearTimeout(showChartTimer);
getCurParams();
showChart()
//showChartTimer = setTimeout(showChart, 500);
}
}
......@@ -147,23 +136,23 @@ var timeTicket;
var dom;
var optionKey;
function getCurParams(){
clearInterval(timeTicket);
clearInterval(timeTicket);
var len = curEvent.currentSlide.childNodes.length;
while(--len) {
dom = curEvent.currentSlide.childNodes[len];
if (dom.className == 'main'){
optionKey = dom.getAttribute('optionKey');
if (optionKey == 'multiCharts') {
if (myChart2 && myChart2.dispose) {
myChart2.getDom().className = 'main';
myChart2.dispose();
myChart2 = null;
}
if (myChart3 && myChart3.dispose) {
myChart3.getDom().className = 'main';
myChart3.dispose();
myChart3 = null;
}
if (myChart2 && myChart2.dispose) {
myChart2.getDom().className = 'main';
myChart2.dispose();
myChart2 = null;
}
if (myChart3 && myChart3.dispose) {
myChart3.getDom().className = 'main';
myChart3.dispose();
myChart3 = null;
}
}
return;
}
......@@ -171,20 +160,20 @@ function getCurParams(){
optionKey = false;
}
function showChart() {
if (!echarts) {return;}
if (myChart && myChart.dispose) {
myChart.getDom().className = 'main';
if (!echarts) {return;}
if (myChart && myChart.dispose) {
myChart.getDom().className = 'main';
myChart.dispose();
myChart = null;
}
if (optionKey) {
myChart = echarts.init(dom, theme);
var option = optionMap[optionKey];
dom.className = 'main noLoading';
myChart.setOption(option);
if (functionMap[optionKey]) {
functionMap[optionKey]();
}
var option = optionMap[optionKey];
dom.className = 'main noLoading';
myChart.setOption(option);
if (functionMap[optionKey]) {
functionMap[optionKey]();
}
}
}
......@@ -632,10 +621,10 @@ var optionMap = {
splitNumber: 9,
boundaryGap: [0.05, 0.05],
axisLabel: {
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
splitArea : {show : true}
}
],
......@@ -671,41 +660,41 @@ var optionMap = {
7526158.5, 8105835, 7971452.5
],
markPoint : {
symbol: 'emptyPin',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:true,
position:'top',
formatter: function (a,b,v) {
return Math.round(v/10000) + ' 万'
}
}
}
},
data : [
{type : 'max', name: '最大值', symbolSize:5},
{type : 'min', name: '最小值', symbolSize:5}
]
},
markLine : {
symbol : 'none',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:true,
formatter: function (a,b,v) {
return Math.round(v/10000) + ' 万'
}
}
}
},
data : [
{type : 'average', name: '平均值'}
]
}
symbol: 'emptyPin',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:true,
position:'top',
formatter: function (a,b,v) {
return Math.round(v/10000) + ' 万'
}
}
}
},
data : [
{type : 'max', name: '最大值', symbolSize:5},
{type : 'min', name: '最小值', symbolSize:5}
]
},
markLine : {
symbol : 'none',
itemStyle : {
normal : {
color:'#1e90ff',
label : {
show:true,
formatter: function (a,b,v) {
return Math.round(v/10000) + ' 万'
}
}
}
},
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'上证指数',
......@@ -767,10 +756,10 @@ var optionMap = {
splitNumber: 3,
boundaryGap: [0.05, 0.05],
axisLabel: {
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
splitArea : {show : true}
}
],
......@@ -857,10 +846,10 @@ var optionMap = {
splitNumber:3,
boundaryGap: [0.05, 0.05],
axisLabel: {
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
formatter: function (v) {
return Math.round(v/10000) + ' 万'
}
},
splitArea : {show : true}
}
],
......@@ -1056,133 +1045,122 @@ var optionMap = {
}
]
},
force : (function () {
functionMap.force = function () {
myChart.setOption({
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['家人','朋友']
force1 : {
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['家人','朋友']
},
series : [
{
type:'force',
categories : [
{
name: '人物',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
series : [
{
type:'force',
categories : [
{
name: '人物',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '家人',
itemStyle: {
normal: {
color : '#87cdfa'
}
}
},
{
name:'朋友',
itemStyle: {
normal: {
color : '#9acd32'
}
}
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#800080'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 8
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
density : 0.05,
attractiveness: 1.2,
nodes:[
{category:0, name: '乔布斯', value : 10},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
],
links : [
{source : 1, target : 0, weight : 1},
{source : 2, target : 0, weight : 2},
{source : 3, target : 0, weight : 1},
{source : 4, target : 0, weight : 2},
{source : 5, target : 0, weight : 3},
{source : 6, target : 0, weight : 6},
{source : 7, target : 0, weight : 6},
{source : 8, target : 0, weight : 1},
{source : 9, target : 0, weight : 1},
{source : 10, target : 0, weight : 1},
{source : 3, target : 2, weight : 1},
{source : 6, target : 2, weight : 1},
{source : 6, target : 3, weight : 1},
{source : 6, target : 4, weight : 1},
{source : 6, target : 5, weight : 1},
{source : 7, target : 6, weight : 6},
{source : 7, target : 3, weight : 1},
{source : 9, target : 6, weight : 1}
]
{
name: '家人',
itemStyle: {
normal: {
color : '#87cdfa'
}
}
]
}, true);
}
functionMap.force2 = function () {
myChart.setOption({
color : ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
tooltip : {
trigger: 'item'
},
legend : {
data : ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other'],
orient : 'vertical',
x : 'left'
{
name:'朋友',
itemStyle: {
normal: {
color : '#9acd32'
}
}
}
],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#800080'
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.4)',
lineWidth : 8
}
},
series : [webkitDepData]
}, true);
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
r: 30
},
linkStyle : {}
}
},
minRadius : 15,
maxRadius : 25,
density : 0.05,
attractiveness: 1.2,
nodes:[
{category:0, name: '乔布斯', value : 10},
{category:1, name: '丽萨-乔布斯',value : 2},
{category:1, name: '保罗-乔布斯',value : 3},
{category:1, name: '克拉拉-乔布斯',value : 3},
{category:1, name: '劳伦-鲍威尔',value : 7},
{category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
{category:2, name: '奥巴马',value : 8},
{category:2, name: '比尔-盖茨',value : 9},
{category:2, name: '乔纳森-艾夫',value : 4},
{category:2, name: '蒂姆-库克',value : 4},
{category:2, name: '龙-韦恩',value : 1},
],
links : [
{source : 1, target : 0, weight : 1},
{source : 2, target : 0, weight : 2},
{source : 3, target : 0, weight : 1},
{source : 4, target : 0, weight : 2},
{source : 5, target : 0, weight : 3},
{source : 6, target : 0, weight : 6},
{source : 7, target : 0, weight : 6},
{source : 8, target : 0, weight : 1},
{source : 9, target : 0, weight : 1},
{source : 10, target : 0, weight : 1},
{source : 3, target : 2, weight : 1},
{source : 6, target : 2, weight : 1},
{source : 6, target : 3, weight : 1},
{source : 6, target : 4, weight : 1},
{source : 6, target : 5, weight : 1},
{source : 7, target : 6, weight : 6},
{source : 7, target : 3, weight : 1},
{source : 9, target : 6, weight : 1}
]
}
return {};
})(),
dynamic : (function (){
functionMap.dynamic = function () {
]
},
force2 : {
tooltip : {
trigger: 'item'
},
legend : {
data : ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other'],
orient : 'vertical',
x : 'left'
},
series : []
},
dynamic : (function(){
functionMap.dynamic = function() {
var lastData = 11;
var axisData;
timeTicket = setInterval(function (){
......@@ -1235,10 +1213,12 @@ var optionMap = {
start : 0,
end : 50
},
grid:{y2:30,y:70},
xAxis : [
{
type : 'category',
boundaryGap : true,
axisLine: {onZero: false},
data : (function (){
var now = new Date();
var res = [];
......@@ -1254,6 +1234,7 @@ var optionMap = {
type : 'category',
boundaryGap : true,
splitline : {show : false},
axisLine: {onZero: false},
data : (function (){
var res = [];
var len = 10;
......@@ -1737,7 +1718,7 @@ var optionMap = {
]
},
mix1 : {
color: ['#ff7f50','#87cefa','#da70d6','#ff69b4','#ba55d3','#32cd32','#6495ed'],
color: ['#ff7f50','#87cefa','#da70d6','#ff69b4','#ba55d3','#32cd32','#6495ed'],
tooltip : {
trigger: 'axis'
},
......@@ -1753,7 +1734,7 @@ var optionMap = {
},
calculable : true,
legend: {
x : 'left',
x : 'left',
data:['蒸发量','降水量','平均温度','日蒸发量','夜蒸发量','日降水量','夜降水量']
},
xAxis : [
......@@ -1778,8 +1759,12 @@ var optionMap = {
splitLine : {show : false}
}
],
dataZoom : {
show : true,
realtime: true
},
series : [
{
{
name:'总和',
type:'pie',
tooltip : {
......@@ -1796,7 +1781,7 @@ var optionMap = {
}
},
data:[
{value:356.5, name:'日降水量'},
{value:356.5, name:'日降水量'},
{value:220.4, name:'夜降水量'},
{value:59.0, name:'夜蒸发量'},
{value:440.5, name:'日蒸发量'}
......@@ -1821,122 +1806,122 @@ var optionMap = {
]
},
mix2 : (function (){
var sData1 = (function () {
var d = [];
var len = 40;
var value;
while (len--) {
d.push([
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
Math.round(Math.random()*20)
]);
}
return d;
})();
var sData2 = (function () {
var d = [];
var len = sData1.length;
for (var i = 0; i < len; i++) {
d.push([
sData1[i][0],
sData1[i][1],
Math.round(Math.random()*15)
]);
}
return d;
})();
var sData1 = (function () {
var d = [];
var len = 40;
var value;
while (len--) {
d.push([
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
Math.round(Math.random()*20)
]);
}
return d;
})();
var sData2 = (function () {
var d = [];
var len = sData1.length;
for (var i = 0; i < len; i++) {
d.push([
sData1[i][0],
sData1[i][1],
Math.round(Math.random()*15)
]);
}
return d;
})();
functionMap.mix2 = function (){
var xAxis = myChart.component.xAxis.getAxis(0);
var yAxis = myChart.component.yAxis.getAxis(0);
var len = sData1.length;
var option = myChart.getOption();
option.series = option.series.slice(0,2);
option.legend = {
functionMap.mix2 = function (){
var xAxis = myChart.component.xAxis.getAxis(0);
var yAxis = myChart.component.yAxis.getAxis(0);
var len = sData1.length;
var option = myChart.getOption();
option.series = option.series.slice(0,2);
option.legend = {
data : ['系列1', '系列2']
};
while (len--) {
option.series.push({
type: 'pie',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
}
},
//radius : [(sData1[len][2] + sData2[len][2])/2.5, (sData1[len][2] + sData2[len][2])/2.5 + 15],
radius : (sData1[len][2] + sData2[len][2])/2.5 + 15,
center: [
xAxis.getCoord(sData1[len][0]),
yAxis.getCoord(sData1[len][1])
],
data: [
{name: '系列1', value: sData1[len][2]},
{name: '系列2', value: sData2[len][2]}
]
})
}
option.animation = true;
myChart.setOption(option);
}
while (len--) {
option.series.push({
type: 'pie',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
}
},
//radius : [(sData1[len][2] + sData2[len][2])/2.5, (sData1[len][2] + sData2[len][2])/2.5 + 15],
radius : (sData1[len][2] + sData2[len][2])/2.5 + 15,
center: [
xAxis.getCoord(sData1[len][0]),
yAxis.getCoord(sData1[len][1])
],
data: [
{name: '系列1', value: sData1[len][2]},
{name: '系列2', value: sData2[len][2]}
]
})
}
option.animation = true;
myChart.setOption(option);
}
return {
color : ['rgba(255, 69, 0, 0.5)', 'rgba(30, 144, 255, 0.5)'],
title : {
text: '饼图代替散点',
subtext : '混搭（随机数据）'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
splitNumber: 2,
splitLine : {lineStyle:{color:'#48b',width:2}},
splitArea: {show:true},
axisLine : {show:false}
}
],
yAxis : [
{
type : 'value',
splitNumber: 2,
splitLine : {lineStyle:{color:'#48b',width:2}},
splitArea : {show : true},
axisLine : {show:false}
}
],
animation: false,
series : [
{
type:'scatter',
symbol: 'none',
data: sData1
},
{
type:'scatter',
symbol: 'none',
data: sData2
}
]
};
return {
color : ['rgba(255, 69, 0, 0.5)', 'rgba(30, 144, 255, 0.5)'],
title : {
text: '饼图代替散点',
subtext : '混搭（随机数据）'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
splitNumber: 2,
splitLine : {lineStyle:{color:'#48b',width:2}},
splitArea: {show:true},
axisLine : {show:false}
}
],
yAxis : [
{
type : 'value',
splitNumber: 2,
splitLine : {lineStyle:{color:'#48b',width:2}},
splitArea : {show : true},
axisLine : {show:false}
}
],
animation: false,
series : [
{
type:'scatter',
symbol: 'none',
data: sData1
},
{
type:'scatter',
symbol: 'none',
data: sData2
}
]
};
})(),
mix3 : {
title : {
......@@ -2237,827 +2222,1156 @@ var optionMap = {
return {};
})(),
effect1 : (function() {
var effect = {
show: true,
var effect = {
show: true,
scaleSize: 1,//require('zrender/tool/env').canvasSupported ? 1 : 2,
period: 30, // 运动周期，无单位，值越大越慢
color: '#fff',
color: '#fff',
shadowColor: 'rgba(220,220,220,0.4)',
shadowBlur : 5
};
function itemStyle(idx) {
return {
normal: {
color:'#fff',
borderWidth:1,
borderColor:['rgba(30,144,255,1)','lime'][idx],
lineStyle: {
};
function itemStyle(idx) {
return {
normal: {
color:'#fff',
borderWidth:1,
borderColor:['rgba(30,144,255,1)','lime'][idx],
lineStyle: {
//shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
//shadowBlur: 10,
//shadowOffsetX: 0,
//shadowOffsetY: 0,
type: 'solid'
}
}
}
};
}
}
}
};
functionMap.effect1 = function() {
myChart.setOption({
backgroundColor: 'rgba(0,0,0,0)',
color: ['rgba(30,144,255,1)','lime'],
title : {
text: '中国铁路运输主干线',
subtext:'数据来自维基百科',
sublink: 'http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E9%93%81%E8%B7%AF%E8%BF%90%E8%BE%93',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
color: ['rgba(30,144,255,1)','lime'],
title : {
text: '中国铁路运输主干线',
subtext:'数据来自维基百科',
sublink: 'http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E9%93%81%E8%B7%AF%E8%BF%90%E8%BE%93',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function(v) {
return v[1].replace(':', ' > ');
}
},
legend: {
orient: 'vertical',
x:'left',
selectedMode:'single',
data:['八纵通道', '八横通道'],
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '八纵通道',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#333'
}
}
},
data:[],
markLine : {
symbol: ['circle', 'circle'],
symbolSize : 1,
effect : effect,
itemStyle : itemStyle(0),
return v[1].replace(':', ' > ');
}
},
legend: {
orient: 'vertical',
x:'left',
selectedMode:'single',
data:['八纵通道', '八横通道'],
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '八纵通道',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#333'
}
}
},
data:[],
markLine : {
symbol: ['circle', 'circle'],
symbolSize : 1,
effect : effect,
itemStyle : itemStyle(0),
smooth:true,
data : [
[{name:'北京'}, {name:'哈尔滨'}],
[{name:'哈尔滨'}, {name:'满洲里'}],
[{name:'沈阳'}, {name:'大连'}],
[{name:'大连'}, {name:'烟台'}],
[{name:'烟台'}, {name:'青岛'}],
[{name:'青岛'}, {name:'淮安'}],
[{name:'淮安'}, {name:'上海'}],
[{name:'上海'}, {name:'杭州'}],
[{name:'杭州'}, {name:'宁波'}],
[{name:'宁波'}, {name:'温州'}],
[{name:'温州'}, {name:'福州'}],
[{name:'福州'}, {name:'厦门'}],
[{name:'厦门'}, {name:'广州'}],
[{name:'广州'}, {name:'湛江'}],
[{name:'北京'}, {name:'天津'}],
[{name:'天津'}, {name:'济南'}],
[{name:'济南'}, {name:'南京'}],
[{name:'南京'}, {name:'上海'}],
[{name:'北京'}, {name:'南昌'}],
[{name:'南昌'}, {name:'深圳'}],
[{name:'深圳'}, {name:'九龙红磡'}],
[{name:'北京'}, {name:'郑州'}],
[{name:'郑州'}, {name:'武汉'}],
[{name:'武汉'}, {name:'广州'}],
[{name:'大同'}, {name:'太原'}],
[{name:'太原'}, {name:'焦作'}],
[{name:'焦作'}, {name:'洛阳'}],
[{name:'洛阳'}, {name:'柳州'}],
[{name:'柳州'}, {name:'湛江'}],
[{name:'包头'}, {name:'西安'}],
[{name:'西安'}, {name:'重庆'}],
[{name:'重庆'}, {name:'贵阳'}],
[{name:'贵阳'}, {name:'柳州'}],
[{name:'柳州'}, {name:'南宁'}],
[{name:'兰州'}, {name:'成都'}],
[{name:'成都'}, {name:'昆明'}]
]
}
},
{
name: '八横通道',
type: 'map',
mapType: 'china',
data:[],
markLine : {
symbol: ['circle', 'circle'],
symbolSize : 1,
effect : effect,
itemStyle : itemStyle(1),
data : [
[{name:'北京'}, {name:'哈尔滨'}],
[{name:'哈尔滨'}, {name:'满洲里'}],
[{name:'沈阳'}, {name:'大连'}],
[{name:'大连'}, {name:'烟台'}],
[{name:'烟台'}, {name:'青岛'}],
[{name:'青岛'}, {name:'淮安'}],
[{name:'淮安'}, {name:'上海'}],
[{name:'上海'}, {name:'杭州'}],
[{name:'杭州'}, {name:'宁波'}],
[{name:'宁波'}, {name:'温州'}],
[{name:'温州'}, {name:'福州'}],
[{name:'福州'}, {name:'厦门'}],
[{name:'厦门'}, {name:'广州'}],
[{name:'广州'}, {name:'湛江'}],
[{name:'北京'}, {name:'天津'}],
[{name:'天津'}, {name:'济南'}],
[{name:'济南'}, {name:'南京'}],
[{name:'南京'}, {name:'上海'}],
[{name:'北京'}, {name:'南昌'}],
[{name:'南昌'}, {name:'深圳'}],
[{name:'深圳'}, {name:'九龙红磡'}],
[{name:'北京'}, {name:'郑州'}],
[{name:'郑州'}, {name:'武汉'}],
[{name:'武汉'}, {name:'广州'}],
[{name:'大同'}, {name:'太原'}],
[{name:'太原'}, {name:'焦作'}],
[{name:'焦作'}, {name:'洛阳'}],
[{name:'洛阳'}, {name:'柳州'}],
[{name:'柳州'}, {name:'湛江'}],
[{name:'包头'}, {name:'西安'}],
[{name:'西安'}, {name:'重庆'}],
[{name:'重庆'}, {name:'贵阳'}],
[{name:'贵阳'}, {name:'柳州'}],
[{name:'柳州'}, {name:'南宁'}],
[{name:'兰州'}, {name:'成都'}],
[{name:'成都'}, {name:'昆明'}]
]
}
},
{
name: '八横通道',
type: 'map',
mapType: 'china',
data:[],
markLine : {
symbol: ['circle', 'circle'],
symbolSize : 1,
effect : effect,
itemStyle : itemStyle(1),
smooth:true,
data : [
[{name:'北京'}, {name:'兰州'}],
[{name:'兰州'}, {name:'拉萨'}],
[{name:'大同'}, {name:'秦皇岛'}],
[{name:'神木'}, {name:'黄骅'}],
[{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'龙口'}],
[{name:'龙口'}, {name:'烟台'}],
[{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}],
[{name:'长治'}, {name:'邯郸'}],
[{name:'邯郸'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}],
[{name:'瓦塘'}, {name:'临汾'}],
[{name:'临汾'}, {name:'长治'}],
[{name:'长治'}, {name:'汤阴'}],
[{name:'汤阴'}, {name:'台前'}],
[{name:'台前'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}],
[{name:'侯马'}, {name:'月山'}],
[{name:'月山'}, {name:'新乡'}],
[{name:'新乡'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}],
[{name:'连云港'}, {name:'郑州'}],
[{name:'郑州'}, {name:'兰州'}],
[{name:'兰州'}, {name:'乌鲁木齐'}],
[{name:'乌鲁木齐'}, {name:'阿拉山口'}],
[{name:'西安'}, {name:'南阳'}],
[{name:'南阳'}, {name:'信阳'}],
[{name:'信阳'}, {name:'合肥'}],
[{name:'合肥'}, {name:'南京'}],
[{name:'南京'}, {name:'启东'}],
[{name:'重庆'}, {name:'武汉'}],
[{name:'武汉'}, {name:'九江'}],
[{name:'九江'}, {name:'铜陵'}],
[{name:'铜陵'}, {name:'南京'}],
[{name:'南京'}, {name:'上海'}],
[{name:'上海'}, {name:'怀化'}],
[{name:'怀化'}, {name:'重庆'}],
[{name:'重庆'}, {name:'成都'}],
[{name:'成都'}, {name:'贵阳'}],
[{name:'贵阳'}, {name:'昆明'}],
[{name:'昆明'}, {name:'南宁'}],
[{name:'南宁'}, {name:'黎塘'}],
[{name:'黎塘'}, {name:'湛江'}]
]
},
geoCoord: {
'阿拉山口':[82.5757,45.1706],
'包头':[109.8403,40.6574],
'北京':[116.4075,39.9040],
'成都':[104.0665,30.5723],
'大连':[121.6147,38.9140],
'大同':[113.3001,40.0768],
'德州':[116.3575,37.4341],
'福州':[119.2965,26.0745],
'广州':[113.2644,23.1292],
'贵阳':[106.6302,26.6477],
'哈尔滨':[126.5363,45.8023],
'邯郸':[114.5391,36.6256],
'杭州':[120.1551,30.2741],
'合肥':[117.2272,31.8206],
'侯马':[111.3720,35.6191],
'怀化':[109.9985,27.5550],
'淮安':[119.0153,33.6104],
'黄骅':[117.3300,38.3714],
'济南':[117.1205,36.6510],
'焦作':[113.2418,35.2159],
'九江':[116.0019,29.7051],
'九龙红磡':[114.1870,22.3076],
'昆明':[102.8329,24.8801],
'拉萨':[91.1409,29.6456],
'兰州':[103.8343,36.0611],
'黎塘':[109.1363,23.2066],
'连云港':[119.2216,34.5967],
'临汾':[111.5190,36.0880],
'柳州':[109.4160,24.3255],
'龙口':[120.4778,37.6461],
'洛阳':[112.4540,34.6197],
'满洲里':[117.3787,49.5978],
'南昌':[115.8581,28.6832],
'南京':[118.7969,32.0603],
'南宁':[108.3661,22.8172],
'南阳':[112.5283,32.9908],
'宁波':[121.5440,29.8683],
'启东':[121.6574,31.8082],
'秦皇岛':[119.6005,39.9354],
'青岛':[120.3826,36.0671],
'日照':[119.5269,35.4164],
'厦门':[118.0894,24.4798],
'上海':[121.4737,31.2304],
'深圳':[114.0579,22.5431],
'神木':[110.4871,38.8610],
'沈阳':[123.4315,41.8057],
'台前':[115.8717,35.9701],
'太原':[112.5489,37.8706],
'汤阴':[114.3572,35.9218],
'天津':[117.2010,39.0842],
'铜陵':[117.8121,30.9454],
'瓦塘':[109.7600,23.3161],
'温州':[120.6994,27.9943],
'乌鲁木齐':[87.6168,43.8256],
'武汉':[114.3054,30.5931],
'西安':[108.9402,34.3416],
'新乡':[113.9268,35.3030],
'信阳':[114.0913,32.1470],
'烟台':[121.4479,37.4638],
'兖州':[116.7838,35.5531],
'月山':[113.0550,35.2104],
'湛江':[110.3594,21.2707],
'长治':[113.1163,36.1954],
'郑州':[113.6254,34.7466],
'重庆':[106.5516,29.5630]
}
}
]
}, true);
data : [
[{name:'北京'}, {name:'兰州'}],
[{name:'兰州'}, {name:'拉萨'}],
[{name:'大同'}, {name:'秦皇岛'}],
[{name:'神木'}, {name:'黄骅'}],
[{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'龙口'}],
[{name:'龙口'}, {name:'烟台'}],
[{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}],
[{name:'长治'}, {name:'邯郸'}],
[{name:'邯郸'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}],
[{name:'瓦塘'}, {name:'临汾'}],
[{name:'临汾'}, {name:'长治'}],
[{name:'长治'}, {name:'汤阴'}],
[{name:'汤阴'}, {name:'台前'}],
[{name:'台前'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}],
[{name:'侯马'}, {name:'月山'}],
[{name:'月山'}, {name:'新乡'}],
[{name:'新乡'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}],
[{name:'连云港'}, {name:'郑州'}],
[{name:'郑州'}, {name:'兰州'}],
[{name:'兰州'}, {name:'乌鲁木齐'}],
[{name:'乌鲁木齐'}, {name:'阿拉山口'}],
[{name:'西安'}, {name:'南阳'}],
[{name:'南阳'}, {name:'信阳'}],
[{name:'信阳'}, {name:'合肥'}],
[{name:'合肥'}, {name:'南京'}],
[{name:'南京'}, {name:'启东'}],
[{name:'重庆'}, {name:'武汉'}],
[{name:'武汉'}, {name:'九江'}],
[{name:'九江'}, {name:'铜陵'}],
[{name:'铜陵'}, {name:'南京'}],
[{name:'南京'}, {name:'上海'}],
[{name:'上海'}, {name:'怀化'}],
[{name:'怀化'}, {name:'重庆'}],
[{name:'重庆'}, {name:'成都'}],
[{name:'成都'}, {name:'贵阳'}],
[{name:'贵阳'}, {name:'昆明'}],
[{name:'昆明'}, {name:'南宁'}],
[{name:'南宁'}, {name:'黎塘'}],
[{name:'黎塘'}, {name:'湛江'}]
]
},
geoCoord: {
'阿拉山口':[82.5757,45.1706],
'包头':[109.8403,40.6574],
'北京':[116.4075,39.9040],
'成都':[104.0665,30.5723],
'大连':[121.6147,38.9140],
'大同':[113.3001,40.0768],
'德州':[116.3575,37.4341],
'福州':[119.2965,26.0745],
'广州':[113.2644,23.1292],
'贵阳':[106.6302,26.6477],
'哈尔滨':[126.5363,45.8023],
'邯郸':[114.5391,36.6256],
'杭州':[120.1551,30.2741],
'合肥':[117.2272,31.8206],
'侯马':[111.3720,35.6191],
'怀化':[109.9985,27.5550],
'淮安':[119.0153,33.6104],
'黄骅':[117.3300,38.3714],
'济南':[117.1205,36.6510],
'焦作':[113.2418,35.2159],
'九江':[116.0019,29.7051],
'九龙红磡':[114.1870,22.3076],
'昆明':[102.8329,24.8801],
'拉萨':[91.1409,29.6456],
'兰州':[103.8343,36.0611],
'黎塘':[109.1363,23.2066],
'连云港':[119.2216,34.5967],
'临汾':[111.5190,36.0880],
'柳州':[109.4160,24.3255],
'龙口':[120.4778,37.6461],
'洛阳':[112.4540,34.6197],
'满洲里':[117.3787,49.5978],
'南昌':[115.8581,28.6832],
'南京':[118.7969,32.0603],
'南宁':[108.3661,22.8172],
'南阳':[112.5283,32.9908],
'宁波':[121.5440,29.8683],
'启东':[121.6574,31.8082],
'秦皇岛':[119.6005,39.9354],
'青岛':[120.3826,36.0671],
'日照':[119.5269,35.4164],
'厦门':[118.0894,24.4798],
'上海':[121.4737,31.2304],
'深圳':[114.0579,22.5431],
'神木':[110.4871,38.8610],
'沈阳':[123.4315,41.8057],
'台前':[115.8717,35.9701],
'太原':[112.5489,37.8706],
'汤阴':[114.3572,35.9218],
'天津':[117.2010,39.0842],
'铜陵':[117.8121,30.9454],
'瓦塘':[109.7600,23.3161],
'温州':[120.6994,27.9943],
'乌鲁木齐':[87.6168,43.8256],
'武汉':[114.3054,30.5931],
'西安':[108.9402,34.3416],
'新乡':[113.9268,35.3030],
'信阳':[114.0913,32.1470],
'烟台':[121.4479,37.4638],
'兖州':[116.7838,35.5531],
'月山':[113.0550,35.2104],
'湛江':[110.3594,21.2707],
'长治':[113.1163,36.1954],
'郑州':[113.6254,34.7466],
'重庆':[106.5516,29.5630]
}
}
]
}, true);
}
functionMap.effect2 = function () {
myChart.setOption({
backgroundColor: 'rgba(0,0,0,0)',
color: ['gold','aqua','lime'],
title : {
text: '模拟迁徙',
subtext:'数据纯属虚构',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
return {};
})(),
effect2 : {
backgroundColor: 'rgba(0,0,0,0)',
color: ['gold','aqua','lime'],
title : {
text: '模拟迁徙',
subtext:'数据纯属虚构',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function(v) {
return v[1].replace(':', ' > ');
}
},
legend: {
orient: 'vertical',
x:'left',
data:['北京 Top10', '上海 Top10', '广州 Top10'],
selectedMode: 'single',
selected:{
'上海 Top10' : false,
'广州 Top10' : false
},
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataRange: {
min : 0,
max : 100,
calculable : true,
return v[1].replace(':', ' > ');
}
},
legend: {
orient: 'vertical',
x:'left',
data:['北京 Top10', '上海 Top10', '广州 Top10'],
selectedMode: 'single',
selected:{
'上海 Top10' : false,
'广州 Top10' : false
},
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataRange: {
min : 0,
max : 100,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
series : [
{
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#333'
}
}
},
data:[],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
[{name:'北京'},{name:'包头'}],
[{name:'北京'},{name:'北海'}],
[{name:'北京'},{name:'广州'}],
[{name:'北京'},{name:'郑州'}],
[{name:'北京'},{name:'长春'}],
[{name:'北京'},{name:'长治'}],
[{name:'北京'},{name:'重庆'}],
[{name:'北京'},{name:'长沙'}],
[{name:'北京'},{name:'成都'}],
[{name:'北京'},{name:'常州'}],
[{name:'北京'},{name:'丹东'}],
[{name:'北京'},{name:'大连'}],
[{name:'北京'},{name:'东营'}],
[{name:'北京'},{name:'延安'}],
[{name:'北京'},{name:'福州'}],
[{name:'北京'},{name:'海口'}],
[{name:'北京'},{name:'呼和浩特'}],
[{name:'北京'},{name:'合肥'}],
[{name:'北京'},{name:'杭州'}],
[{name:'北京'},{name:'哈尔滨'}],
[{name:'北京'},{name:'舟山'}],
[{name:'北京'},{name:'银川'}],
[{name:'北京'},{name:'衢州'}],
[{name:'北京'},{name:'南昌'}],
[{name:'北京'},{name:'昆明'}],
[{name:'北京'},{name:'贵阳'}],
[{name:'北京'},{name:'兰州'}],
[{name:'北京'},{name:'拉萨'}],
[{name:'北京'},{name:'连云港'}],
[{name:'北京'},{name:'临沂'}],
[{name:'北京'},{name:'柳州'}],
[{name:'北京'},{name:'宁波'}],
[{name:'北京'},{name:'南京'}],
[{name:'北京'},{name:'南宁'}],
[{name:'北京'},{name:'南通'}],
[{name:'北京'},{name:'上海'}],
[{name:'北京'},{name:'沈阳'}],
[{name:'北京'},{name:'西安'}],
[{name:'北京'},{name:'汕头'}],
[{name:'北京'},{name:'深圳'}],
[{name:'北京'},{name:'青岛'}],
[{name:'北京'},{name:'济南'}],
[{name:'北京'},{name:'太原'}],
[{name:'北京'},{name:'乌鲁木齐'}],
[{name:'北京'},{name:'潍坊'}],
[{name:'北京'},{name:'威海'}],
[{name:'北京'},{name:'温州'}],
[{name:'北京'},{name:'武汉'}],
[{name:'北京'},{name:'无锡'}],
[{name:'北京'},{name:'厦门'}],
[{name:'北京'},{name:'西宁'}],
[{name:'北京'},{name:'徐州'}],
[{name:'北京'},{name:'烟台'}],
[{name:'北京'},{name:'盐城'}],
[{name:'北京'},{name:'珠海'}],
[{name:'上海'},{name:'包头'}],
[{name:'上海'},{name:'北海'}],
[{name:'上海'},{name:'广州'}],
[{name:'上海'},{name:'郑州'}],
[{name:'上海'},{name:'长春'}],
[{name:'上海'},{name:'重庆'}],
[{name:'上海'},{name:'长沙'}],
[{name:'上海'},{name:'成都'}],
[{name:'上海'},{name:'丹东'}],
[{name:'上海'},{name:'大连'}],
[{name:'上海'},{name:'福州'}],
[{name:'上海'},{name:'海口'}],
[{name:'上海'},{name:'呼和浩特'}],
[{name:'上海'},{name:'合肥'}],
[{name:'上海'},{name:'哈尔滨'}],
[{name:'上海'},{name:'舟山'}],
[{name:'上海'},{name:'银川'}],
[{name:'上海'},{name:'南昌'}],
[{name:'上海'},{name:'昆明'}],
[{name:'上海'},{name:'贵阳'}],
[{name:'上海'},{name:'兰州'}],
[{name:'上海'},{name:'拉萨'}],
[{name:'上海'},{name:'连云港'}],
[{name:'上海'},{name:'临沂'}],
[{name:'上海'},{name:'柳州'}],
[{name:'上海'},{name:'宁波'}],
[{name:'上海'},{name:'南宁'}],
[{name:'上海'},{name:'北京'}],
[{name:'上海'},{name:'沈阳'}],
[{name:'上海'},{name:'秦皇岛'}],
[{name:'上海'},{name:'西安'}],
[{name:'上海'},{name:'石家庄'}],
[{name:'上海'},{name:'汕头'}],
[{name:'上海'},{name:'深圳'}],
[{name:'上海'},{name:'青岛'}],
[{name:'上海'},{name:'济南'}],
[{name:'上海'},{name:'天津'}],
[{name:'上海'},{name:'太原'}],
[{name:'上海'},{name:'乌鲁木齐'}],
[{name:'上海'},{name:'潍坊'}],
[{name:'上海'},{name:'威海'}],
[{name:'上海'},{name:'温州'}],
[{name:'上海'},{name:'武汉'}],
[{name:'上海'},{name:'厦门'}],
[{name:'上海'},{name:'西宁'}],
[{name:'上海'},{name:'徐州'}],
[{name:'上海'},{name:'烟台'}],
[{name:'上海'},{name:'珠海'}],
[{name:'广州'},{name:'北海'}],
[{name:'广州'},{name:'郑州'}],
[{name:'广州'},{name:'长春'}],
[{name:'广州'},{name:'重庆'}],
[{name:'广州'},{name:'长沙'}],
[{name:'广州'},{name:'成都'}],
[{name:'广州'},{name:'常州'}],
[{name:'广州'},{name:'大连'}],
[{name:'广州'},{name:'福州'}],
[{name:'广州'},{name:'海口'}],
[{name:'广州'},{name:'呼和浩特'}],
[{name:'广州'},{name:'合肥'}],
[{name:'广州'},{name:'杭州'}],
[{name:'广州'},{name:'哈尔滨'}],
[{name:'广州'},{name:'舟山'}],
[{name:'广州'},{name:'银川'}],
[{name:'广州'},{name:'南昌'}],
[{name:'广州'},{name:'昆明'}],
[{name:'广州'},{name:'贵阳'}],
[{name:'广州'},{name:'兰州'}],
[{name:'广州'},{name:'拉萨'}],
[{name:'广州'},{name:'连云港'}],
[{name:'广州'},{name:'临沂'}],
[{name:'广州'},{name:'柳州'}],
[{name:'广州'},{name:'宁波'}],
[{name:'广州'},{name:'南京'}],
[{name:'广州'},{name:'南宁'}],
[{name:'广州'},{name:'南通'}],
[{name:'广州'},{name:'北京'}],
[{name:'广州'},{name:'上海'}],
[{name:'广州'},{name:'沈阳'}],
[{name:'广州'},{name:'西安'}],
[{name:'广州'},{name:'石家庄'}],
[{name:'广州'},{name:'汕头'}],
[{name:'广州'},{name:'青岛'}],
[{name:'广州'},{name:'济南'}],
[{name:'广州'},{name:'天津'}],
[{name:'广州'},{name:'太原'}],
[{name:'广州'},{name:'乌鲁木齐'}],
[{name:'广州'},{name:'温州'}],
[{name:'广州'},{name:'武汉'}],
[{name:'广州'},{name:'无锡'}],
[{name:'广州'},{name:'厦门'}],
[{name:'广州'},{name:'西宁'}],
[{name:'广州'},{name:'徐州'}],
[{name:'广州'},{name:'烟台'}],
[{name:'广州'},{name:'盐城'}]
]
},
geoCoord: {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'厦门': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸阳': [108.4131,34.8706],
'哈尔滨': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉兴': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大连': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'宁波': [121.5967,29.6466],
'宝鸡': [107.1826,34.3433],
'宿迁': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'广州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'张家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'扬州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉萨': [91.1865,30.1465],
'无锡': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'枣庄': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武汉': [114.3896,30.6628],
'汕头': [117.1692,23.3405],
'江门': [112.6318,22.1484],
'沈阳': [123.1238,42.1216],
'沧州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'济南': [117.1582,36.8701],
'济宁': [116.8286,35.3375],
'海口': [110.3893,19.8516],
'淄博': [118.0371,36.6064],
'淮安': [118.927,33.4039],
'深圳': [114.5435,22.5439],
'清远': [112.9175,24.3292],
'温州': [120.498,27.8119],
'渭南': [109.7864,35.0299],
'湖州': [119.8608,30.7782],
'湘潭': [112.5439,27.7075],
'滨州': [117.8174,37.4963],
'潍坊': [119.0918,36.524],
'烟台': [120.7397,37.5128],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
'盐城': [120.2234,33.5577],
'盘锦': [121.9482,41.0449],
'石家庄': [114.4995,38.1006],
'福州': [119.4543,25.9222],
'秦皇岛': [119.2126,40.0232],
'绍兴': [120.564,29.7565],
'聊城': [115.9167,36.4032],
'肇庆': [112.1265,23.5822],
'舟山': [122.2559,30.2234],
'苏州': [120.6519,31.3989],
'莱芜': [117.6526,36.2714],
'菏泽': [115.6201,35.2057],
'营口': [122.4316,40.4297],
'葫芦岛': [120.1575,40.578],
'衡水': [115.8838,37.7161],
'衢州': [118.6853,28.8666],
'西宁': [101.4038,36.8207],
'西安': [109.1162,34.2004],
'贵阳': [106.6992,26.7682],
'连云港': [119.1248,34.552],
'邢台': [114.8071,37.2821],
'邯郸': [114.4775,36.535],
'郑州': [113.4668,34.6234],
'鄂尔多斯': [108.9734,39.2487],
'重庆': [107.7539,30.1904],
'金华': [120.0037,29.1028],
'铜川': [109.0393,35.1947],
'银川': [106.3586,38.1775],
'镇江': [119.4763,31.9702],
'长春': [125.8154,44.2584],
'长沙': [113.0823,28.2568],
'长治': [112.8625,36.4746],
'阳泉': [113.4778,38.0951],
'青岛': [120.4651,36.3373],
'韶关': [113.7964,24.7028]
}
},
{
name: '北京 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
textStyle:{
color:'#fff'
}
},
series : [
{
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#333'
}
}
},
data:[],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
[{name:'北京'},{name:'包头'}],
[{name:'北京'},{name:'北海'}],
[{name:'北京'},{name:'广州'}],
[{name:'北京'},{name:'郑州'}],
[{name:'北京'},{name:'长春'}],
[{name:'北京'},{name:'长治'}],
[{name:'北京'},{name:'重庆'}],
[{name:'北京'},{name:'长沙'}],
[{name:'北京'},{name:'成都'}],
[{name:'北京'},{name:'常州'}],
[{name:'北京'},{name:'丹东'}],
[{name:'北京'},{name:'大连'}],
[{name:'北京'},{name:'东营'}],
[{name:'北京'},{name:'延安'}],
[{name:'北京'},{name:'福州'}],
[{name:'北京'},{name:'海口'}],
[{name:'北京'},{name:'呼和浩特'}],
[{name:'北京'},{name:'合肥'}],
[{name:'北京'},{name:'杭州'}],
[{name:'北京'},{name:'哈尔滨'}],
[{name:'北京'},{name:'舟山'}],
[{name:'北京'},{name:'银川'}],
[{name:'北京'},{name:'衢州'}],
[{name:'北京'},{name:'南昌'}],
[{name:'北京'},{name:'昆明'}],
[{name:'北京'},{name:'贵阳'}],
[{name:'北京'},{name:'兰州'}],
[{name:'北京'},{name:'拉萨'}],
[{name:'北京'},{name:'连云港'}],
[{name:'北京'},{name:'临沂'}],
[{name:'北京'},{name:'柳州'}],
[{name:'北京'},{name:'宁波'}],
[{name:'北京'},{name:'南京'}],
[{name:'北京'},{name:'南宁'}],
[{name:'北京'},{name:'南通'}],
[{name:'北京'},{name:'上海'}],
[{name:'北京'},{name:'沈阳'}],
[{name:'北京'},{name:'西安'}],
[{name:'北京'},{name:'汕头'}],
[{name:'北京'},{name:'深圳'}],
[{name:'北京'},{name:'青岛'}],
[{name:'北京'},{name:'济南'}],
[{name:'北京'},{name:'太原'}],
[{name:'北京'},{name:'乌鲁木齐'}],
[{name:'北京'},{name:'潍坊'}],
[{name:'北京'},{name:'威海'}],
[{name:'北京'},{name:'温州'}],
[{name:'北京'},{name:'武汉'}],
[{name:'北京'},{name:'无锡'}],
[{name:'北京'},{name:'厦门'}],
[{name:'北京'},{name:'西宁'}],
[{name:'北京'},{name:'徐州'}],
[{name:'北京'},{name:'烟台'}],
[{name:'北京'},{name:'盐城'}],
[{name:'北京'},{name:'珠海'}],
[{name:'上海'},{name:'包头'}],
[{name:'上海'},{name:'北海'}],
[{name:'上海'},{name:'广州'}],
[{name:'上海'},{name:'郑州'}],
[{name:'上海'},{name:'长春'}],
[{name:'上海'},{name:'重庆'}],
[{name:'上海'},{name:'长沙'}],
[{name:'上海'},{name:'成都'}],
[{name:'上海'},{name:'丹东'}],
[{name:'上海'},{name:'大连'}],
[{name:'上海'},{name:'福州'}],
[{name:'上海'},{name:'海口'}],
[{name:'上海'},{name:'呼和浩特'}],
[{name:'上海'},{name:'合肥'}],
[{name:'上海'},{name:'哈尔滨'}],
[{name:'上海'},{name:'舟山'}],
[{name:'上海'},{name:'银川'}],
[{name:'上海'},{name:'南昌'}],
[{name:'上海'},{name:'昆明'}],
[{name:'上海'},{name:'贵阳'}],
[{name:'上海'},{name:'兰州'}],
[{name:'上海'},{name:'拉萨'}],
[{name:'上海'},{name:'连云港'}],
[{name:'上海'},{name:'临沂'}],
[{name:'上海'},{name:'柳州'}],
[{name:'上海'},{name:'宁波'}],
[{name:'上海'},{name:'南宁'}],
[{name:'上海'},{name:'北京'}],
[{name:'上海'},{name:'沈阳'}],
[{name:'上海'},{name:'秦皇岛'}],
[{name:'上海'},{name:'西安'}],
[{name:'上海'},{name:'石家庄'}],
[{name:'上海'},{name:'汕头'}],
[{name:'上海'},{name:'深圳'}],
[{name:'上海'},{name:'青岛'}],
[{name:'上海'},{name:'济南'}],
[{name:'上海'},{name:'天津'}],
[{name:'上海'},{name:'太原'}],
[{name:'上海'},{name:'乌鲁木齐'}],
[{name:'上海'},{name:'潍坊'}],
[{name:'上海'},{name:'威海'}],
[{name:'上海'},{name:'温州'}],
[{name:'上海'},{name:'武汉'}],
[{name:'上海'},{name:'厦门'}],
[{name:'上海'},{name:'西宁'}],
[{name:'上海'},{name:'徐州'}],
[{name:'上海'},{name:'烟台'}],
[{name:'上海'},{name:'珠海'}],
[{name:'广州'},{name:'北海'}],
[{name:'广州'},{name:'郑州'}],
[{name:'广州'},{name:'长春'}],
[{name:'广州'},{name:'重庆'}],
[{name:'广州'},{name:'长沙'}],
[{name:'广州'},{name:'成都'}],
[{name:'广州'},{name:'常州'}],
[{name:'广州'},{name:'大连'}],
[{name:'广州'},{name:'福州'}],
[{name:'广州'},{name:'海口'}],
[{name:'广州'},{name:'呼和浩特'}],
[{name:'广州'},{name:'合肥'}],
[{name:'广州'},{name:'杭州'}],
[{name:'广州'},{name:'哈尔滨'}],
[{name:'广州'},{name:'舟山'}],
[{name:'广州'},{name:'银川'}],
[{name:'广州'},{name:'南昌'}],
[{name:'广州'},{name:'昆明'}],
[{name:'广州'},{name:'贵阳'}],
[{name:'广州'},{name:'兰州'}],
[{name:'广州'},{name:'拉萨'}],
[{name:'广州'},{name:'连云港'}],
[{name:'广州'},{name:'临沂'}],
[{name:'广州'},{name:'柳州'}],
[{name:'广州'},{name:'宁波'}],
[{name:'广州'},{name:'南京'}],
[{name:'广州'},{name:'南宁'}],
[{name:'广州'},{name:'南通'}],
[{name:'广州'},{name:'北京'}],
[{name:'广州'},{name:'上海'}],
[{name:'广州'},{name:'沈阳'}],
[{name:'广州'},{name:'西安'}],
[{name:'广州'},{name:'石家庄'}],
[{name:'广州'},{name:'汕头'}],
[{name:'广州'},{name:'青岛'}],
[{name:'广州'},{name:'济南'}],
[{name:'广州'},{name:'天津'}],
[{name:'广州'},{name:'太原'}],
[{name:'广州'},{name:'乌鲁木齐'}],
[{name:'广州'},{name:'温州'}],
[{name:'广州'},{name:'武汉'}],
[{name:'广州'},{name:'无锡'}],
[{name:'广州'},{name:'厦门'}],
[{name:'广州'},{name:'西宁'}],
[{name:'广州'},{name:'徐州'}],
[{name:'广州'},{name:'烟台'}],
[{name:'广州'},{name:'盐城'}]
]
},
geoCoord: {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'厦门': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸阳': [108.4131,34.8706],
'哈尔滨': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉兴': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大连': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'宁波': [121.5967,29.6466],
'宝鸡': [107.1826,34.3433],
'宿迁': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'广州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'张家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'扬州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉萨': [91.1865,30.1465],
'无锡': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'枣庄': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武汉': [114.3896,30.6628],
'汕头': [117.1692,23.3405],
'江门': [112.6318,22.1484],
'沈阳': [123.1238,42.1216],
'沧州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'济南': [117.1582,36.8701],
'济宁': [116.8286,35.3375],
'海口': [110.3893,19.8516],
'淄博': [118.0371,36.6064],
'淮安': [118.927,33.4039],
'深圳': [114.5435,22.5439],
'清远': [112.9175,24.3292],
'温州': [120.498,27.8119],
'渭南': [109.7864,35.0299],
'湖州': [119.8608,30.7782],
'湘潭': [112.5439,27.7075],
'滨州': [117.8174,37.4963],
'潍坊': [119.0918,36.524],
'烟台': [120.7397,37.5128],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
'盐城': [120.2234,33.5577],
'盘锦': [121.9482,41.0449],
'石家庄': [114.4995,38.1006],
'福州': [119.4543,25.9222],
'秦皇岛': [119.2126,40.0232],
'绍兴': [120.564,29.7565],
'聊城': [115.9167,36.4032],
'肇庆': [112.1265,23.5822],
'舟山': [122.2559,30.2234],
'苏州': [120.6519,31.3989],
'莱芜': [117.6526,36.2714],
'菏泽': [115.6201,35.2057],
'营口': [122.4316,40.4297],
'葫芦岛': [120.1575,40.578],
'衡水': [115.8838,37.7161],
'衢州': [118.6853,28.8666],
'西宁': [101.4038,36.8207],
'西安': [109.1162,34.2004],
'贵阳': [106.6992,26.7682],
'连云港': [119.1248,34.552],
'邢台': [114.8071,37.2821],
'邯郸': [114.4775,36.535],
'郑州': [113.4668,34.6234],
'鄂尔多斯': [108.9734,39.2487],
'重庆': [107.7539,30.1904],
'金华': [120.0037,29.1028],
'铜川': [109.0393,35.1947],
'银川': [106.3586,38.1775],
'镇江': [119.4763,31.9702],
'长春': [125.8154,44.2584],
'长沙': [113.0823,28.2568],
'长治': [112.8625,36.4746],
'阳泉': [113.4778,38.0951],
'青岛': [120.4651,36.3373],
'韶关': [113.7964,24.7028]
}
},
{
name: '北京 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'大连',value:80}],
[{name:'北京'}, {name:'南宁',value:70}],
[{name:'北京'}, {name:'南昌',value:60}],
[{name:'北京'}, {name:'拉萨',value:50}],
[{name:'北京'}, {name:'长春',value:40}],
[{name:'北京'}, {name:'包头',value:30}],
[{name:'北京'}, {name:'重庆',value:20}],
[{name:'北京'}, {name:'常州',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
}
},
data : [
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'大连',value:80}],
[{name:'北京'}, {name:'南宁',value:70}],
[{name:'北京'}, {name:'南昌',value:60}],
[{name:'北京'}, {name:'拉萨',value:50}],
[{name:'北京'}, {name:'长春',value:40}],
[{name:'北京'}, {name:'包头',value:30}],
[{name:'北京'}, {name:'重庆',value:20}],
[{name:'北京'}, {name:'常州',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function(v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'上海',value:95},
{name:'广州',value:90},
{name:'大连',value:80},
{name:'南宁',value:70},
{name:'南昌',value:60},
{name:'拉萨',value:50},
{name:'长春',value:40},
{name:'包头',value:30},
{name:'重庆',value:20},
{name:'常州',value:10}
]
}
},
{
name: '上海 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'上海',value:95},
{name:'广州',value:90},
{name:'大连',value:80},
{name:'南宁',value:70},
{name:'南昌',value:60},
{name:'拉萨',value:50},
{name:'长春',value:40},
{name:'包头',value:30},
{name:'重庆',value:20},
{name:'常州',value:10}
]
}
},
{
name: '上海 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'上海'},{name:'包头',value:95}],
[{name:'上海'},{name:'昆明',value:90}],
[{name:'上海'},{name:'广州',value:80}],
[{name:'上海'},{name:'郑州',value:70}],
[{name:'上海'},{name:'长春',value:60}],
[{name:'上海'},{name:'重庆',value:50}],
[{name:'上海'},{name:'长沙',value:40}],
[{name:'上海'},{name:'北京',value:30}],
[{name:'上海'},{name:'丹东',value:20}],
[{name:'上海'},{name:'大连',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
}
},
data : [
[{name:'上海'},{name:'包头',value:95}],
[{name:'上海'},{name:'昆明',value:90}],
[{name:'上海'},{name:'广州',value:80}],
[{name:'上海'},{name:'郑州',value:70}],
[{name:'上海'},{name:'长春',value:60}],
[{name:'上海'},{name:'重庆',value:50}],
[{name:'上海'},{name:'长沙',value:40}],
[{name:'上海'},{name:'北京',value:30}],
[{name:'上海'},{name:'丹东',value:20}],
[{name:'上海'},{name:'大连',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function(v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'包头',value:95},
{name:'昆明',value:90},
{name:'广州',value:80},
{name:'郑州',value:70},
{name:'长春',value:60},
{name:'重庆',value:50},
{name:'长沙',value:40},
{name:'北京',value:30},
{name:'丹东',value:20},
{name:'大连',value:10}
]
}
},
{
name: '广州 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'包头',value:95},
{name:'昆明',value:90},
{name:'广州',value:80},
{name:'郑州',value:70},
{name:'长春',value:60},
{name:'重庆',value:50},
{name:'长沙',value:40},
{name:'北京',value:30},
{name:'丹东',value:20},
{name:'大连',value:10}
]
}
},
{
name: '广州 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'广州'},{name:'福州',value:95}],
[{name:'广州'},{name:'太原',value:90}],
[{name:'广州'},{name:'长春',value:80}],
[{name:'广州'},{name:'重庆',value:70}],
[{name:'广州'},{name:'西安',value:60}],
[{name:'广州'},{name:'成都',value:50}],
[{name:'广州'},{name:'常州',value:40}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'广州'},{name:'北海',value:20}],
[{name:'广州'},{name:'海口',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
}
},
data : [
[{name:'广州'},{name:'福州',value:95}],
[{name:'广州'},{name:'太原',value:90}],
[{name:'广州'},{name:'长春',value:80}],
[{name:'广州'},{name:'重庆',value:70}],
[{name:'广州'},{name:'西安',value:60}],
[{name:'广州'},{name:'成都',value:50}],
[{name:'广州'},{name:'常州',value:40}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'广州'},{name:'北海',value:20}],
[{name:'广州'},{name:'海口',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function(v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'福州',value:95},
{name:'太原',value:90},
{name:'长春',value:80},
{name:'重庆',value:70},
{name:'西安',value:60},
{name:'成都',value:50},
{name:'常州',value:40},
{name:'北京',value:30},
{name:'北海',value:20},
{name:'海口',value:10}
]
}
}
]
}, true);
}
return {};
})()
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'福州',value:95},
{name:'太原',value:90},
{name:'长春',value:80},
{name:'重庆',value:70},
{name:'西安',value:60},
{name:'成都',value:50},
{name:'常州',value:40},
{name:'北京',value:30},
{name:'北海',value:20},
{name:'海口',value:10}
]
}
}
]
},
effect3 : (function(){
var placeList = [
{name:'海门', geoCoord:[121.15, 31.89]},
{name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
{name:'招远', geoCoord:[120.38, 37.35]},
{name:'舟山', geoCoord:[122.207216, 29.985295]},
{name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
{name:'盐城', geoCoord:[120.13, 33.38]},
{name:'赤峰', geoCoord:[118.87, 42.28]},
{name:'青岛', geoCoord:[120.33, 36.07]},
{name:'乳山', geoCoord:[121.52, 36.89]},
{name:'金昌', geoCoord:[102.188043, 38.520089]},
{name:'泉州', geoCoord:[118.58, 24.93]},
{name:'莱西', geoCoord:[120.53, 36.86]},
{name:'日照', geoCoord:[119.46, 35.42]},
{name:'胶南', geoCoord:[119.97, 35.88]},
{name:'南通', geoCoord:[121.05, 32.08]},
{name:'拉萨', geoCoord:[91.11, 29.97]},
{name:'云浮', geoCoord:[112.02, 22.93]},
{name:'梅州', geoCoord:[116.1, 24.55]},
{name:'文登', geoCoord:[122.05, 37.2]},
{name:'上海', geoCoord:[121.48, 31.22]},
{name:'攀枝花', geoCoord:[101.718637, 26.582347]},
{name:'威海', geoCoord:[122.1, 37.5]},
{name:'承德', geoCoord:[117.93, 40.97]},
{name:'厦门', geoCoord:[118.1, 24.46]},
{name:'汕尾', geoCoord:[115.375279, 22.786211]},
{name:'潮州', geoCoord:[116.63, 23.68]},
{name:'丹东', geoCoord:[124.37, 40.13]},
{name:'太仓', geoCoord:[121.1, 31.45]},
{name:'曲靖', geoCoord:[103.79, 25.51]},
{name:'烟台', geoCoord:[121.39, 37.52]},
{name:'福州', geoCoord:[119.3, 26.08]},
{name:'瓦房店', geoCoord:[121.979603, 39.627114]},
{name:'即墨', geoCoord:[120.45, 36.38]},
{name:'抚顺', geoCoord:[123.97, 41.97]},
{name:'玉溪', geoCoord:[102.52, 24.35]},
{name:'张家口', geoCoord:[114.87, 40.82]},
{name:'阳泉', geoCoord:[113.57, 37.85]},
{name:'莱州', geoCoord:[119.942327, 37.177017]},
{name:'湖州', geoCoord:[120.1, 30.86]},
{name:'汕头', geoCoord:[116.69, 23.39]},
{name:'昆山', geoCoord:[120.95, 31.39]},
{name:'宁波', geoCoord:[121.56, 29.86]},
{name:'湛江', geoCoord:[110.359377, 21.270708]},
{name:'揭阳', geoCoord:[116.35, 23.55]},
{name:'荣成', geoCoord:[122.41, 37.16]},
{name:'连云港', geoCoord:[119.16, 34.59]},
{name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
{name:'常熟', geoCoord:[120.74, 31.64]},
{name:'东莞', geoCoord:[113.75, 23.04]},
{name:'河源', geoCoord:[114.68, 23.73]},
{name:'淮安', geoCoord:[119.15, 33.5]},
{name:'泰州', geoCoord:[119.9, 32.49]},
{name:'南宁', geoCoord:[108.33, 22.84]},
{name:'营口', geoCoord:[122.18, 40.65]},
{name:'惠州', geoCoord:[114.4, 23.09]},
{name:'江阴', geoCoord:[120.26, 31.91]},
{name:'蓬莱', geoCoord:[120.75, 37.8]},
{name:'韶关', geoCoord:[113.62, 24.84]},
{name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
{name:'广州', geoCoord:[113.23, 23.16]},
{name:'延安', geoCoord:[109.47, 36.6]},
{name:'太原', geoCoord:[112.53, 37.87]},
{name:'清远', geoCoord:[113.01, 23.7]},
{name:'中山', geoCoord:[113.38, 22.52]},
{name:'昆明', geoCoord:[102.73, 25.04]},
{name:'寿光', geoCoord:[118.73, 36.86]},
{name:'盘锦', geoCoord:[122.070714, 41.119997]},
{name:'长治', geoCoord:[113.08, 36.18]},
{name:'深圳', geoCoord:[114.07, 22.62]},
{name:'珠海', geoCoord:[113.52, 22.3]},
{name:'宿迁', geoCoord:[118.3, 33.96]},
{name:'咸阳', geoCoord:[108.72, 34.36]},
{name:'铜川', geoCoord:[109.11, 35.09]},
{name:'平度', geoCoord:[119.97, 36.77]},
{name:'佛山', geoCoord:[113.11, 23.05]},
{name:'海口', geoCoord:[110.35, 20.02]},
{name:'江门', geoCoord:[113.06, 22.61]},
{name:'章丘', geoCoord:[117.53, 36.72]},
{name:'肇庆', geoCoord:[112.44, 23.05]},
{name:'大连', geoCoord:[121.62, 38.92]},
{name:'临汾', geoCoord:[111.5, 36.08]},
{name:'吴江', geoCoord:[120.63, 31.16]},
{name:'石嘴山', geoCoord:[106.39, 39.04]},
{name:'沈阳', geoCoord:[123.38, 41.8]},
{name:'苏州', geoCoord:[120.62, 31.32]},
{name:'茂名', geoCoord:[110.88, 21.68]},
{name:'嘉兴', geoCoord:[120.76, 30.77]},
{name:'长春', geoCoord:[125.35, 43.88]},
{name:'胶州', geoCoord:[120.03336, 36.264622]},
{name:'银川', geoCoord:[106.27, 38.47]},
{name:'张家港', geoCoord:[120.555821, 31.875428]},
{name:'三门峡', geoCoord:[111.19, 34.76]},
{name:'锦州', geoCoord:[121.15, 41.13]},
{name:'南昌', geoCoord:[115.89, 28.68]},
{name:'柳州', geoCoord:[109.4, 24.33]},
{name:'三亚', geoCoord:[109.511909, 18.252847]},
{name:'自贡', geoCoord:[104.778442, 29.33903]},
{name:'吉林', geoCoord:[126.57, 43.87]},
{name:'阳江', geoCoord:[111.95, 21.85]},
{name:'泸州', geoCoord:[105.39, 28.91]},
{name:'西宁', geoCoord:[101.74, 36.56]},
{name:'宜宾', geoCoord:[104.56, 29.77]},
{name:'呼和浩特', geoCoord:[111.65, 40.82]},
{name:'成都', geoCoord:[104.06, 30.67]},
{name:'大同', geoCoord:[113.3, 40.12]},
{name:'镇江', geoCoord:[119.44, 32.2]},
{name:'桂林', geoCoord:[110.28, 25.29]},
{name:'张家界', geoCoord:[110.479191, 29.117096]},
{name:'宜兴', geoCoord:[119.82, 31.36]},
{name:'北海', geoCoord:[109.12, 21.49]},
{name:'西安', geoCoord:[108.95, 34.27]},
{name:'金坛', geoCoord:[119.56, 31.74]},
{name:'东营', geoCoord:[118.49, 37.46]},
{name:'牡丹江', geoCoord:[129.58, 44.6]},
{name:'遵义', geoCoord:[106.9, 27.7]},
{name:'绍兴', geoCoord:[120.58, 30.01]},
{name:'扬州', geoCoord:[119.42, 32.39]},
{name:'常州', geoCoord:[119.95, 31.79]},
{name:'潍坊', geoCoord:[119.1, 36.62]},
{name:'重庆', geoCoord:[106.54, 29.59]},
{name:'台州', geoCoord:[121.420757, 28.656386]},
{name:'南京', geoCoord:[118.78, 32.04]},
{name:'滨州', geoCoord:[118.03, 37.36]},
{name:'贵阳', geoCoord:[106.71, 26.57]},
{name:'无锡', geoCoord:[120.29, 31.59]},
{name:'本溪', geoCoord:[123.73, 41.3]},
{name:'克拉玛依', geoCoord:[84.77, 45.59]},
{name:'渭南', geoCoord:[109.5, 34.52]},
{name:'马鞍山', geoCoord:[118.48, 31.56]},
{name:'宝鸡', geoCoord:[107.15, 34.38]},
{name:'焦作', geoCoord:[113.21, 35.24]},
{name:'句容', geoCoord:[119.16, 31.95]},
{name:'北京', geoCoord:[116.46, 39.92]},
{name:'徐州', geoCoord:[117.2, 34.26]},
{name:'衡水', geoCoord:[115.72, 37.72]},
{name:'包头', geoCoord:[110, 40.58]},
{name:'绵阳', geoCoord:[104.73, 31.48]},
{name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
{name:'枣庄', geoCoord:[117.57, 34.86]},
{name:'杭州', geoCoord:[120.19, 30.26]},
{name:'淄博', geoCoord:[118.05, 36.78]},
{name:'鞍山', geoCoord:[122.85, 41.12]},
{name:'溧阳', geoCoord:[119.48, 31.43]},
{name:'库尔勒', geoCoord:[86.06, 41.68]},
{name:'安阳', geoCoord:[114.35, 36.1]},
{name:'开封', geoCoord:[114.35, 34.79]},
{name:'济南', geoCoord:[117, 36.65]},
{name:'德阳', geoCoord:[104.37, 31.13]},
{name:'温州', geoCoord:[120.65, 28.01]},
{name:'九江', geoCoord:[115.97, 29.71]},
{name:'邯郸', geoCoord:[114.47, 36.6]},
{name:'临安', geoCoord:[119.72, 30.23]},
{name:'兰州', geoCoord:[103.73, 36.03]},
{name:'沧州', geoCoord:[116.83, 38.33]},
{name:'临沂', geoCoord:[118.35, 35.05]},
{name:'南充', geoCoord:[106.110698, 30.837793]},
{name:'天津', geoCoord:[117.2, 39.13]},
{name:'富阳', geoCoord:[119.95, 30.07]},
{name:'泰安', geoCoord:[117.13, 36.18]},
{name:'诸暨', geoCoord:[120.23, 29.71]},
{name:'郑州', geoCoord:[113.65, 34.76]},
{name:'哈尔滨', geoCoord:[126.63, 45.75]},
{name:'聊城', geoCoord:[115.97, 36.45]},
{name:'芜湖', geoCoord:[118.38, 31.33]},
{name:'唐山', geoCoord:[118.02, 39.63]},
{name:'平顶山', geoCoord:[113.29, 33.75]},
{name:'邢台', geoCoord:[114.48, 37.05]},
{name:'德州', geoCoord:[116.29, 37.45]},
{name:'济宁', geoCoord:[116.59, 35.38]},
{name:'荆州', geoCoord:[112.239741, 30.335165]},
{name:'宜昌', geoCoord:[111.3, 30.7]},
{name:'义乌', geoCoord:[120.06, 29.32]},
{name:'丽水', geoCoord:[119.92, 28.45]},
{name:'洛阳', geoCoord:[112.44, 34.7]},
{name:'秦皇岛', geoCoord:[119.57, 39.95]},
{name:'株洲', geoCoord:[113.16, 27.83]},
{name:'石家庄', geoCoord:[114.48, 38.03]},
{name:'莱芜', geoCoord:[117.67, 36.19]},
{name:'常德', geoCoord:[111.69, 29.05]},
{name:'保定', geoCoord:[115.48, 38.85]},
{name:'湘潭', geoCoord:[112.91, 27.87]},
{name:'金华', geoCoord:[119.64, 29.12]},
{name:'岳阳', geoCoord:[113.09, 29.37]},
{name:'长沙', geoCoord:[113, 28.21]},
{name:'衢州', geoCoord:[118.88, 28.97]},
{name:'廊坊', geoCoord:[116.7, 39.53]},
{name:'菏泽', geoCoord:[115.480656, 35.23375]},
{name:'合肥', geoCoord:[117.27, 31.86]},
{name:'武汉', geoCoord:[114.31, 30.52]},
{name:'大庆', geoCoord:[125.03, 46.58]}
]
return {
backgroundColor: 'rgba(0,0,0,0)',
color: [
'rgba(255, 255, 255, 0.8)',
'rgba(14, 241, 242, 0.8)',
'rgba(37, 140, 249, 0.8)'
],
title : {
text: '百度人气',
link: 'http://renqi.baidu.com',
subtext: '纯属虚构',
x: 'center',
textStyle : {
color: '#fff'
}
},
legend: {
orient: 'vertical',
x:'left',
data:['强','中','弱'],
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '弱',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#333'
}
}
},
data : [],
markPoint : {
symbolSize: 2,
large: true,
effect : {
show: true
},
data : (function(){
var data = [];
var len = 3000;
var geoCoord
while(len--) {
geoCoord = placeList[len % placeList.length].geoCoord;
data.push({
name : placeList[len % placeList.length].name + len,
value : 10,
geoCoord : [
geoCoord[0] + Math.random() * 5 * -1,
geoCoord[1] + Math.random() * 3 * -1
]
})
}
return data;
})()
}
},
{
name: '中',
type: 'map',
mapType: 'china',
data : [],
markPoint : {
symbolSize: 3,
large: true,
effect : {
show: true
},
data : (function(){
var data = [];
var len = 1000;
var geoCoord
while(len--) {
geoCoord = placeList[len % placeList.length].geoCoord;
data.push({
name : placeList[len % placeList.length].name + len,
value : 50,
geoCoord : [
geoCoord[0] + Math.random() * 3 * -1,
geoCoord[1] + Math.random() * 3 * -1
]
})
}
return data;
})()
}
},
{
name: '强',
type: 'map',
mapType: 'china',
hoverable: false,
roam:true,
data : [],
markPoint : {
symbol : 'diamond',
symbolSize: 6,
large: true,
effect : {
show: true
},
data : (function(){
var data = [];
var len = placeList.length;
while(len--) {
data.push({
name : placeList[len].name,
value : 90,
geoCoord : placeList[len].geoCoord
})
}
return data;
})()
}
}
]
};
})(),
adddddd : {}
}
\ No newline at end of file
doc/slide/whyEcharts.html
浏览文件 @ 92bbc2e1
......@@ -66,7 +66,7 @@
text-align: left !important;
text-transform: none !important;
}
small strong{
h5 strong, small strong{
color: #9acd32;
font-weight: normal !important;
}
......@@ -96,6 +96,10 @@
.reveal .slides>section, .reveal .slides>section>section {
padding:0;
}
.reveal ul ul li {
font-size:20px;
color:#78B9E6
}
</style>
</head>
......@@ -107,7 +111,6 @@
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<small>Why</small>
<h1 style="margin:-10px 0 0 0">
<img src="./img/echarts_logo.png" style="margin:0;background:rgba(0,0,0,0);border-width: 0;box-shadow: 0 0 0px rgba(0, 0, 0, 0);"/>
</h1>
......@@ -117,134 +120,56 @@
<small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
</div>
</section>
<section data-background="./img/大数据时代.jpg">
<h3>《大数据时代》</h3>
<small>维克托 · 迈尔 - 舍恩伯格</small>
<div style="padding-left:260px;background:url(img/bigData.jpg) no-repeat">
<div class="fragment">
<blockquote><p>
<small>如今，<strong>数据已经成为了一种商业资本</strong>，一项重要的经济投入，可以创造新的经济利益。事实上，一旦思维转变过来，数据就能被巧妙地用来激发新的产品和新型服务。数据的奥秘只为谦逊、愿意聆听且掌握了聆听手段的人所知。</small>
</p></blockquote>
<div style="text-align:right;"><small>—— 你的<strong>聆听手段</strong>是？</small></div>
</div>
<div class="fragment">
<blockquote><p>
<small>这仅仅只是一个开始，大数据时代对我们的生活，以及与世界交流的方式提出挑战。最惊人的是，社会需要放弃它对因果关系的渴求，而仅需关注相关关系。也就是说<strong>只需要知道是什么，而不需要知道为什么</strong>。这就推翻了自古以来的惯例，而我们做决定和理解显示的最基本方式也将受到挑战。</small>
</p></blockquote>
<div style="text-align:right;"><small>—— 它真正呈现了<strong>数据是什么</strong>了吗？</small></div>
</div>
</div>
</section>
<section>
<h4>你的聆听手段是？</h4>
<p>
<small>不久前，专业大数据可视化公司Tableau在纽交所<a href='http://news.imeigu.com/a/1369902112563.html' target='_blank'>成功上市</a>，当日收盘涨幅64%，至50.75美元，共募集资金2.542亿美元，成为今年美国最大一笔科技业IPO。Tableau Software正是一家做大数据的公司，更确切地说是大数据处理的最后一环：</small>
</p>
<div class="fragment roll-in">
<img src="./img/tableau.jpg" style="width:100%;max-width:100%;"/>
<div class="fragment grow highlight-green">数据可视化</div>
<h4>业界已经有多如牛毛的图表库了！</h4>
<div class="fragment" style="text-align:right;">
<hr/>Why <strong style="color:#9acd32">ECharts</strong> ?
</div>
</section>
<section>
<h4>那些优秀的数据可视化工具</h4>
<p><small class="fragment">
<strong>Excel</strong>
<br/>是最流行也是最常用的数据分析、数据绘图软件，
<br/>输出图表几乎毫无交互性可言，作为一款电子表格工具并不适用大型数据集和进行动态图表输出。
</p></small>
<p><small class="fragment">
<strong>Matlab</strong>
<br/>主要面向科学计算、代表了当今国际科学计算软件的先进水平，
<br/>需要较为深厚的编程基础，比较适合科学方面的可视化项目。
</p></small>
<p><small class="fragment">
<strong>Spss</strong>
<br/>功能强大且操作简单友好，偏重于统计分析，
<br/>需要一定的数理统计基础，且输出的图表在与办公软件的兼容性及交互方面有所欠缺。
</p></small>
<p><small class="fragment">
<strong>Tableau Desktop</strong>
<br/>一款完全的数据可视化软件，专注结构化数据的快速可视化，
<br/>较高的服务费用，且构建交互界面需要发布到Server。
</p></small>
<div class="fragment" style="text-align:right;"><hr/>你的数据可视化工具是？这就足够了吗？</div>
</section>
<section>
<h4>还需要什么？</h4>
<blockquote class="fragment">
<small>
“互联网还没搞清楚的时候，移动互联来了，移动互联还没搞清楚的时候，大数据来了”
</small>
<div style="height:20px;padding:0;margin:0;display:block;text-align:right;"><small><small>马云在卸任阿里集团CEO的晚会上如是说</small></small></div>
</blockquote>
<br/>
<p class="fragment">
<small>在数据每时每刻都在产生的今天，还需要一种手段<strong>快捷</strong>的为你或为你的客户直观形象的呈现那些能够反应当前状态或洞悉未来趋势的数据。</small>
</p>
<p class="fragment">
<small>或许我们应该利用互联网技术快速甚至实时的获取你所关心的数据，然后提供可以<strong>辅助分析</strong>，<strong>辅助人们进行视觉化思考</strong>的数据可视化输出。</small>
</p>
<br/>
<div class="fragment">
<h4 style="color:#9acd32">深度数据互动可视化</h4>
<p><small>
<br/>打破单纯的视觉呈现，拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化。数据呈现<strong>不仅是诉说</strong>，而是允许用户对所呈现数据进行<strong>挖掘、整合</strong>，让可视化成为<strong>辅助人们进行视觉化思考</strong>的方式。
</small></p>
<br/>
<div class="fragment" style="text-align:right;">
<hr>
<p>
<small>这就是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>（Enterprise Charts 商业产品图表库）！<br/>基于【HTML5】Canvas （<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>），纯Javascript图表库，提供<strong>直观，生动，可交互，可高度个性化定制</strong>的数据可视化图表。</small>
</p>
</div>
<!--div>
<div class="fragment">
<hr>
<p style="background-color:rgba(255, 255, 255, 0.05);padding:5px 0 0 10px;margin:0;"><small><i>
题外话，直观，生动，可交互，<strong>为什么不是flash</strong>？
</i></small></p>
</div>
<p class="fragment" style="background-color:rgba(255, 255, 255, 0.05);padding:0 0 0 10px;margin:0;"><small><i>
如果你并不关心苹果的移动设备是否能看到你的呈现，那可以！乔布斯 <a href="http://tech.163.com/10/0430/09/65GR3IOD000915BD.html">Thoughts on Flash</a>
</i></small></p>
</div-->
</section>
<section>
<h4>第二个问题：</h4>
<br/>
<h5>你的数据可视化工具真正呈现了<span class="fragment highlight-green">数据是什么</span>了吗？</h5>
<br/>
<small class="fragment">回答这个问题前请先看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此做了什么？<br/><br/>
<small>* 下面的内容建议全屏浏览（F11切换）</small>
</small>
</section>
<section>
<h4>[ 拖拽重计算 ] 整合你所关心的数据</h4>
<p>
<small>图表数据的默认分类不总是满足每一个人的需求。
<br/>就像如下的浏览器占比，我想知道IE所占的总比例，是默默的心算还是拿根笔出来？
<small>让我们看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此目标做了什么？<br/>
<small>* 下面的内容建议全屏浏览（F11切换）</small>
</small>
</p>
<p class="fragment">
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把你关心的数据图形<strong>拖拽到一起</strong>！</small>
</p>
<div class="main" optionKey="calculable1"></div>
</div>
</section>
<section>
<h4>[ 拖拽重计算 ] 剔除畸形数据</h4>
<p>
<small>不可避免的有些时候会有些畸形数据存在，就像如下的销售数据：
<br/>双11的辉煌后你看到了这样统计数据，你得忍受这无多大指导意义统计图表一个月甚至更长时间？
</small>
</p>
<p class="fragment">
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把畸形数据<strong>拖拽出来</strong>！
<br/>恩，剔除畸形数据后你好像还惊讶的发现了一个不太乐观的趋势？
</small>
</p>
<div class="main" optionKey="calculable2"></div>
<section>
<h4>[ 拖拽重计算 ] 整合你所关心的数据</h4>
<p>
<small>图表数据的默认分类不总是满足每一个人的需求。
<br/>就像如下的浏览器占比，我想知道IE所占的总比例，是默默的心算还是拿根笔出来？
</small>
</p>
<p class="fragment">
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把你关心的数据图形<strong>拖拽到一起</strong>！</small>
</p>
<div class="main" optionKey="calculable1"></div>
</section>
<section>
<h4>[ 拖拽重计算 ] 剔除畸形数据</h4>
<p>
<small>不可避免的有些时候会有些畸形数据存在，就像如下的销售数据：
<br/>双11的辉煌后你看到了这样统计数据，你得忍受这无多大指导意义统计图表一个月甚至更长时间？
</small>
</p>
<p class="fragment">
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把畸形数据<strong>拖拽出来</strong>！
<br/>恩，剔除畸形数据后你好像还惊讶的发现了一个不太乐观的趋势？
</small>
</p>
<div class="main" optionKey="calculable2"></div>
</section>
</section>
<section>
......@@ -360,14 +285,23 @@
</section>
<section>
<h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4>
<p>
<small>系统中的每个节点都可以看成是一个带有一定能量的放电粒子，粒子间存在某种库仑斥力。同时，有些粒子间被一些“边”所牵连，这些边产生类似弹簧的胡克引力。在粒子间斥力和引力的不断作用下，粒子们从随机无序的初态不断发生位移，逐渐趋于平衡有序的终态。同时整个物理系统的能量也在不断消耗，经过数次迭代后，粒子间几乎不再发生相对位移，整个系统达到一种稳定平衡的状态。这就是<strong>力导向布局算法</strong>的直白描述，作为最美观的呈现复杂关系网络的图表你需要吗？</small>
</p>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了力导向布局图，比如呈现一个简单的人物关系网络：<a onclick="functionMap['force']()" style="cursor:pointer">乔布斯</a>，或者你可以切换查看一个更复杂的如<a onclick="functionMap['force2']()" style="cursor:pointer">Webkit内核的类依赖关系</a>！<br/></small>
</p>
<div class="main" optionKey="force"></div>
<section>
<h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4>
<p>
<small>系统中的每个节点都可以看成是一个带有一定能量的放电粒子，粒子间存在某种库仑斥力。同时，有些粒子间被一些“边”所牵连，这些边产生类似弹簧的胡克引力。在粒子间斥力和引力的不断作用下，粒子们从随机无序的初态不断发生位移，逐渐趋于平衡有序的终态。同时整个物理系统的能量也在不断消耗，经过数次迭代后，粒子间几乎不再发生相对位移，整个系统达到一种稳定平衡的状态。这就是<strong>力导向布局算法</strong>的直白描述，作为最美观的呈现复杂关系网络的图表你需要吗？</small>
</p>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了力导向布局图，比如呈现一个简单的人物关系网络：<strong>乔布斯</strong>！</small>
</p>
<div class="main" optionKey="force1"></div>
</section>
<section>
<h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，或者你可以切换查看一个更复杂的如：<strong>Webkit内核的类依赖关系</strong>！</small>
</p>
<div class="main" optionKey="force2" style="height:500px"></div>
</section>
</section>
<section>
......@@ -406,7 +340,7 @@
</p>
<div class="main" optionKey="stack"></div>
</section>
<section>
<h4>[ 商业BI ] 一些应用广泛的商务图表</h4>
<p>
......@@ -419,51 +353,53 @@
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>有些时候混搭的图表会更具表现力也更有有趣味！
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>有些时候混搭的图表会更具表现力也更有有趣味！
<br/>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表（共11类17种）支持任意混搭！
</small>
</p>
<img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，先看个简单又常见的线柱饼混搭例子：<br/></small>
</p>
<div class="main" optionKey="mix1"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，再看一个稍微复杂点的混搭例子：<br/></small>
</p>
<div class="main" optionKey="mix2"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭。
<br/>配合事件响应你甚至可以在图表内就做出一个具有数据联动的交互系统！
<br/>试试<strong>点击</strong>选择一些省份？当然你可以把地图改为单选模式去呈现该省更多详细的数据！
</small>
</p>
<div class="main" optionKey="mix3"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，或许你还可以发挥一下奇思妙想？
<br/>就像一般来说饼图（雷达图）并不适合呈现数据的变化趋势，如果用很多的饼图（雷达图）呢？
<br/>混搭出的这种多层嵌套图表我们给他起了个亲切的名字“<a onclick="functionMap['lasagna']()" style="cursor:pointer">千层饼</a>”或者“<a onclick="functionMap['wormhole']()" style="cursor:pointer">虫洞</a>”！<br/>
</small>
</p>
<div class="main" optionKey="lasagna"></div>
</small>
</p>
<img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，先看个简单又常见的线柱饼混搭例子：<br/></small>
</p>
<div class="main" optionKey="mix1"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，再看一个稍微复杂点的混搭例子：<br/></small>
</p>
<div class="main" optionKey="mix2"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭。
<br/>配合事件响应你甚至可以在图表内就做出一个具有数据联动的交互系统！
<br/>试试<strong>点击</strong>选择一些省份？当然你可以把地图改为单选模式去呈现该省更多详细的数据！
</small>
</p>
<div class="main" optionKey="mix3"></div>
</section>
<section>
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p>
<small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，或许你还可以发挥一下奇思妙想？
<br/>就像一般来说饼图（雷达图）并不适合呈现数据的变化趋势，如果用很多的饼图（雷达图）呢？
<br/>混搭出的这种多层嵌套图表我们给他起了个亲切的名字“<a onclick="functionMap['lasagna']()" style="cursor:pointer">千层饼</a>”或者“<a onclick="functionMap['wormhole']()" style="cursor:pointer">虫洞</a>”！<br/>
</small>
</p>
<div class="main" optionKey="lasagna"></div>
</section>
</section>
<section>
......@@ -475,14 +411,51 @@
</section>
<section>
<h4>[ 特效 ] 吸引眼球的能力</h4>
<p>
<small>我们知道，很多时候我们需要一些吸引眼球的能力。
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<a onclick="functionMap['effect1']()" style="cursor:pointer">炫光特效</a>，特别用在地图上轻松实现百度迁徙数据可视化特效：
<a onclick="functionMap['effect2']()" style="cursor:pointer">模拟迁徙</a>
</small>
</p>
<div class="main" style="height:500px;background-color:transparent" optionKey="effect1"></div>
<section>
<h4>[ 特效 ] 吸引眼球的能力</h4>
<p>
<small>我们知道，很多时候我们需要一些吸引眼球的能力。
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
<br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
</small>
</p>
<div class="main" style="height:500px;background-color:transparent" optionKey="effect1"></div>
</section>
<section>
<h4>[ 特效 ] 吸引眼球的能力</h4>
<p>
<small>我们知道，很多时候我们需要一些吸引眼球的能力。
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
<br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
</small>
</p>
<div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
</section>
<section>
<h4>[ 特效 ] 吸引眼球的能力</h4>
<p>
<small>我们知道，很多时候我们需要一些吸引眼球的能力。
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
<br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
</small>
</p>
<div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
</section>
</section>
<section>
<section>
<h4>应用 - Baidu</h4>
<div>
<img src="./img/usage1.png" width="100%"/>
</div>
</section>
<section>
<h4>应用 - Others</h4>
<div>
<img src="./img/usage2.png" width="100%"/>
</div>
</section>
</section>
<section>
......@@ -514,78 +487,80 @@
</section>
<section>
<h4>ECharts VS Highcharts (1)</h4>
<p>
<small>业界有无数js图表库，不乏优秀的代表，如chartjs，FusionCharts，amCharts，flot，RGraph，jqPlot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
</p>
<p class="fragment">
<small>无法跟他们一一对比，在这选择了知名度很高的<a href="http://www.highcharts.com/" target="_blank">Highcharts</a>，一个优秀，成熟的商业图表库。
<br/>先看看ECharts和Highcharts都支持哪些图表类型？
</small>
</p>
<table class="fragment table table-striped table-bordered table-hover">
<thead>
<tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
</thead>
<tbody>
<tr><td>柱状图（条形图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>折线图（面积图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>饼图（环形图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>散点图（气泡图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>K线图</td><td>Yes</td><td class='success'>Highstock</td></tr>
<tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
<section>
<h4>ECharts VS Highcharts (1)</h4>
<p>
<small>业界有无数js图表库，不乏优秀的代表，如chartjs，FusionCharts，amCharts，flot，RGraph，jqPlot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
</p>
<p class="fragment">
<small>无法跟他们一一对比，在这选择了知名度很高的<a href="http://www.highcharts.com/" target="_blank">Highcharts</a>，一个优秀，成熟的商业图表库。
<br/>先看看ECharts和Highcharts都支持哪些图表类型？
</small>
</p>
<table class="fragment table table-striped table-bordered table-hover">
<thead>
<tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
</thead>
<tbody>
<tr><td>柱状图（条形图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>折线图（面积图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>饼图（环形图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>散点图（气泡图）</td><td>Yes</td><td>Yes</td></tr>
<tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>K线图</td><td>Yes</td><td class='success'>Highstock</td></tr>
<tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>地图</td><td>Yes</td><td class='success'>Highmap</td></tr>
<tr><td>特色图表（如仪表盘）</td><td>Yes</td><td>Yes</td></tr>
</tbody>
</table>
</section>
<section>
<h4>ECharts VS Highcharts (2)</h4>
<p>
<small>再来看看ECharts和Highcharts都有哪些特性？</small>
</p>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
</thead>
<tbody>
<tr><td>拖拽重计算</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>数据视图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>动态类型切换</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>值域漫游</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>大规模散点</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>炫光特效</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>多图联动</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>数据区域缩放</td><td>Yes</td><td>Yes</td></tr>
<tr><td>图例开关</td><td>Yes</td><td>Yes</td></tr>
<tr><td>多维度堆积</td><td>Yes</td><td>Yes</td></tr>
<tr><td>混搭</td><td>Yes</td><td>Yes</td></tr>
<tr><td>图片导出</td><td>Yes</td><td>Yes</td></tr>
<tr>
<td><br/>License &amp; Pricing</td>
<td class='success'>Free<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Baidu BSD</a></td>
<td class='success'>Non-commercial free under CC3.0<br/><br/>Commercial licenses $90~$3600</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</section>
<section>
<h4>ECharts VS Highcharts (2)</h4>
<p>
<small>再来看看ECharts和Highcharts都有哪些特性？</small>
</p>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
</thead>
<tbody>
<tr><td>拖拽重计算</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>数据视图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>动态类型切换</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>值域漫游</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>大规模散点</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>炫光特效</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>多图联动</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>数据区域缩放</td><td>Yes</td><td>Yes</td></tr>
<tr><td>图例开关</td><td>Yes</td><td>Yes</td></tr>
<tr><td>多维度堆积</td><td>Yes</td><td>Yes</td></tr>
<tr><td>混搭</td><td>Yes</td><td>Yes</td></tr>
<tr><td>图片导出</td><td>Yes</td><td>Yes</td></tr>
<tr>
<td><br/>License &amp; Pricing</td>
<td class='success'>Free<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Baidu BSD</a></td>
<td class='success'>Non-commercial free under CC3.0<br/><br/>Commercial licenses $90~$3600</td>
</tr>
</tbody>
</table>
</section>
</section>
<section>
<h4>这就是ECharts</h4>
<p class="fragment">
<small>我们只是尽我们所能为你呈现数据真实的一面，</small>
<small>我们只是尽我们所能为你呈现数据<span style="color:#f50">真实</span>的一面，</small>
</p>
<p class="fragment">
<small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span style="color:#ff4500">挖掘、提取、修正或整合</span>，<br/><strong>（拖拽重计算、数据视图）</strong></small>
<small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span style="color:#f50">挖掘、提取、修正或整合</span>，<br/><strong>（拖拽重计算、数据视图）</strong></small>
</p>
<p class="fragment">
<small>让你可以更加<span style="color:#ff4500">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br/><strong>（图例开关、数据区域缩放、值域漫游）</strong></small>
<small>让你可以更加<span style="color:#f50">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br/><strong>（图例开关、数据区域缩放、值域漫游）</strong></small>
</p>
<p class="fragment">
<small>让你可以有<span style="color:#ff4500">不同的方式解读同样的数据</span>。<br/><strong>（动态类型切换，多维度堆积，多图联动，混搭）</strong></small>
<small>让你可以有<span style="color:#f50">不同的方式解读同样的数据</span>。<br/><strong>（动态类型切换，多维度堆积，多图联动，混搭）</strong></small>
</p>
<div class="fragment">
<hr/>
......@@ -601,6 +576,7 @@
<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>的发展离不开他们的卓越贡献：<br/>
<a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a>
<a href="http://weibo.com/pissang" target="_blank">@pissang</a>
<a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
<a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
<a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a>
<a href="http://crossdo.com" target="_blank">@CrossDo</a>
......@@ -609,7 +585,6 @@
<p>
<small>以及他们的鼓舞助威、摇旗呐喊、推波助澜、煽风点火...<br/>
<a href="http://weibo.com/forain" target="_blank">@diysimon</a>
<a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
<a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a>
<a href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
<a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a>
......@@ -659,14 +634,14 @@
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function () { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function () { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function () { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } },
//{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function () { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function () { return !!document.body.classList; } }
// { src: 'plugin/search/search.js', async: true, condition: function () { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function () { return !!document.body.classList; } }
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
//{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
......
doc/start.html
浏览文件 @ 92bbc2e1
......@@ -37,7 +37,7 @@
</style>
</head>
<body>
<body onload="prettyPrint()">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
......
index.html
浏览文件 @ 92bbc2e1
......@@ -219,7 +219,7 @@
</div>
</div>
<div class="jumbotron">
<h1 style="font-size: 80px;">现在就出发!</h1>
<h1 style="font-size: 80px;margin-bottom:30px;">现在就出发!</h1>
<a class="btn btn-large btn-warning" href="./doc/start.html"><i class="fa fa-paper-plane"></i> Get started</a>
</div>
<!-- /END THE FEATURETTES -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或