Update a few examples

test/funnel.html

@@ -60,7 +60,8 @@
                             type:'funnel',
                             gap: 3,
                             itemStyle: itemStyle,
-                            width: '50%',
+                            x: 300,
+                            x2: 300,
                             sort: 'ascending',
                             label: {
                                 normal: {

test/graph.html

@@ -62,7 +62,7 @@
                         dataRange: {
                             max: 100,
                             inRange: {
-                                colorS: [1, 0.3]   
+                                colorS: [1, 0.3]
                             }
                         },
                         animationDurationUpdate: 1500,
@@ -71,7 +71,7 @@
                             {
                                 name: 'Les Miserables',
                                 type: 'graph',
-                                layout: 'circular',
+                                layout: 'none',
                                 data: graph.nodes,
                                 links: graph.links,
                                 categories: categories,
@@ -91,7 +91,7 @@
                     });
 
                     var config = {
-                        layout: 'circular'
+                        layout: 'none'
                     };
 
                     var gui = new dat.GUI();

test/line.html

@@ -33,9 +33,9 @@
 
                 for (var i = 0; i < 100; i++) {
                     xAxisData.push('类目' + i);
-                    data1.push(+Math.random().toFixed(3));
-                    data2.push(+Math.random().toFixed(3));
-                    data3.push(+Math.random().toFixed(3));
+                    data1.push(+(Math.random() + 0.5).toFixed(3));
+                    data2.push(+(Math.random() + 0.5).toFixed(3));
+                    data3.push(+(Math.random() + 0.5).toFixed(3));
                 }
 
                 var itemStyle = {
@@ -47,7 +47,7 @@
                         // shadowOffsetY: 5,
                         // shadowColor: 'rgba(0, 0, 0, 0.4)',
                         lineStyle: {
-                            width: 3,
+                            width: 1
                             // shadowBlur: 10,
                             // shadowOffsetX: 0,
                             // shadowOffsetY: 5,

test/punchCard.html

@@ -40,18 +40,18 @@
 
                 var data = [];
 
-                for (var i = 0; i < 100; i++) {
+                for (var i = 0; i < 120; i++) {
                     do {
                         var x = Math.round(Math.random() * (hours.length - 1));
                         var y = Math.round(Math.random() * (days.length - 1));
                         var key = y * 100 + x;
-                    } while(usedMap[key])
+                    } while(usedMap[key]);
 
                     usedMap[key] = true;
 
                     data.push([
                         x, y, Math.random() + 0.1
-                    ])
+                    ]);
                 }
 
                 chart.setOption({
@@ -59,6 +59,8 @@
                         data: ['Punch Card']
                     },
                     polar: {},
+                    tooltip: {
+                    },
                     angleAxis: {
                         type: 'category',
                         data: hours,
@@ -70,6 +72,7 @@
                                 type: 'dashed'
                             }
                         },
+                        startAngle: 0,
                         axisLine: {
                             show: false
                         }

test/scatter.html

@@ -34,10 +34,10 @@
                     return (Math.random() * max).toFixed(3);
                 }
 
-                for (var i = 0; i < 200; i++) {
-                    data1.push([random(5), random(5), random(1)]);
-                    data2.push([random(10), random(10), random(1)]);
-                    data3.push([random(15), random(10), random(1)]);
+                for (var i = 0; i < 30; i++) {
+                    data1.push([random(5), random(5), random(2)]);
+                    data2.push([random(10), random(10), random(2)]);
+                    data3.push([random(15), random(10), random(2)]);
                 }
 
                 chart.setOption({
@@ -68,10 +68,17 @@
                     series: [{
                         name: 'scatter',
                         type: 'scatter',
-                        symbol: 'diamond',
+                        // symbol: 'diamond',
                         symbolSize: function (val) {
                             return val[2] * 40;
                         },
+                        // itemStyle: {
+                        //     normal: {
+                        //         color: function (params) {
+                        //             return 'rgba(30, 70, 50, ' + params.value[2] + ')';
+                        //         }
+                        //     }
+                        // },
                         data: data1
                     }, {
                         name: 'scatter2',
@@ -79,13 +86,13 @@
                         symbolSize: function (val) {
                             return val[2] * 40;
                         },
-                        itemStyle: {
-                            normal: {
-                                label: {
-                                    show: true
-                                }
-                            }
-                        },
+                        // itemStyle: {
+                        //     normal: {
+                        //         label: {
+                        //             show: true
+                        //         }
+                        //     }
+                        // },
                         data: data2
                     }, {
                         name: 'scatter3',

test/tooltip.html

@@ -46,7 +46,6 @@
                     data4.push((Math.random() + 0.3).toFixed(2));
                 }
 
-                console.profile('setOption');
                 chart.setOption({
                     tooltip : {         // Option config. Can be overwrited by series or data
                         trigger: 'axis',
@@ -59,6 +58,9 @@
                         borderRadius : 8,
                         borderWidth: 2,
                         padding: 10,    // [5, 10, 15, 20]
+                        axisPointer: {
+                            type: 'shadow'
+                        },
                         position : function(p) {
                             // 位置回调
                             // console.log && console.log(p);
@@ -73,7 +75,6 @@
                             fontWeight: 'bold'
                         },
                         formatter: function (params,ticket,callback) {
-                            console.log(params)
                             var res = 'Function formatter : <br/>' + params[0].name;
                             for (var i = 0, l = params.length; i < l; i++) {
                                 res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
@@ -81,7 +82,7 @@
                             setTimeout(function (){
                                 // 仅为了模拟异步回调
                                 callback(ticket, res);
-                            }, 1000)
+                            }, 1000);
                             return 'loading';
                         }
                         //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
@@ -124,7 +125,7 @@
                                 trigger: 'item',
                                 backgroundColor: 'black',
                                 position : [0, 0],
-                                formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
+                                formatter: 'Series formatter: <br/>{a}<br/>{b}:{c}'
                             },
                             stack: '数据项',
                             data:[
@@ -134,7 +135,7 @@
                                     itemStyle: {normal: {color: 'red'}},
                                     tooltip : {     // Data config.
                                         backgroundColor: 'blue',
-                                        formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
+                                        formatter: 'Data formatter: <br/>{a}<br/>{b}:{c}'
                                     }
                                 },
                                 134, 90,