echart 打開新世界的大門
阿新 • • 發佈:2018-10-25
ZKM b+ why gsp aik nor uav right boot
實時折線圖
option = { backgroundColor:‘#2B2B2B‘, tooltip: { trigger: ‘axis‘ }, legend: { data:[‘頻率‘], textStyle:{ color:‘#FFF‘, fontSize:20 } }, xAxis: { type: ‘category‘, boundaryGap: false, splitLine:{ show:true, lineStyle:{ type:‘dotted‘ } }, axisLabel:{ textStyle:{ color:‘#FFF‘, fontSize:20 } }, axisLine:{ lineStyle:{ color:‘#FFF‘ } }, data: [‘00:00‘,‘01:00‘,‘02:00‘,‘03:00‘,‘04:00‘,‘05:00‘,‘06:00‘,‘07:00‘,‘08:00‘,‘09:00‘,‘10:00‘,‘11:00‘,‘12:00‘,‘13:00‘,‘14:00‘,‘15:00‘,‘16:00‘,‘17:00‘,‘18:00‘,‘19:00‘,‘20:00‘,‘21:00‘,‘22:00‘,‘23:00‘,‘23:59‘] }, yAxis: { type: ‘value‘, axisLabel: { formatter: ‘{value} Hz‘, textStyle:{ color:‘#FFF‘, fontSize:20 } }, min:48.75, max:51.25, axisLine:{ lineStyle:{ color:‘#FFF‘ } }, splitLine:{ show:true, lineStyle:{ type:‘dotted‘ } } }, series: [ { name:‘頻率‘, type:‘line‘, symbol:‘circle‘, itemStyle:{ normal:{ color:‘#00FF00‘ } }, data:[], markPoint: { symbolSize:1, data: [ {type: ‘max‘, name: ‘最大值‘,itemStyle:{normal:{color:‘#00FF00‘}}}, {type: ‘min‘, name: ‘最小值‘,itemStyle:{normal:{color:‘#00FF00‘}}} ], label:{normal:{textStyle:{color:‘#00ff00‘,fontSize:25}}} }, lineStyle:{ normal:{ color:‘#00FF00‘, width:3 } }, markLine: { lineStyle:{ normal:{ type:‘solid‘, width:2 } }, data: [ {type: ‘average‘, name: ‘平均值‘,itemStyle:{normal:{color:‘#FFFFFF‘}}} ], label:{normal:{textStyle:{color:‘#FFF‘,fontSize:20}}} } }, { name:‘最大值‘, type:‘line‘, symbol:‘circle‘, symbolSize:1, itemStyle:{ normal:{ color:‘red‘ } }, lineStyle:{normal:{width:2}}, data:[51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51,51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51], }, { name:‘最小值‘, type:‘line‘, symbol:‘circle‘, symbolSize:1, itemStyle:{ normal:{ color:‘red‘ } }, lineStyle:{normal:{width:2}}, data:[49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49,49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49], } ] }; var index=0; setInterval(function () { if (index<=24) { option.series[0].data.push(Math.random().toFixed(2) * 2+49); } else { option.series[0].data=[]; index=0; } index++; myChart.setOption(option, true); },1000);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echart學習</title> </head> <body> <p>------------------------</p> <div id="main2" style="height:400px"></div> <!-- <script src="js/echarts-all.js" charset="utf-8"></script>--> <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script> <script type="text/javascript"> var myChart22 = echarts.init(document.getElementById(‘main2‘)); var option22 = { backgroundColor: ‘#2B2B2B‘, tooltip: { trigger: ‘axis‘ }, legend: { data: [‘頻率‘], textStyle: { color: ‘#FFF‘, fontSize: 20 } }, xAxis: { type: ‘category‘, boundaryGap: false, splitLine: { show: true, lineStyle: { type: ‘dotted‘ } }, axisLabel: { textStyle: { color: ‘#FFF‘, fontSize: 20 } }, axisLine: { lineStyle: { color: ‘#FFF‘ } }, data: [‘00:00‘, ‘01:00‘, ‘02:00‘, ‘03:00‘, ‘04:00‘, ‘05:00‘, ‘06:00‘, ‘07:00‘, ‘08:00‘, ‘09:00‘, ‘10:00‘, ‘11:00‘, ‘12:00‘, ‘13:00‘, ‘14:00‘, ‘15:00‘, ‘16:00‘, ‘17:00‘, ‘18:00‘, ‘19:00‘, ‘20:00‘, ‘21:00‘, ‘22:00‘, ‘23:00‘, ‘23:59‘] }, yAxis: { type: ‘value‘, axisLabel: { formatter: ‘{value} Hz‘, textStyle: { color: ‘#FFF‘, fontSize: 20 } }, min: 48.75, max: 51.25, axisLine: { lineStyle: { color: ‘#FFF‘ } }, splitLine: { show: true, lineStyle: { type: ‘dotted‘ } } }, series: [{ name: ‘頻率‘, type: ‘line‘, symbol: ‘circle‘, itemStyle: { normal: { color: ‘#00FF00‘ } }, data: [], markPoint: { symbolSize: 1, data: [{ type: ‘max‘, name: ‘最大值‘, itemStyle: { normal: { color: ‘#00FF00‘ } } }, { type: ‘min‘, name: ‘最小值‘, itemStyle: { normal: { color: ‘#00FF00‘ } } } ], label: { normal: { textStyle: { color: ‘#00ff00‘, fontSize: 25 } } } }, lineStyle: { normal: { color: ‘#00FF00‘, width: 3 } }, markLine: { lineStyle: { normal: { type: ‘solid‘, width: 2 } }, data: [{ type: ‘average‘, name: ‘平均值‘, itemStyle: { normal: { color: ‘#FFFFFF‘ } } }], label: { normal: { textStyle: { color: ‘#FFF‘, fontSize: 20 } } } } }, { name: ‘最大值‘, type: ‘line‘, symbol: ‘circle‘, symbolSize: 1, itemStyle: { normal: { color: ‘red‘ } }, lineStyle: { normal: { width: 2 } }, data: [51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51], }, { name: ‘最小值‘, type: ‘line‘, symbol: ‘circle‘, symbolSize: 1, itemStyle: { normal: { color: ‘red‘ } }, lineStyle: { normal: { width: 2 } }, data: [49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49], } ] }; var index22 = 0; setInterval(function() { if (index22 <= 24) { option22.series[0].data.push(Math.random().toFixed(2) * 2 + 49); } else { option22.series[0].data = []; index22 = 0; } index22++; myChart22.setOption(option22, true); }, 1000); </script> </body> </html>
彩虹效果
app.title = ‘隨便玩玩兒,嘻嘻‘; var red = ‘#F00‘; var orange = ‘#F60‘; var yellow = ‘#FF0‘; var green = ‘#0C0‘; var cyan = ‘#17D4DE‘; var blue = ‘#2616D9‘; var purple = ‘#B013DC‘; var white = ‘#EFEFEF‘; var sky = ‘#88FFFF‘; var brown = ‘#D2691E‘; var duration = 5000; option = { title: { text: ‘彩虹‘, subtext: ‘作者: 斷浪‘, }, backgroundColor: ‘#88FFFF‘, series: [ //紅 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : red; } }, legendHoverLink: false, //是否聯動高亮 defult:true label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [280, 250], startAngle: 180, //起始角度 data: [{ name: ‘red‘, value: 10 }, { name: ‘land1‘, value: 10 } ] }, //橙 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : orange; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [250, 220], startAngle: 180, //起始角度 data: [{ name: ‘orange‘, value: 10 }, { name: ‘land2‘, value: 10 } ] }, //黃 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : yellow; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [220, 190], startAngle: 180, //起始角度 data: [{ name: ‘yellow‘, value: 10 }, { name: ‘land3‘, value: 10 } ] }, //綠 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : green; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [190, 160], startAngle: 180, //起始角度 data: [{ name: ‘green‘, value: 10 }, { name: ‘land4‘, value: 10 } ] }, //青 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : cyan; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [160, 130], startAngle: 180, //起始角度 data: [{ name: ‘green‘, value: 10 }, { name: ‘land5‘, value: 10 } ] }, //藍 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : blue; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [130, 100], startAngle: 180, //起始角度 data: [{ name: ‘blue‘, value: 10 }, { name: ‘land6‘, value: 10 } ] }, //紫 { type: ‘pie‘, animationDuration: duration, itemStyle: { color: function(data) { return data.dataIndex == 1 ? sky : purple; } }, label: { normal: { show: false }, emphasis: { show: false } }, labelLine: { show: false }, legendHoverLink: false, //是否聯動高亮 defult:true hoverOffset: 0, //高亮時的偏移區域 defult:10 center: [‘50%‘, ‘70%‘], radius: [100, 70], startAngle: 180, //起始角度 data: [{ name: ‘purple‘, value: 10 }, { name: ‘land7‘, value: 10 } ] }, ], };
中間帶圖片參數
var giftImageUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAARiElEQVR4Xu2dCfC/xRzH3zmSIzeRO5KKJopoHJEyaJhp4u8Yd0xSlKuSm4kylPJ3F2Lwj0KuSciVs3GVTDlDiXJEB6G/eU/7zGzb83z3eHafZ5//vnemqX7P7j6778++vp9n742gIAWkwKACG0kbKSAFhhUQIGodUmCFAgJEzUMKCBC1ASmQpoA8SJpuStWIAgKkEUOrmmkKCJA03ZSqEQUESCOGVjXTFBAgabopVSMKCJBGDK1qpikgQNJ0U6pGFBAgjRha1UxTQICk6aZUjSggQBoxtKqZpoAASdNNqRpRQIA0YmhVM00BAZKmm1I1ooAAacTQqmaaAgIkTTelakQBAdKIoVXNNAUESJpuStWIAgKkEUOrmmkKCJA03ZSqEQUESCOGVjXTFBAgabopVSMKCJBGDK1qpikgQNJ0U6pGFBAgjRha1UxTQICk6aZUjSggQBoxtKqZpoAASdNNqRpRQIA0YmhVM00BAZKmm1I1ooAAacTQqmaaAgIkTTelakSBmgFh2bYCcLtGbNFqNS8EcA6A9TUKUCMgOwA4DMDOAG5So2gqU3YFLgVwOoCDAPwke+4jMqwNkGMAvABAbeUaIbGSRihAL7IWwP4RaYpGrakhPg/Ae4rWVpkvRYG9ARxbQ2FrAeTOAM4GcOMaRFEZZlfgMgDbAjhv7pLUAsghpt8xtx56fz0KHAzg8LmLUwsg7wKwz9xi6P1VKfCOGvoitQByAoAnVGUeFWZuBdgm1sxdiFoA+QSAveYWQ++vSgG2iSfOXSIBMrcF9P4hBQSIpYw8iEBxFRAgAkRUrFBAgAgQASJAwtqAPrHCdGopljyIPEhL7T26rgJEgEQ3mpYSCBAB0lJ7j66rACkIyGsBfD3aJEowRoFdALxmTAZOWgFSEBDOwFJghekUoObrMr5OgAiQjM1p/qwESEEb5B7mlQcpaKyBrAVIQc0FSEFxJ8pagBQUWoAUFHeirAVIQaEFSEFxJ8pagBQUOjcgoUV9G4CXhEZuNN6RAA6Yoe4axSo4ihVqTwHiV0qA+DUqHkMepLjEyS8QIMnS5UsoQPJpmTsnAZJb0YT8BEiCaBMlESATCb3qNQKkAiMMFEGAVGAbAVKBEQTItRVo/VQTjWL5wZQH8WtUPIY8SHGJk18gQJKly5dQgOTTMndOAiS3ogn5HT3TOaz6xPIbay5A3j7TDP41FKmlD/IsAMf5bZU9hgDxSzoXIM8AcLy/eGVj1ALIfQH8sGxVe3MXIH7R5wLkPgDO8hevbIxaAGE5PgvgsWWre63cBYhf8DkA+TyAPfxFKx+jFkBYU17YeYa52bZ8za9+gwDxKz01ILxpbCcAvNhz9lATIBSDV7DRIM+dSBkB4hd6SkB4R+WLAVzuL9Y0MWoDpKs1f0EeCmBHAJuNlOI2ALYZyIPHA71uZP5zJafteIf8HwsXgBoNHefDX/uLRr7/AtP//AaA74/MK3vyWgHJWdFVO92mPNzh9gAeA2D7FUPahPn5AL5gPjdX6bArgFMBfAfASeaYo9/lFM7kVYt+Barmz1KAlDk/6zoA7gXg/uafBwG4n2WOHZxRu60BHAjg6QBuAOB0AA/2mI9DoE9z4hwE4Ai/2aNiCJAouZYXuZSB+Wt/V/PPFgB4lfXdAPC/+Xc29KHgXlB5DID9nMi7Gw/Rl8cmAP4GgP+2wz0A/CqziUrpl7mYZbKTB0nzILce+e19CQAC9h9j1lsC4OeRfU/8mQC2GzA7Pc2HnGenAXhEgWYiQAqIWlOWpQz8BwB3SKzolQDoIezzg9kRZofYDnsC+FTPO77SAwNvCf5kYnlWJSulX4Gi5s9SHiTNg9ASJwJgAw4Jvzezwj8GwNEagnGFk5De4zwAt7L+ztUF7K/Y4Z4AznH+xpGgOwG4KqQwkXEESKRgS4teysAvB3C4EYMNk8OdFwJgP8D+VGJjZoc9JLwRwKFORM4oc2a5C/y04ieWHdjBPyrkBQlxSumXUJTpk8iDpHsQgsDRqZ8C4HxA15/g/3MdURdiAOGcDz/drjfgRTY3XsZ+frEZIHA9Uq7WJEByKVlpPlMbeAwglNAevv226ZdwvoOBQ7gvc3Q+BMCbC2o/tX4FqxKftTxIugcZUjsGEA7THuxkxD7GkwF8F8ApzjOecHgz529vddYt/cOsMYtvDf0pBEguJSvNZ2oDxwByczOfkVO68wHcMWOGU+uXsejjs5IHmdeDCJDxbbhoDgIkDRAOxbJzPCbcBQA/hzgjnjPIg2RUU4DUB8gvAHBeIzRwaQvnQLogQEKVC4gnQOoDhGuy1gbYrovyFgAvFSARikVEFSACxNdc1En3KbTw5yUMfFMAJ/fo0rc5ixN4fRuBWC6uyXL7IPIgFTU4eZA0DzJkQn4a7es8XDWT3jeKJUAEyKQKlPAgfRXg/o+/AriRAJnUvkVfJg+Sz4PwoLMP9ljrfwCeCmBdzzN5kKLNe3zmAiQPINxiywWLWw2YhJDsBeDTznMBMr4NF81BgOQBpG+Hn2u4/wJ4vDmQoXvWB4jmQYo2+bjMBch4QK4P4NeB65/+DWA3AN80ZtJSk7j2OnlsATIekFXnRvUZlMO6POHktwAEyORNPu6FAmQcIFuavoe9gYn9jetaZqB34WYqu3/yS7OVln0XrcWKa7OTxhYg6YBQOx7axlMgu/Azsy/c3VH4bHPWlW1c7kvnYd19G6A2tiLyHV8y/8/TJh/utBD3ZEjtB8mIkABJB+T1AF7l2IIbnV4xsOX2fQD2tuLzWB8ercrZ9C7wAO9/OnlyQ1W3953v43u7sB4AvVDJMNU8Usk6JOctQNIAebQzGkUD8EQSrqzlySV9e9JvYeJsaqDgqYvcXGUHnmDCE+7twNMTP2L+IECSm3paQgESDwhPT2TD5q+9HXgi/fvNs6FDG15kTh8ZOiL0SQA+5uTLT6qvCZC0Bj42lQCJB4QjT38GwOHdLvCEdR49yrmOVVtu2Xk/FgCvnOPnkRtcD8HnfB9PYmSQBxnb4iPTC5B4QCixeyvvM62jQGP2pLvm4i1b9s1KPI6UOw+7IEAiG/jY6AIkDRBeY9Ad5saTEh9mGSIVEJ73+yen030CgDURgPDAOg45dx5nbPtgenXSc6hYcR4lDMyRIzZm7gvh/AYn/bqQCghHq97k6MglLB+OAIQdfw4L8zwt3jFCiDlaNiaU0G9MeSZNKw+S5kFoJDZmDske5lgsBRDa4VxzbGmXHScceeo75zVCP7E4T2IfiM10HD37+4hWJUBGiLeEpKUMzJPd6UXYMbdDCiD7Azjaycf9vOJjXx/kcQA+Y+XDstmDCSn2KqVfSlkmTyMPku5BhowVCwjvGeQKXnfYeGfzuWS/xwcIZ+w5StYFLnO5+8hWJUBGClh78qkNHAsIPQXv9rAD+xEExA0+QNyFk1w1zM+uMWFq/caUNXtaeZD5PAjnRHgN9Qt7rOreYdhFeSWANzjxebUC972zr8H+hz1JeRyA54xsNQJkpIC1J5/awCEehJ9TvDnqkT3ifQAAP5X6Amfr3xsheI5LPafWL6J65aPKg8zjQezLd2wr/8jcOcKNVX2BdxDy+rXQ0NePCU3bxRMgsYotLP7UBg7xIDwBhR1z+8jQ3wB4oFnGMiQx51/Y8bZn14fi8iIerhtzR9lizTe1frHlKxpfHmQeD0Kj2iuC2Zj5a8+7DH3hIebQOq7RGgp/MfcncpZ/bBAgYxWsPP3UBuYwqz20yvVU7p2CnWQnAdgewC7mGuhQKXn/B1f58j52e/ci03OHIlcEc0FljjC1fjnKnC0PeZD8HiTGOJxs5HbcXI055t2hcQVIqFILjde0gTPYrGn95EHm9SAZ2m/xLARIcYnnfUHTBs4gfdP6yYPIg/gYEiA+hRb+vGkDZ7Bd0/rJg8iD+BgSID6FFv68aQNnsF3T+smDyIP4GBIgPoUW/rxpA2ewXdP6yYPEeRAuU/+c2Y9+SobGN2UWjwJwiDlW6NKIFwuQCLGWGDWXgXmCyZcB8OSQqwDsA4Dn7S4hcM/7UeZIoR+YfSj2YRCr6pBLvyXodK0yyoOEeRDCwd16XFhoh2MAHGCAqbEBcHn8uwFwo5UdYiARIDVaNmOZxhp4CI6uiPzU2hPA5RnLnCMr3rbL1cL8tOoLPGSbB975PMlY/XLUZbY85EFWexAfHJ3huElqd3MM0GzGtF7MVcI8OG47T2FCIBEgNVi0YBlSDcxDEL7a81k1VNQLzCYo90qDglXrzZpQ8MKdzQJf7IMkVb/A19cdTR6k34MQDh6Zs22k+fiZxc+tuUa4+DnFzyp+XsWEVZAIkBglFxg31sCpcHTSzDXCxeODjhxx4xQh4aEQ7p2JsfotsIkMF1ke5JoeZCwcttI8SvTACUa4hkaqUhoq71jknncbEgGSouSC0oQamNcP8Can2M+qVVKUHuHyjVSlmMmFJFS/lHdVn0Ye5GoPQji+5VzVnMt4pUa4QkeqUuphQyJAUhRcUBqfgU8LhIOHK+wHYB0AniryanO5TIgUuUe4YkeqPm5ux2U5eBMvP/98p753kOxm6txXT2rLH5gNNrTuQfYFwIs1eQnOqsCTDnmrFId97cAZas5Uh1zFnGuEK2akamjAYFdzuQ4PsFsVCMk7AawdiCRANoCfhlUehA3f10iuMHB0N826kuRosKEyE2YeeJ0DSJ7FxcnEG3pe/i8AmwiQUBMtL94qQHy1IRw8YJpXmq0KsZ88sSNcsSNVvNiHM/u+SUue5sgFmD5IhuouD+JrQQt4ngpIKBydBOw0cwZ7m0BNQke4YkeqzjZwnB9YjjGQCJBAkWuOlgII90vw08nnOdx6c7/IyeZY0BBNfCNcsSNVHHDgNWwx+z1YTkJCYN1brnx1ECA+hRbwPBYQNi7OKHNJeErgWbm8uGboPF43z6ERrtjPtuPNvSK8/DMlcJ8LByFiIBEgKUpXliYGkLFw2FXvu9Z5SBp3hGsPM7QasqZqPQC+64gMusdCIkAyiD53FqGAcF8EO+SpnqOvnly4yJPWNw4QoRuSJRRcUxUyBH+lmdfgAsVcgZCw486l/r4gQHwKLeB5CCCEg5uHuGAvd9gJwBfNHYI5877Y7C//Xs5MTV7cOckdlD5IBEgB8afO0gdISTi6um4B4FQA/HeOcC4AznDz7pFSIQQSAVJK/QnzfQCAoV9Zrlplh7yE53CryJXC9CT0KGMC14yxj3LJmEwC0xISdtxZ9r7Az7EzAvNaZLSQ79xFVswqNCfZ2Jjc0RnCwaXdXE4xVWBfhH0S9k1SAtdUcXSM68KmClzdzM1jLiSXAdgUAAcJNtjQAiA03o4APgpgS2PJMwGsAfDzGSxLzXnX+aGR72YaLpCcI2wN4EQA/DcDdSOoG7T3YEVbAYR1pSfh5xZ/+c6q4JePDYzzJe4dgy4A9BaMS+8xZ2BbubfZzsuRPo66bfChJUBqNCYv4uTM+9DkHD8N2d9gv0NhBgUEyAyiO6/k2i2OcG3u/J0jVByp4oiVwkwKCJCZhHdee1vTR+I+DQZO1D0FwEV1FK/dUgiQdm2vmgcoIEACRFKUdhUQIO3aXjUPUECABIikKO0qIEDatb1qHqCAAAkQSVHaVUCAtGt71TxAAQESIJKitKuAAGnX9qp5gAICJEAkRWlXAQHSru1V8wAFBEiASIrSrgICpF3bq+YBCgiQAJEUpV0FBEi7tlfNAxQQIAEiKUq7CgiQdm2vmgcoIEACRFKUdhUQIO3aXjUPUECABIikKO0qIEDatb1qHqCAAAkQSVHaVUCAtGt71TxAAQESIJKitKuAAGnX9qp5gAICJEAkRWlXAQHSru1V8wAFBEiASIrSrgICpF3bq+YBCgiQAJEUpV0FBEi7tlfNAxQQIAEiKUq7CgiQdm2vmgcoIEACRFKUdhUQIO3aXjUPUECABIikKO0qIEDatb1qHqCAAAkQSVHaVUCAtGt71TxAAQESIJKitKuAAGnX9qp5gAL/B9xLvvbGgVBFAAAAAElFTkSuQmCC"; option = { backgroundColor: ‘#fff‘, tooltip: { trigger: ‘item‘, formatter: "{b} : {d}% <br/> {c}" }, graphic: { elements: [{ type: ‘image‘, style: { image: giftImageUrl, width: 130, height: 130 }, left: ‘center‘, top: ‘center‘ }] }, /*legend: { orient: ‘horizontal‘, icon: ‘circle‘, bottom: 20, x: ‘center‘, data: [‘金融‘, ‘房地產‘, ‘專業服務業‘, ‘批發和零售業‘, ‘其他‘] },*/ series: [{ type: ‘pie‘, radius: [‘35%‘, ‘50%‘], center: [‘50%‘, ‘50%‘], color: [‘#0E7CE2‘, ‘#FF8352‘, ‘#E271DE‘, ‘#F8456B‘, ‘#00FFFF‘, ‘#4AEAB0‘], data: [{ value: 335, name: ‘金融‘ }, { value: 310, name: ‘房地產‘ }, { value: 234, name: ‘其他‘ }, { value: 235, name: ‘批發和\n零售業‘ }, { value: 254, name: ‘專業\n服務業‘ } ], labelLine: { normal: { show: true, length: 20, length2: 20, lineStyle: { color: ‘#12EABE‘, width: 2 } } }, label: { normal: { formatter: ‘{c|{b}}\n{d|{d}%}‘, rich: { b: { fontSize: 16, color: ‘#12EABE‘, align: ‘left‘, padding: 4 }, d: { fontSize: 16, align: ‘left‘, padding: 2 }, c: { color: ‘#333‘, fontSize: 16, align: ‘left‘, padding: 2 } } } } }] };
雙曲螺線
var data = []; for (var circle = 0; circle < 5; ++circle) { for (var i = 0; i <= 100; i++) { var theta = i / 100 * 360; var alpha = circle * 360 + theta; var r = Math.pow(Math.E, 0.003 * alpha); data.push([r, theta]); } } option = { title: { text: ‘雙曲螺線‘ }, polar: {}, tooltip: { trigger: ‘item‘ }, angleAxis: { type: ‘value‘, startAngle: 135, show: false }, radiusAxis: { show: false, max: 225 }, series: [{ coordinateSystem: ‘polar‘, name: ‘line‘, type: ‘line‘, data: data, symbolSize: 0, symbol: ‘circle‘, areaStyle: { normal: { color: new echarts.graphic.RadialGradient(0.64, 0.5, 1, [{ offset: 0.1, color: ‘rgba(255, 0, 0, 0.5)‘ }, { offset: 1, color: ‘rgba(255, 255, 0, 0)‘ }], false) } }, lineStyle: { normal: { color: ‘#C25353‘, width: 3 } } }] };
geo地圖
var geoCoordMap = { ‘福州‘: [119.4543,25.9222], ‘太原‘: [112.3352,37.9413], ‘長春‘: [125.8154,44.2584], ‘重慶‘: [107.7539,30.1904], ‘西安‘: [109.1162,34.2004], ‘成都‘: [103.9526,30.7617], ‘常州‘: [119.4543,31.5582], ‘北京‘: [116.4551,40.2539], ‘北海‘: [109.314,21.6211], ‘海口‘: [110.3893,19.8516], ‘廣州‘: [113.5107,23.2196] }; var GZData = [ [{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}] ]; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }); } } return res; }; var color = [‘#46bee9‘]; var series = []; [[‘廣州‘, GZData]].forEach(function (item, i) { series.push( { name: item[0] + ‘ Top10‘, type: ‘lines‘, zlevel: 2, symbol: [‘none‘, ‘arrow‘], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: ‘arrow‘, symbolSize: 5 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0] + ‘ Top10‘, type: ‘effectScatter‘, coordinateSystem: ‘geo‘, zlevel: 2, rippleEffect: { brushType: ‘stroke‘ }, label: { normal: { show: true, position: ‘right‘, formatter: ‘{b}‘ } }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option = { backgroundColor: ‘#404a59‘, tooltip : { trigger: ‘item‘ }, geo: { map: ‘china‘, label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: ‘#323c48‘, borderColor: ‘#404a59‘ }, emphasis: { areaColor: ‘#2a333d‘ } } }, series: series };
玫瑰圖
var data = [{ value: 1, name: ‘華南城市1‘ }, { value: 2, name: ‘華南城市2‘ }, { value: 3, name: ‘華南城市3‘ }, { value: 4, name: ‘華南城市4‘ }, { value: 5, name: ‘華南城市5‘ }, { value: 6, name: ‘華南城市6‘ }, { value: 1, name: ‘華東城市1‘ }, { value: 2, name: ‘華東城市2‘ }, { value: 3, name: ‘華東城市3‘ }, { value: 4, name: ‘華東城市4‘ }, { value: 5, name: ‘華東城市5‘ }, { value: 6, name: ‘華東城市6‘ }, { value: 1, name: ‘華北城市1‘ }, { value: 2, name: ‘華北城市2‘ }, { value: 3, name: ‘華北城市3‘ }, { value: 4, name: ‘華北城市4‘ }, { value: 5, name: ‘華北城市5‘ }, { value: 6, name: ‘華北城市6‘ }, { value: 1, name: ‘華西城市1‘ }, { value: 2, name: ‘華西城市2‘ }, { value: 3, name: ‘華西城市3‘ }, { value: 4, name: ‘華西城市4‘ }, { value: 5, name: ‘華西城市5‘ }, { value: 6, name: ‘華西城市6‘ }, { value: 1, name: ‘東北城市1‘ }, { value: 2, name: ‘東北城市2‘ }, { value: 3, name: ‘東北城市3‘ }, { value: 4, name: ‘東北城市4‘ }, { value: 5, name: ‘東北城市5‘ }, { value: 6, name: ‘東北城市6‘ }] var labelData = [{ value: 6, name: ‘華南‘ }, { value: 6, name: ‘華東‘ }, { value: 6, name: ‘華北‘ }, { value: 6, name: ‘華西‘ }, { value: 6, name: ‘東北‘ }]; option = { backgroundColor: ‘#0C2A40‘, title: { text: ‘我是標題‘, left: ‘1%‘, top: ‘1%‘, textStyle:{ color:"#FFF", fontSize:"12" } }, tooltip: { trigger: ‘item‘, }, color: ["#FC0300", "#FC0303", "#FC0A0A", "#FC1A1A", "#FC3131", "#FC4B4B", "#19B7CF", "#2CB9CE", "#34BCD1", "#3BBFD1", "#48BFD1", "#58C1D1", "#CA8622", "#C98B2E", "#C9903B", "#CB9848", "#C99D5A", "#CBA567", "#2F4554", "#314652", "#344852", "#394852", "#3E4D55", "#404D55", "#91C7AE", "#98C6B2", "#9DC9B7", "#AAC6B9", "#B4C6BF", "#BCC9C4", ], series: [{ type: ‘pie‘, data: data, roseType: ‘area‘, itemStyle: { normal: { // borderColor: ‘#22C3AA‘ } }, label: { normal: { position: ‘inside‘ } } }, { type: ‘pie‘, data: labelData, radius: [‘88%‘, ‘100%‘], zlevel: -2, itemStyle: { normal: { color: ‘#152E43‘, borderColor: ‘#0F5FA0‘ } }, label: { normal: { position: ‘inside‘ } } }] };
echart 打開新世界的大門