| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="ECharts"> |
| <meta name="author" content="linzhifeng@baidu.com"> |
| |
| <script src="../../doc/asset/js/esl/esl.js"></script> |
| <script src="../../doc/asset/js/codemirror.js"></script> |
| <script src="../../doc/asset/js/javascript.js"></script> |
| |
| <link href="../../doc/asset/css/bootstrap.css" rel="stylesheet"> |
| <link href="../../doc/asset/css/bootstrap-responsive.css" rel="stylesheet"> |
| <link href="../../doc/asset/css/codemirror.css" rel="stylesheet"> |
| <link href="../../doc/asset/css/monokai.css" rel="stylesheet"> |
| <link rel="shortcut icon" href="../../doc/asset/ico/favicon.png"> |
| <style type="text/css"> |
| .test-head {padding-left: 20px;margin-top:0;background-color:#eee;} |
| .CodeMirror pre{color: #f8f8f2;} |
| .sidebar-nav { |
| padding: 9px 0; |
| margin-bottom: 0; |
| } |
| .icon-resize-full, .icon-resize-small { |
| float: right; |
| opacity: .3; |
| } |
| .span4.ani { |
| transition: width 1s; |
| -moz-transition: width 1s; /* Firefox 4 */ |
| -webkit-transition: width 1s; /* Safari and Chrome */ |
| -o-transition: width 1s; /* Opera */ |
| } |
| .span8.ani { |
| transition: width 1s; |
| -moz-transition: width 1s; /* Firefox 4 */ |
| -webkit-transition: width 1s; /* Safari and Chrome */ |
| -o-transition: width 1s; /* Opera */ |
| } |
| .main { |
| height: 400px; |
| overflow: hidden; |
| padding : 10px; |
| margin-bottom: 10px; |
| border: 1px solid #e3e3e3; |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); |
| -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); |
| } |
| |
| </style> |
| </head> |
| |
| <body> |
| <h3 class="test-head"><a href="../../index.html">ECharts</a> - test all <button onclick="refreshAll()">Refresh All</button></h3> |
| <!--------0:line---------> |
| <div class="container-fluid" idx='0'> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| trigger: 'axis' |
| }, |
| legend: { |
| data:['邮件营销','联盟广告','直接访问','搜索引擎'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| calculable : true, |
| xAxis : [ |
| { |
| type : 'category', |
| boundaryGap : false, |
| data : ['周一','周二','周三','周四','周五','周六','周日'] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value', |
| splitArea : {show : true} |
| } |
| ], |
| series : [ |
| { |
| name:'邮件营销', |
| type:'line', |
| stack: '总量', |
| symbol: 'none', |
| itemStyle: { |
| normal: { |
| areaStyle: { |
| // 区域图，纵向渐变填充 |
| color : (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getLinearGradient( |
| 0, 200, 0, 400, |
| [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,255,0.1)']] |
| ) |
| })() |
| } |
| } |
| }, |
| data:[ |
| 120, 132, 301, 134, |
| {value:90, symbol:'droplet',symbolSize:5}, |
| 230, 210 |
| ] |
| }, |
| { |
| name:'联盟广告', |
| type:'line', |
| stack: '总量', |
| smooth: true, |
| symbol: 'image://../../doc/asset/ico/favicon.png', // 系列级个性化拐点图形 |
| symbolSize: 8, |
| data:[ |
| 120, 82, |
| { |
| value:201, |
| symbol: 'star', // 数据级个性化拐点图形 |
| symbolSize : 15, |
| itemStyle : { normal: {label : { |
| show: true, |
| textStyle : { |
| fontSize : '20', |
| fontFamily : '微软雅黑', |
| fontWeight : 'bold' |
| } |
| }}} |
| }, |
| { |
| value:134, |
| symbol: 'none' |
| }, |
| 190, |
| { |
| value : 230, |
| symbol: 'emptypin', |
| symbolSize: 8 |
| }, |
| 110 |
| ] |
| }, |
| { |
| name:'直接访问', |
| type:'line', |
| stack: '总量', |
| symbol: 'arrow', |
| symbolSize: 6, |
| symbolRotate: -45, |
| itemStyle: { |
| normal: { |
| color: 'red', |
| lineStyle: { // 系列级个性化折线样式 |
| width: 2, |
| type: 'dashed' |
| } |
| }, |
| emphasis: { |
| color: 'blue' |
| } |
| }, |
| data:[ |
| 320, 332, '-', 334, |
| { |
| value: 390, |
| symbol: 'star6', |
| symbolSize : 20, |
| symbolRotate : 10, |
| itemStyle: { // 数据级个性化折线样式 |
| normal: { |
| color: 'yellowgreen' |
| }, |
| emphasis: { |
| color: 'orange', |
| label : { |
| show: true, |
| position: 'inside', |
| textStyle : { |
| fontSize : '20' |
| } |
| } |
| } |
| } |
| }, |
| 330, 320 |
| ] |
| }, |
| { |
| name:'搜索引擎', |
| type:'line', |
| symbol:'emptyCircle', |
| itemStyle: { |
| normal: { |
| lineStyle: { // 系列级个性化折线样式，横向渐变描边 |
| width: 2, |
| color: (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getLinearGradient( |
| 0, 0, 1000, 0, |
| [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']] |
| ) |
| })(), |
| shadowColor : 'rgba(0,0,0,0.5)', |
| shadowBlur: 10, |
| shadowOffsetX: 8, |
| shadowOffsetY: 8 |
| } |
| }, |
| emphasis : { |
| label : {show: true} |
| } |
| }, |
| data:[ |
| 620, 732, 791, |
| {value:734, symbol:'emptyHeart',symbolSize:10}, |
| 890, 930, 820 |
| ], |
| markPoint : { |
| data : [ |
| {name : '周最高', value : 930, xAxis: '周六', yAxis: 935} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 0)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------1:bar---------> |
| <div class="container-fluid" idx="1"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize"></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| show: true, |
| trigger: 'item' |
| }, |
| legend: { |
| data:['邮件营销','联盟广告','直接访问','搜索引擎'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| calculable : true, |
| xAxis : [ |
| { |
| type : 'category', |
| data : ['周一','周二','周三','周四','周五','周六','周日'] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value', |
| splitArea : {show : true} |
| } |
| ], |
| series : [ |
| { |
| name:'邮件营销', |
| type:'bar', |
| itemStyle: { // 系列级个性化样式，纵向渐变填充 |
| normal: { |
| borderColor:'red', |
| color : (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getLinearGradient( |
| 0, 400, 0, 300, |
| [[0, 'green'],[1, 'yellow']] |
| ) |
| })() |
| }, |
| emphasis: { |
| borderWidth: 5, |
| borderColor:'green', |
| color: (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getLinearGradient( |
| 0, 400, 0, 300, |
| [[0, 'red'],[1, 'orange']] |
| ) |
| })(), |
| label : { |
| show : true, |
| position : 'top', |
| formatter : "{a} {b} {c}", |
| textStyle : { |
| color: 'blue' |
| } |
| } |
| } |
| }, |
| data:[220, 232, 101, 234, 190, 330, 210] |
| }, |
| { |
| name:'联盟广告', |
| type:'bar', |
| stack: '总量', |
| data:[120, '-', 451, 134, 190, 230, 110] |
| }, |
| { |
| name:'直接访问', |
| type:'bar', |
| stack: '总量', |
| itemStyle: { // 系列级个性化 |
| normal: { |
| borderWidth: 6, |
| borderColor:'tomato', |
| color: 'red' |
| }, |
| emphasis: { |
| borderColor:'red', |
| color: 'blue' |
| } |
| }, |
| data:[ |
| 320, 332, 100, 334, |
| { |
| value: 390, |
| symbolSize : 10, // 数据级个性化 |
| itemStyle: { |
| normal: { |
| color :'lime' |
| }, |
| emphasis: { |
| color: 'skyBlue' |
| } |
| } |
| }, |
| 330, 320 |
| ] |
| }, |
| { |
| name:'搜索引擎', |
| type:'bar', |
| barWidth: 40, // 系列级个性化，柱形宽度 |
| itemStyle: { |
| normal: { // 系列级个性化，横向渐变填充 |
| borderRadius: 5, |
| color : (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getLinearGradient( |
| 0, 0, 1000, 0, |
| [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']] |
| ) |
| })(), |
| label : { |
| show : true, |
| textStyle : { |
| fontSize : '20', |
| fontFamily : '微软雅黑', |
| fontWeight : 'bold' |
| } |
| } |
| } |
| }, |
| data:[ |
| 620, 732, |
| { |
| value: 701, |
| itemStyle : { normal: {label : {position: 'inside'}}} |
| }, |
| 734, 890, |
| { |
| value: 930, |
| itemStyle : { normal: {label : {show: false}}} |
| }, |
| 820 |
| ], |
| markPoint : { |
| data : [ |
| {name : '最高', value : 930, xAxis: '周六', yAxis: 930, symbolSize:14} |
| ] |
| }, |
| markLine : { |
| data : [ |
| [ |
| {type : 'average', name : '平均值'}, |
| {type : 'max'}, |
| {type : 'min'} |
| ] |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 1)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------2:scatter---------> |
| <div class="container-fluid" idx="2"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| trigger: 'item' |
| }, |
| legend: { |
| data:['scatter1','scatter2'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| calculable : true, |
| xAxis : [ |
| { |
| type : 'value' |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value', |
| splitArea : {show : true} |
| } |
| ], |
| series : [ |
| { |
| name:'scatter1', |
| type:'scatter', |
| symbol: 'emptyCircle', //'circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' |
| symbolSize: function(value){ |
| if (value[0] < 2) { |
| return 2; |
| } |
| else if (value[0] < 8) { |
| return Math.round(value[2] * 3); |
| } |
| else { |
| return 20; |
| } |
| }, |
| itemStyle: { |
| normal: { |
| color: 'lightblue', |
| borderWidth: 4, |
| label : {show: true} |
| }, |
| emphasis: { |
| color: 'lightgreen' |
| } |
| }, |
| data: (function() { |
| var d = []; |
| var len = 20; |
| while (len--) { |
| d.push([ |
| (Math.random()*10).toFixed(2) - 0, |
| (Math.random()*10).toFixed(2) - 0, |
| (Math.random()*10).toFixed(2) - 0 |
| ]); |
| } |
| return d; |
| })() |
| }, |
| { |
| name:'scatter2', |
| type:'scatter', |
| symbol: 'image://../../doc/asset/ico/favicon.png', // 系列级个性化拐点图形 |
| symbolSize: function(value){ |
| return Math.round(value[2] * 3); |
| }, |
| itemStyle: { |
| emphasis : { |
| label : {show: true} |
| } |
| }, |
| data: (function() { |
| var d = []; |
| var len = 20; |
| while (len--) { |
| d.push([ |
| (Math.random()*10).toFixed(2) - 0, |
| (Math.random()*10).toFixed(2) - 0, |
| (Math.random()*10).toFixed(2) - 0 |
| ]); |
| } |
| d.push({ |
| value : [5,5,1000], |
| itemStyle: { |
| normal: { |
| borderWidth: 8, |
| color: 'orange' |
| }, |
| emphasis: { |
| borderWidth: 10, |
| color: '#ff4500' |
| } |
| }, |
| symbol: 'emptyTriangle', |
| symbolRotate:90, |
| symbolSize:30 |
| }) |
| return d; |
| })(), |
| markPoint : { |
| symbol: 'emptyCircle', |
| itemStyle:{ |
| normal:{label:{position:'top'}} |
| }, |
| data : [ |
| {name : '有个东西', value : 1000, xAxis: 5, yAxis: 5, symbolSize:80} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true,2)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------3:k---------> |
| <div class="container-fluid" idx="3"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| trigger: 'axis', |
| formatter: function(params) { |
| var res = params[0][1]; |
| res += '<br/>' + params[0][0]; |
| res += '<br/> 开盘 : ' + params[0][2][0] + ' 最高 : ' + params[0][2][3]; |
| res += '<br/> 收盘 : ' + params[0][2][1] + ' 最低 : ' + params[0][2][2]; |
| return res; |
| } |
| }, |
| legend: { |
| data:['上证指数'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataZoom : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| dataZoom : { |
| show : true, |
| realtime: true, |
| start : 0, |
| end : 50 |
| }, |
| xAxis : [ |
| { |
| type : 'category', |
| boundaryGap : true, |
| axisTick: {onGap:false}, |
| splitLine: {show:false}, |
| data : [ |
| "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", |
| "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", |
| "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", |
| "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", |
| "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6", |
| "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13", |
| "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", |
| "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", |
| "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", |
| "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12", |
| "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19", |
| "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26", |
| "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", |
| "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", |
| "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", |
| "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29", |
| "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5", |
| "2013/6/6", "2013/6/7", "2013/6/13" |
| ] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value', |
| scale:true, |
| precision: 2, |
| splitNumber: 9, |
| boundaryGap: [0.05, 0.05], |
| splitArea : {show : true} |
| } |
| ], |
| series : [ |
| { |
| name:'上证指数', |
| type:'k', |
| barMaxWidth: 20, |
| itemStyle: { |
| normal: { |
| color: 'red', // 阳线填充颜色 |
| color0: 'lightgreen', // 阴线填充颜色 |
| lineStyle: { |
| width: 2, |
| color: 'orange', // 阳线边框颜色 |
| color0: 'green' // 阴线边框颜色 |
| } |
| }, |
| emphasis: { |
| color: 'black', // 阳线填充颜色 |
| color0: 'white' // 阴线填充颜色 |
| } |
| }, |
| data:[ // 开盘，收盘，最低，最高 |
| { |
| value:[2320.26,2302.6,2287.3,2362.94], |
| itemStyle: { |
| normal: { |
| color0: 'blue', // 阴线填充颜色 |
| lineStyle: { |
| width: 3, |
| color0: 'blue' // 阴线边框颜色 |
| } |
| }, |
| emphasis: { |
| color0: 'blue' // 阴线填充颜色 |
| } |
| } |
| }, |
| [2300,2291.3,2288.26,2308.38], |
| [2295.35,2346.5,2295.35,2346.92], |
| [2347.22,2358.98,2337.35,2363.8], |
| [2360.75,2382.48,2347.89,2383.76], |
| [2383.43,2385.42,2371.23,2391.82], |
| [2377.41,2419.02,2369.57,2421.15], |
| [2425.92,2428.15,2417.58,2440.38], |
| [2411,2433.13,2403.3,2437.42], |
| [2432.68,2434.48,2427.7,2441.73], |
| [2430.69,2418.53,2394.22,2433.89], |
| [2416.62,2432.4,2414.4,2443.03], |
| [2441.91,2421.56,2415.43,2444.8], |
| [2420.26,2382.91,2373.53,2427.07], |
| [2383.49,2397.18,2370.61,2397.94], |
| [2378.82,2325.95,2309.17,2378.82], |
| [2322.94,2314.16,2308.76,2330.88], |
| [2320.62,2325.82,2315.01,2338.78], |
| [2313.74,2293.34,2289.89,2340.71], |
| [2297.77,2313.22,2292.03,2324.63], |
| [2322.32,2365.59,2308.92,2366.16], |
| [2364.54,2359.51,2330.86,2369.65], |
| [2332.08,2273.4,2259.25,2333.54], |
| [2274.81,2326.31,2270.1,2328.14], |
| [2333.61,2347.18,2321.6,2351.44], |
| [2340.44,2324.29,2304.27,2352.02], |
| [2326.42,2318.61,2314.59,2333.67], |
| [2314.68,2310.59,2296.58,2320.96], |
| [2309.16,2286.6,2264.83,2333.29], |
| [2282.17,2263.97,2253.25,2286.33], |
| [2255.77,2270.28,2253.31,2276.22], |
| [2269.31,2278.4,2250,2312.08], |
| [2267.29,2240.02,2239.21,2276.05], |
| [2244.26,2257.43,2232.02,2261.31], |
| [2257.74,2317.37,2257.42,2317.86], |
| [2318.21,2324.24,2311.6,2330.81], |
| [2321.4,2328.28,2314.97,2332], |
| [2334.74,2326.72,2319.91,2344.89], |
| [2318.58,2297.67,2281.12,2319.99], |
| [2299.38,2301.26,2289,2323.48], |
| [2273.55,2236.3,2232.91,2273.55], |
| [2238.49,2236.62,2228.81,2246.87], |
| [2229.46,2234.4,2227.31,2243.95], |
| [2234.9,2227.74,2220.44,2253.42], |
| [2232.69,2225.29,2217.25,2241.34], |
| [2196.24,2211.59,2180.67,2212.59], |
| [2215.47,2225.77,2215.47,2234.73], |
| [2224.93,2226.13,2212.56,2233.04], |
| [2236.98,2219.55,2217.26,2242.48], |
| [2218.09,2206.78,2204.44,2226.26], |
| [2199.91,2181.94,2177.39,2204.99], |
| [2169.63,2194.85,2165.78,2196.43], |
| [2195.03,2193.8,2178.47,2197.51], |
| [2181.82,2197.6,2175.44,2206.03], |
| [2201.12,2244.64,2200.58,2250.11], |
| [2236.4,2242.17,2232.26,2245.12], |
| [2242.62,2184.54,2182.81,2242.62], |
| [2187.35,2218.32,2184.11,2226.12], |
| [2213.19,2199.31,2191.85,2224.63], |
| [2203.89,2177.91,2173.86,2210.58], |
| [2170.78,2174.12,2161.14,2179.65], |
| [2179.05,2205.5,2179.05,2222.81], |
| [2212.5,2231.17,2212.5,2236.07], |
| [2227.86,2235.57,2219.44,2240.26], |
| [2242.39,2246.3,2235.42,2255.21], |
| [2246.96,2232.97,2221.38,2247.86], |
| [2228.82,2246.83,2225.81,2247.67], |
| [2247.68,2241.92,2231.36,2250.85], |
| [2238.9,2217.01,2205.87,2239.93], |
| [2217.09,2224.8,2213.58,2225.19], |
| [2221.34,2251.81,2210.77,2252.87], |
| [2249.81,2282.87,2248.41,2288.09], |
| [2286.33,2299.99,2281.9,2309.39], |
| [2297.11,2305.11,2290.12,2305.3], |
| [2303.75,2302.4,2292.43,2314.18], |
| [2293.81,2275.67,2274.1,2304.95], |
| [2281.45,2288.53,2270.25,2292.59], |
| [2286.66,2293.08,2283.94,2301.7], |
| [2293.4,2321.32,2281.47,2322.1], |
| [2323.54,2324.02,2321.17,2334.33], |
| [2316.25,2317.75,2310.49,2325.72], |
| [2320.74,2300.59,2299.37,2325.53], |
| [2300.21,2299.25,2294.11,2313.43], |
| [2297.1,2272.42,2264.76,2297.1], |
| [2270.71,2270.93,2260.87,2276.86], |
| [2264.43,2242.11,2240.07,2266.69], |
| [2242.26,2210.9,2205.07,2250.63], |
| [2190.1,2148.35,2126.22,2190.1] |
| ], |
| markPoint : { |
| symbol: 'star', |
| //symbolSize:20, |
| itemStyle:{ |
| normal:{label:{position:'top'}} |
| }, |
| data : [ |
| {name : '最高', value : 2444.8, xAxis: '2013/2/18', yAxis: 2466} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 3)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------4:pie---------> |
| <div class="container-fluid" idx="4"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| show: true, |
| formatter: "{a} <br/>{b} : {c} ({d}%)" |
| }, |
| legend: { |
| orient : 'vertical', |
| x : 'left', |
| data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| calculable : true, |
| series : [ |
| { |
| name:'访问来源', |
| type:'pie', |
| center : ['35%', 200], |
| radius : 80, |
| itemStyle : { |
| normal : { |
| label : { |
| position : 'inner', |
| formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + '%'} |
| }, |
| labelLine : { |
| show : false |
| } |
| }, |
| emphasis : { |
| label : { |
| show : true, |
| formatter : "{b}\n{d}%" |
| } |
| } |
| |
| }, |
| data:[ |
| {value:335, name:'直达'}, |
| {value:679, name:'营销广告'}, |
| {value:1548, name:'搜索引擎'} |
| ] |
| }, |
| { |
| name:'访问来源', |
| type:'pie', |
| center : ['35%', 200], |
| radius : [110, 140], |
| data:[ |
| {value:335, name:'直达'}, |
| {value:310, name:'邮件营销'}, |
| {value:234, name:'联盟广告'}, |
| {value:135, name:'视频广告'}, |
| { |
| value:1048, |
| name:'百度', |
| itemStyle : { |
| normal : { |
| color : (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getRadialGradient( |
| 300, 200, 110, 300, 200, 140, |
| [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']] |
| ) |
| })(), |
| label : { |
| textStyle : { |
| color : 'rgba(30,144,255,0.8)', |
| align : 'center', |
| baseline : 'middle', |
| fontFamily : '微软雅黑', |
| fontSize : 30, |
| fontWeight : 'bolder' |
| } |
| }, |
| labelLine : { |
| length : 40, |
| lineStyle : { |
| color : '#f0f', |
| width : 3, |
| type : 'dotted' |
| } |
| } |
| } |
| } |
| }, |
| {value:251, name:'谷歌'}, |
| { |
| value:102, |
| name:'必应', |
| itemStyle : { |
| normal : { |
| label : { |
| show : false |
| }, |
| labelLine : { |
| show : false |
| } |
| }, |
| emphasis : { |
| label : { |
| show : true |
| }, |
| labelLine : { |
| show : true, |
| length : 50 |
| } |
| } |
| } |
| }, |
| {value:147, name:'其他'} |
| ] |
| }, |
| { |
| name:'访问来源', |
| type:'pie', |
| startAngle: 90, |
| center : ['75%', 200], |
| radius : [80, 120], |
| itemStyle : { |
| normal : { |
| label : { |
| show : false |
| }, |
| labelLine : { |
| show : false |
| } |
| }, |
| emphasis : { |
| color: (function(){ |
| var zrColor = require('zrender/tool/color'); |
| return zrColor.getRadialGradient( |
| 650, 200, 80, 650, 200, 120, |
| [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']] |
| ) |
| })(), |
| label : { |
| show : true, |
| position : 'center', |
| formatter : "{d}%", |
| textStyle : { |
| color : 'red', |
| fontSize : '30', |
| fontFamily : '微软雅黑', |
| fontWeight : 'bold' |
| } |
| } |
| } |
| }, |
| data:[ |
| {value:335, name:'直达'}, |
| {value:310, name:'邮件营销'}, |
| {value:234, name:'联盟广告'}, |
| {value:135, name:'视频广告'}, |
| {value:1548, name:'搜索引擎'} |
| ], |
| markPoint : { |
| symbol: 'emptyHeart', |
| data : [ |
| {name : '打酱油的标注', value : 100, x:'50%', y:'15%', symbolSize:32} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 4)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------5:radar---------> |
| <div class="container-fluid" idx="5"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| tooltip : { |
| trigger: 'axis' |
| }, |
| legend: { |
| x : 'left', |
| data:['图一','图二','图三'] |
| }, |
| toolbox: { |
| show : true, |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| polar : [ |
| { |
| indicator : [ |
| { text : '指标一' }, |
| { text : '指标二' }, |
| { text : '指标三' }, |
| { text : '指标四' }, |
| { text : '指标五' } |
| ], |
| center : ['25%',210], |
| radius : 150, |
| startAngle: 90, |
| splitNumber: 8, |
| name : { |
| formatter:'【{value}】', |
| textStyle: {color:'red'} |
| }, |
| scale: true, |
| precision: 1, |
| //power: 100, |
| axisLine: { // 坐标轴线 |
| show: true, // 默认显示，属性show控制显示与否 |
| lineStyle: { // 属性lineStyle控制线条样式 |
| color: 'green', |
| width: 2, |
| type: 'solid' |
| } |
| }, |
| axisLabel: { // 坐标轴文本标签，详见axis.axisLabel |
| show: false, |
| // formatter: null, |
| textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE |
| color: '#ccc' |
| } |
| }, |
| splitArea : { |
| show : true, |
| areaStyle : { |
| color: ['rgba(250,0,250,0.3)','rgba(0,200,200,0.3)'] |
| } |
| }, |
| splitLine : { |
| show : true, |
| lineStyle : { |
| width : 2, |
| color : 'yellow' |
| } |
| } |
| }, |
| { |
| indicator : [ |
| { text : '语文', max : 150 }, |
| { text : '数学', max : 150 }, |
| { text : '英语', max : 150 }, |
| { text : '物理', max : 120 }, |
| { text : '化学', max : 108 }, |
| { text : '生物', max : 72 } |
| ], |
| center : ['75%', 210], |
| radius : 150 |
| } |
| ], |
| series : [ |
| { |
| name: '雷达图', |
| type: 'radar', |
| itemStyle: { |
| emphasis: { |
| // color: 各异, |
| lineStyle: { |
| width: 4 |
| } |
| } |
| }, |
| data : [ |
| { |
| value : [100, 8, 0.40, -80, 2000], |
| name : '图一', |
| symbol: 'star5', |
| symbolSize: 4, // 可计算特性参数，空数据拖拽提示图形大小 |
| itemStyle: { |
| normal: { |
| lineStyle: { |
| type: 'dashed' |
| } |
| } |
| } |
| }, |
| { |
| value : [10, 3, 0.20, -100, 1000], |
| name : '图二', |
| itemStyle: { |
| normal: { |
| areaStyle: { |
| type: 'default' |
| } |
| } |
| } |
| }, |
| { |
| value : [20, 3, 0.3, -13.5, 3000], |
| name : '图三', |
| symbol: 'none', // 拐点图形类型，非标准参数 |
| itemStyle: { |
| normal: { |
| lineStyle: { |
| type: 'dotted' |
| } |
| } |
| } |
| } |
| ] |
| }, |
| { |
| name: '成绩单', |
| type: 'radar', |
| polarIndex : 1, |
| itemStyle: { |
| normal: { |
| areaStyle: { |
| type: 'default' |
| } |
| } |
| }, |
| data : [ |
| { |
| value : [120, 118, 130, 100, 99, 70], |
| name : '张三', |
| itemStyle: { |
| normal: { |
| areaStyle: { |
| color: (function(){ |
| var zrColor = require('zrender/tool/color'); |
| var x = 600 |
| return zrColor.getRadialGradient( |
| x, 210, 0, x, 200, 150, |
| [[0, 'rgba(255,255,0,0.3)'],[1, 'rgba(255,0,0,0.5)']] |
| ) |
| })() |
| } |
| } |
| } |
| }, |
| { |
| value : [90, 113, 140, 30, 70, 60], |
| name : '李四', |
| itemStyle: { |
| normal: { |
| lineStyle: { |
| type: 'dashed' |
| } |
| } |
| } |
| } |
| ], |
| markPoint : { |
| symbol: 'emptyHeart', |
| data : [ |
| {name : '打酱油的标注', value : 100, x:'50%', y:'15%', symbolSize:32} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 5)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------6:chord---------> |
| <div class="container-fluid" idx="6"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| title : { |
| text: '测试数据' |
| }, |
| tooltip : { |
| trigger: 'item' |
| }, |
| legend: { |
| x: 'right', |
| data:['g1','g2', 'g3', 'g4'] |
| }, |
| series : [ |
| { |
| type:'chord', |
| radius : ['55%', '75%'], |
| center : ['50%', '50%'], |
| padding : 2, |
| sort : 'descending', // can be 'none', 'ascending', 'descending' |
| sortSub : 'descending', // can be 'none', 'ascending', 'descending' |
| startAngle : 90, |
| clockWise : false, |
| showScale : true, |
| showScaleText : true, |
| itemStyle : { |
| normal : { |
| lineStyle : { |
| width : 0, |
| color : '#000' |
| }, |
| chordStyle : { |
| lineStyle : { |
| width : 1, |
| color : '#333' |
| } |
| }, |
| label: { |
| show: true, |
| color: 'red' |
| } |
| }, |
| emphasis : { |
| lineStyle : { |
| width : 0, |
| color : '#000' |
| }, |
| chordStyle : { |
| lineStyle : { |
| width : 2, |
| color : 'black' |
| } |
| } |
| } |
| }, |
| data : [ |
| { |
| name : 'g1', |
| itemStyle : { |
| normal: { |
| color: 'rgba(255,30,30,0.5)', |
| lineStyle : { |
| width: 1, |
| color: 'green' |
| } |
| }, |
| emphasis: { |
| color: 'yellow', |
| lineStyle : { |
| width: 2, |
| color: 'blue' |
| } |
| } |
| } |
| }, |
| {name : 'g2'}, |
| {name : 'g3'}, |
| {name : 'g4'} |
| ], |
| matrix : [ |
| [11975, 5871, 8916, 2868], |
| [ 1951, 10048, 2060, 6171], |
| [ 8010, 16145, 8090, 8045], |
| [ 1013, 990, 940, 6907] |
| ], |
| markPoint : { |
| symbol: 'star', |
| data : [ |
| {name : '打酱油的标注', value : 100, x:'5%', y:'50%', symbolSize:32}, |
| {name : '打酱油的标注', value : 100, x:'95%', y:'50%', symbolSize:32} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 6)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------7:force---------> |
| <div class="container-fluid" idx="7"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| title : { |
| text: '人物关系：乔布斯', |
| subtext: '数据来自人立方', |
| x:'right', |
| y:'bottom' |
| }, |
| tooltip : { |
| trigger: 'item', |
| formatter: '{a} : {b}' |
| }, |
| legend: { |
| x: 'left', |
| data:['家人','朋友'] |
| }, |
| series : [ |
| { |
| type:'force', |
| name : "人物关系", |
| 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} |
| ], |
| markPoint : { |
| symbol: 'emptyCircle', |
| data : [ |
| {name : '打酱油的标注', value : 100, x:'5%', y:'50%', symbolSize:32}, |
| {name : '打酱油的标注', value : 100, x:'95%', y:'50%', symbolSize:32} |
| ] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 7)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| </div><!--/.fluid-container--> |
| <!--------8:map---------> |
| <div class="container-fluid" idx="8"> |
| <div class="row-fluid"> |
| <div md="sidebar-code" class="span4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div> |
| <textarea md="code" name="code"> |
| option = { |
| series : [ |
| { |
| name: 'Map', |
| type: 'map', |
| mapLocation: { |
| x : 'left', |
| y : 'top' |
| }, |
| selectedMode: 'multiple', |
| itemStyle: { |
| normal: { |
| borderWidth:2, |
| borderColor:'lightgreen', |
| color: 'orange', |
| label: { |
| show: false |
| } |
| }, |
| emphasis: { // 也是选中样式 |
| borderWidth:2, |
| borderColor:'#fff', |
| color: '#32cd32', |
| label: { |
| show: true, |
| textStyle: { |
| color: '#fff' |
| } |
| } |
| } |
| }, |
| data:[ |
| { |
| name: '广东', |
| value: Math.round(Math.random()*1000), |
| itemStyle: { |
| normal: { |
| color: '#32cd32', |
| label: { |
| show: true, |
| textStyle: { |
| color: '#fff', |
| fontSize: 15 |
| } |
| } |
| }, |
| emphasis: { // 也是选中样式 |
| borderWidth:5, |
| borderColor:'yellow', |
| color: '#cd5c5c', |
| label: { |
| show: false, |
| textStyle: { |
| color: 'blue' |
| } |
| } |
| } |
| } |
| } |
| ], |
| markPoint : { |
| itemStyle : { |
| normal:{ |
| color:'skyblue' |
| } |
| }, |
| data : [ |
| {name : '天津', value : 350}, |
| {name : '上海', value : 103} |
| ] |
| }, |
| geoCoord: { |
| '上海': [121.4648,31.2891], |
| '天津': [117.4219,39.4189] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div md="graphic" class="span8"> |
| <div md="main" class="main"></div> |
| <div> |
| <button onclick="refresh(true, 8)">Refresh ~</button> |
| <span md='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| <hr> |
| <!-- FOOTER --> |
| <footer> |
| <p class="pull-right"><a href="#">Back to top</a></p> |
| <p>© 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> · <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> · <a href="../../doc/changelog.html" target="_blank">Changelog</a></p> |
| </footer> |
| </div><!--/.fluid-container--> |
| <script src="../../doc/asset/js/jquery.js"></script> |
| <script src="all.js"></script> |
| </body> |
| </html> |
