保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

使用echarts开发电子屏数据展示页面-安度博客

时间:2019-02-08 15:40:08   作者:   来源:   阅读:84   评论:0
内容摘要:配景  之前的项目因为要顾及体量问题,选用了highchart,没用上echarts;这次因为是当地部署电子屏幕的展示页,不需要思量体量巨细,直接用上了echarts;用起来以为很是不错,特别是舆图上很是炫酷的飞机航行动画,吊炸天了。美中不足的地方是x轴上文字展示部门,想加些个性......
  • 配景

      之前的项目因为要顾及体量问题,选用了highchart,没用上echarts;这次因为是当地部署电子屏幕的展示页,不需要思量体量巨细,直接用上了echarts;用起来以为很是不错,特别是舆图上很是炫酷的飞机航行动画,吊炸天了。美中不足的地方是x轴上文字展示部门,想加些个性化的icon不支持,柱状图每条柱想用差异的颜色也不支持,那只能让设计师妥协了,呵呵!

    一、舆图的实现

    image

    注意要先引入舆图依赖数据china.js或者异步请求china.json文件,其他代码如下:

    //舆图$(function () { var geoCoordMap = { &#39;上海&#39;: [121.4648 31.2891] &#39;东莞&#39;: [113.8953 22.901] &#39;东营&#39;: [118.7073 37.5513] &#39;中山&#39;: [113.4229 22.478] &#39;临汾&#39;: [111.4783 36.1615] &#39;临沂&#39;: [118.3118 35.2936] &#39;丹东&#39;: [124.541 40.4242] &#39;丽水&#39;: [119.5642 28.1854] &#39;乌鲁木齐&#39;: [87.9236 43.5883] &#39;佛山&#39;: [112.8955 23.1097] &#39;保定&#39;: [115.0488 39.0948] &#39;兰州&#39;: [103.5901 36.3043] &#39;包头&#39;: [110.3467 41.4899] &#39;北京&#39;: [116.4551 40.2539] &#39;北海&#39;: [109.314 21.6211] &#39;南京&#39;: [118.8062 31.9208] &#39;南宁&#39;: [108.479 23.1152] &#39;南昌&#39;: [116.0046 28.6633] &#39;南通&#39;: [121.1023 32.1625] &#39;厦门&#39;: [118.1689 24.6478] &#39;台州&#39;: [121.1353 28.6688] &#39;合肥&#39;: [117.29 32.0581] &#39;呼和浩特&#39;: [111.4124 40.4901] &#39;咸阳&#39;: [108.4131 34.8706] &#39;哈尔滨&#39;: [127.9688 45.368] &#39;唐山&#39;: [118.4766 39.6826] &#39;嘉兴&#39;: [120.9155 30.6354] &#39;大同&#39;: [113.7854 39.8035] &#39;大连&#39;: [122.2229 39.4409] &#39;天津&#39;: [117.4219 39.4189] &#39;太原&#39;: [112.3352 37.9413] &#39;威海&#39;: [121.9482 37.1393] &#39;宁波&#39;: [121.5967 29.6466] &#39;宝鸡&#39;: [107.1826 34.3433] &#39;宿迁&#39;: [118.5535 33.7775] &#39;常州&#39;: [119.4543 31.5582] &#39;广州&#39;: [113.5107 23.2196] &#39;廊坊&#39;: [116.521 39.0509] &#39;延安&#39;: [109.1052 36.4252] &#39;张家口&#39;: [115.1477 40.8527] &#39;徐州&#39;: [117.5208 34.3268] &#39;德州&#39;: [116.6858 37.2107] &#39;惠州&#39;: [114.6204 23.1647] &#39;成都&#39;: [103.9526 30.7617] &#39;扬州&#39;: [119.4653 32.8162] &#39;承德&#39;: [117.5757 41.4075] &#39;拉萨&#39;: [91.1865 30.1465] &#39;无锡&#39;: [120.3442 31.5527] &#39;日照&#39;: [119.2786 35.5023] &#39;昆明&#39;: [102.9199 25.4663] &#39;杭州&#39;: [119.5313 29.8773] &#39;枣庄&#39;: [117.323 34.8926] &#39;柳州&#39;: [109.3799 24.9774] &#39;株洲&#39;: [113.5327 27.0319] &#39;武汉&#39;: [114.3896 30.6628] &#39;汕头&#39;: [117.1692 23.3405] &#39;江门&#39;: [112.6318 22.1484] &#39;沈阳&#39;: [123.1238 42.1216] &#39;沧州&#39;: [116.8286 38.2104] &#39;河源&#39;: [114.917 23.9722] &#39;泉州&#39;: [118.3228 25.1147] &#39;泰安&#39;: [117.0264 36.0516] &#39;泰州&#39;: [120.0586 32.5525] &#39;济南&#39;: [117.1582 36.8701] &#39;济宁&#39;: [116.8286 35.3375] &#39;海口&#39;: [110.3893 19.8516] &#39;淄博&#39;: [118.0371 36.6064] &#39;淮安&#39;: [118.927 33.4039] &#39;深圳&#39;: [114.5435 22.5439] &#39;清远&#39;: [112.9175 24.3292] &#39;温州&#39;: [120.498 27.8119] &#39;渭南&#39;: [109.7864 35.0299] &#39;湖州&#39;: [119.8608 30.7782] &#39;湘潭&#39;: [112.5439 27.7075] &#39;滨州&#39;: [117.8174 37.4963] &#39;潍坊&#39;: [119.0918 36.524] &#39;烟台&#39;: [120.7397 37.5128] &#39;玉溪&#39;: [101.9312 23.8898] &#39;珠海&#39;: [113.7305 22.1155] &#39;盐城&#39;: [120.2234 33.5577] &#39;盘锦&#39;: [121.9482 41.0449] &#39;石家庄&#39;: [114.4995 38.1006] &#39;福州&#39;: [119.4543 25.9222] &#39;秦皇岛&#39;: [119.2126 40.0232] &#39;绍兴&#39;: [120.564 29.7565] &#39;聊城&#39;: [115.9167 36.4032] &#39;肇庆&#39;: [112.1265 23.5822] &#39;舟山&#39;: [122.2559 30.2234] &#39;苏州&#39;: [120.6519 31.3989] &#39;莱芜&#39;: [117.6526 36.2714] &#39;菏泽&#39;: [115.6201 35.2057] &#39;营口&#39;: [122.4316 40.4297] &#39;葫芦岛&#39;: [120.1575 40.578] &#39;衡水&#39;: [115.8838 37.7161] &#39;衢州&#39;: [118.6853 28.8666] &#39;西宁&#39;: [101.4038 36.8207] &#39;西安&#39;: [109.1162 34.2004] &#39;贵阳&#39;: [106.6992 26.7682] &#39;连云港&#39;: [119.1248 34.552] &#39;邢台&#39;: [114.8071 37.2821] &#39;邯郸&#39;: [114.4775 36.535] &#39;郑州&#39;: [113.4668 34.6234] &#39;鄂尔多斯&#39;: [108.9734 39.2487] &#39;重庆&#39;: [107.7539 30.1904] &#39;金华&#39;: [120.0037 29.1028] &#39;铜川&#39;: [109.0393 35.1947] &#39;银川&#39;: [106.3586 38.1775] &#39;镇江&#39;: [119.4763 31.9702] &#39;长春&#39;: [125.8154 44.2584] &#39;长沙&#39;: [113.0823 28.2568] &#39;长治&#39;: [112.8625 36.4746] &#39;阳泉&#39;: [113.4778 38.0951] &#39;青岛&#39;: [120.4651 36.3373] &#39;韶关&#39;: [113.7964 24.7028] }; var GZData = [ [{ name: &#39;广州&#39; } { name: &#39;广州&#39; value: 95 }] [{ name: &#39;广州&#39; } { name: &#39;太原&#39; value: 90 }] [{ name: &#39;广州&#39; } { name: &#39;长春&#39; value: 80 }] [{ name: &#39;广州&#39; } { name: &#39;重庆&#39; value: 70 }] [{ name: &#39;广州&#39; } { name: &#39;西安&#39; value: 60 }] [{ name: &#39;广州&#39; } { name: &#39;成都&#39; value: 50 }] [{ name: &#39;广州&#39; } { name: &#39;上海&#39; value: 160 }] [{ name: &#39;广州&#39; } { name: &#39;北京&#39; value: 100 }] [{ name: &#39;广州&#39; } { name: &#39;北海&#39; value: 20 }] [{ name: &#39;广州&#39; } { name: &#39;海口&#39; value: 10 }] ]; var planePath = &#39;path://M1705.061318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.48236.829-63.961121.491l0.073208.063l-319.9221.799v89.254l330.343-157.288l12.238241.308l-134.44992.931l0.53142.034l175.125-42.917l175.12542.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.061318.313z&#39;; 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; }; // genOption function genOption(GZData) { var color = [&#39;#f4e925&#39;];//点黄 var series = []; [[&#39;广州&#39; GZData]].forEach(function (item i) { series.push({ name: item[0] + &#39; Top10&#39; type: &#39;lines&#39; zlevel: 1 effect: { show: true period: 6 trailLength: 0.7 color: &#39;#fff&#39; symbolSize: 3 } lineStyle: { normal: { color: color[i] width: 0 curveness: 0.2 } } data: convertData(item[1]) } { name: item[0] + &#39; Top10&#39; type: &#39;lines&#39; zlevel: 2 effect: { show: true period: 6 trailLength: 0 symbol: planePath symbolSize: 15 } lineStyle: { normal: { color: color[i] width: 1 opacity: 0.4 curveness: 0.2 } } data: convertData(item[1]) } { name: item[0] + &#39; Top10&#39; type: &#39;effectScatter&#39; coordinateSystem: &#39;geo&#39; zlevel: 2 rippleEffect: { brushType: &#39;stroke&#39; } label: { normal: { show: true position: &#39;right&#39; formatter: &#39;{b}&#39; } } 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]) }; }) }); }); return { tooltip: { trigger: &#39;item&#39; } geo: { map: &#39;china&#39; label: { emphasis: { show: false } } roam: true itemStyle: { normal: { areaColor: &#39;#004b94&#39;//舆图颜色 borderColor: &#39;#333&#39;//舆图边色 } emphasis: { areaColor: &#39;#0c2970&#39;//舆图mouse over颜色 } } } series: series }; } // 使用刚指定的配置项和数据显示图表。 var dMapChart = echarts.init(document.getElementById(&#39;d_map&#39;)); var option = genOption(GZData); dMapChart.setOption(option); // 基于准备好的dom,初始化echarts实例 setInterval(function () { dMapChart.dispose(); $(&#39;#d_map&#39;).html(&#39;&#39;); dMapChart = echarts.init(document.getElementById(&#39;d_map&#39;)); dMapChart.setOption(option); } 5000);});

      

    二、会员总数变化实现

    image

    这里用了较量盛行的css3动画库animate.css中的flipInX翻页效果来展示数据变化,代码如下:

     //模拟读取并修改显示 var _oldVal = $(&#39;#member_count&#39;).attr(&#39;data-value&#39;); setInterval(function () { var newVal = $(&#39;#member_count&#39;).attr(&#39;data-value&#39;) oStr = _oldVal.toString() nStr = newVal.toString(); if (_oldVal != newVal) { _oldVal = newVal; var oCharArr = oStr.split(&#39;&#39;) nCharArr = nStr.split(&#39;&#39;); if (oStr.length == nStr.length) { for (var i in oCharArr) { if (oCharArr[i] != nCharArr[i]) { var $img = $(&#39;#member_count&#39;).find(&#39;.no img:eq(&#39; + i + &#39;)&#39;) src = $img.attr(&#39;src&#39;); $img.attr(&#39;src&#39; src.replace(oCharArr[i] + &#39;.png&#39; nCharArr[i] + &#39;.png&#39;)).addClass(&#39;animated flipInX&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd animationend&#39; function () { $(this).attr(&#39;class&#39; &#39;&#39;); }); } } } else { var imgGapNo = nStr.length - oStr.length; var _img = $(&#39;#member_count&#39;).find(&#39;.no img:eq(0)&#39;) _no = $(&#39;#member_count&#39;).find(&#39;.no&#39;); for (var i = 0; i < imgGapNo; i++) { _no.append(_img.get(0).outerHTML); } for (var j in nCharArr) { var $img = $(&#39;#member_count&#39;).find(&#39;.no img:eq(&#39; + j + &#39;)&#39;) src = $img.attr(&#39;src&#39;); $img.attr(&#39;src&#39; src.replace(/d{1}.png/ nCharArr[j] + &#39;.png&#39;)).addClass(&#39;animated flipInX&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd animationend&#39; function () { $(this).attr(&#39;class&#39; &#39;&#39;); }); } } } } 5000);

      

    三、会员年龄漫衍

    image

    代码如下:

     // 图一、按年龄显示销售数据及客户数 var salesData = [10000 10500 10700 25000 11200 9175 8850] customersQtyData = [100 105 107 150 200 175 50]; function genAgeOption(salesData customersQtyData) { return { color: [&#39;#dedd74&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;axis&#39; } toolbox: { feature: { dataView: { show: false readOnly: false } magicType: { show: false type: [&#39;line&#39; &#39;bar&#39;] } restore: { show: false } saveAsImage: { show: false } } } grid: { x: 60 x2: 60 } legend: { data: [&#39;客户数&#39;] top: &#39;bottom&#39; left: &#39;right&#39; textStyle: { color: &#39;#fff&#39; } } xAxis: [ { axisLabel: { rotate: 60 interval: 0 } type: &#39;category&#39; data: [&#39;1-20岁&#39; &#39;21-26岁&#39; &#39;27-32岁&#39; &#39;33-40岁&#39; &#39;41-50岁&#39; &#39;51-60岁&#39; &#39;61岁以上&#39;] axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置x轴颜色 } } } ] yAxis: [ { type: &#39;value&#39; name: &#39;累计销售额(元)&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形左侧颜色 } } splitLine: { show: false } } { type: &#39;value&#39; name: &#39;客户数&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形右侧颜色 } } splitLine: { show: false } } ] series: [ { name: &#39;累计销售额(元)&#39; type: &#39;line&#39; smooth: true data: salesData } { name: &#39;客户数&#39; type: &#39;bar&#39; yAxisIndex: 1 data: customersQtyData } ] } } var ageOption = genAgeOption(salesData customersQtyData); var ageChart = echarts.init(document.getElementById(&#39;chart_by_age&#39;)); ageChart.setOption(ageOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { ageChart.dispose(); $(&#39;#chart_by_age&#39;).html(&#39;&#39;); ageChart = echarts.init(document.getElementById(&#39;chart_by_age&#39;)); ageChart.setOption(ageOption); } 22000);

      

    四、会员性别漫衍

    image

    代码如下:

     // 图二、按性别显示销售数据及客户数 var salesDataByGender = [1000000 2500000] customersQtyDataByGender = [100000 250000]; function genGenderOption(salesData customersQtyData) { return { color: [&#39;#dedd74&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;axis&#39; } toolbox: { feature: { dataView: { show: false readOnly: false } magicType: { show: false type: [&#39;line&#39; &#39;bar&#39;] } restore: { show: false } saveAsImage: { show: false } } } grid: { x: 100 x2: 100 } legend: { data: [&#39;累计销售额(元)&#39;] top: &#39;bottom&#39; left: &#39;left&#39; textStyle: { color: &#39;#fff&#39; } } xAxis: [ { axisLabel: { interval: 0 } type: &#39;category&#39; data: [&#39;男&#39; &#39;女&#39;] axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置x轴颜色 } } } ] yAxis: [ { type: &#39;value&#39; name: &#39;累计销售额(元)&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形左侧颜色 } } splitLine: { show: false } } { type: &#39;value&#39; name: &#39;客户数&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形右侧颜色 } } splitLine: { show: false } } ] series: [ { name: &#39;累计销售额(元)&#39; type: &#39;line&#39; smooth: true data: salesData } { name: &#39;客户数&#39; type: &#39;bar&#39; yAxisIndex: 1 data: customersQtyData } ] }; } var genderOption = genGenderOption(salesDataByGender customersQtyDataByGender); var genderChart = echarts.init(document.getElementById(&#39;chart_by_gender&#39;)); genderChart.setOption(genderOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { genderChart.dispose(); $(&#39;#chart_by_gender&#39;).html(&#39;&#39;); genderChart = echarts.init(document.getElementById(&#39;chart_by_gender&#39;)); genderChart.setOption(genderOption); } 17000);

      

    五、月每端销售数据

    image

    代码如下:

     // 图一、按客户端类型显示销售笔数及销售额 var orderCount = [121 312 55] salesData = [26541 60004 10242]; function getChannelBarOption(orderCount salesData) { return { color: [&#39;#dedd74&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;axis&#39; } toolbox: { feature: { dataView: { show: false readOnly: false } magicType: { show: false type: [&#39;line&#39; &#39;bar&#39;] } restore: { show: false } saveAsImage: { show: false } } } grid: { x: 60 x2: 60 } legend: { data: [&#39;销售额&#39;&#39;销售笔数&#39;] top: &#39;bottom&#39; left: &#39;center&#39; textStyle: { color: &#39;#fff&#39; } } xAxis: [ { axisLabel: { interval: 0 } type: &#39;category&#39; data: [&#39;微信端&#39; &#39;APP端&#39; &#39;PC端&#39;] axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置x轴颜色 } } } ] yAxis: [ { type: &#39;value&#39; name: &#39;销售笔数&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形左侧颜色 } } splitLine: { show: false } } { type: &#39;value&#39; name: &#39;销售额&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形右侧颜色 } } splitLine: { show: false } } ] series: [ { name: &#39;销售笔数&#39; type: &#39;line&#39; smooth: true data: orderCount } { name: &#39;销售额&#39; type: &#39;bar&#39; yAxisIndex: 1 data: salesData } ] }; } var channelBarOption = getChannelBarOption(orderCount salesData); var chanelBarChart = echarts.init(document.getElementById(&#39;channel_bar&#39;)); chanelBarChart.setOption(channelBarOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { chanelBarChart.dispose(); $(&#39;#channel_bar&#39;).html(&#39;&#39;); chanelBarChart = echarts.init(document.getElementById(&#39;channel_bar&#39;)); chanelBarChart.setOption(channelBarOption); } 25000);

      

    六、月每端销售数据占比

    image

    代码如下:

     // 图二、饼图,按客户端类型显示销售额 function genChannelPieOption(salesData) { return { color: [&#39;#6f85ff&#39; &#39;#66ffff&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;item&#39; formatter: &#39;{a} <br/>{b}: {c} ({d}%)&#39; } series: [ { name: &#39;销售额&#39; type:&#39;pie&#39; radius: [&#39;40%&#39; &#39;55%&#39;] data:[ { value: salesData[0] name: &#39;微信端&#39; } { value: salesData[1] name: &#39;APP端&#39; } { value: salesData[2] name: &#39;PC端&#39; } ] itemStyle: { normal: { label: { show: true formatter: &#39;{d}%{b} &#39; textStyle: { fontSize: 18 fontWeight: &#39;bold&#39; } } labelLine: { show: true } } } } ] }; } var channelPieOption = genChannelPieOption(salesData); var chanelPieChart = echarts.init(document.getElementById(&#39;channel_pie&#39;)); chanelPieChart.setOption(channelPieOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { chanelPieChart.dispose(); $(&#39;#channel_pie&#39;).html(&#39;&#39;); chanelPieChart = echarts.init(document.getElementById(&#39;channel_pie&#39;)); chanelPieChart.setOption(channelPieOption); } 21000);

      

    七、商品逐日销售数据

    image

    代码如下:

    //商品日销售趋势$(function () { var dateArr = [&#39;06.12&#39; &#39;06.13&#39; &#39;06.14&#39; &#39;06.15&#39; &#39;06.16&#39; &#39;06.17&#39; &#39;06.18&#39; &#39;06.19&#39; &#39;06.20&#39; &#39;06.21&#39; &#39;06.22&#39; &#39;06.23&#39; &#39;06.24&#39; &#39;06.25&#39; &#39;06.26&#39;] orderCount = [121 130 140 160 312 250 220 160 100 121 160 55 121 312 55] salesData = [26541 24541 22541 21541 19541 18541 26541 36541 46541 56541 60004 46541 56541 60004 10242]; function getDailyBarOption(dateArr orderCount salesData) { return { color: [&#39;#dedd74&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;axis&#39; } toolbox: { feature: { dataView: { show: false readOnly: false } magicType: { show: false type: [&#39;line&#39; &#39;bar&#39;] } restore: { show: false } saveAsImage: { show: false } } } grid: { x: 60 x2: 60 } legend: { data: [&#39;销售额&#39;&#39;销售笔数&#39;] top: &#39;bottom&#39; left: &#39;center&#39; textStyle: { color: &#39;#fff&#39; } } xAxis: [ { axisLabel: { interval: 0 } type: &#39;category&#39; data: dateArr axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置x轴颜色 } } } ] yAxis: [ { type: &#39;value&#39; name: &#39;销售笔数&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形左侧颜色 } } splitLine: { show: false } } { type: &#39;value&#39; name: &#39;销售额&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形右侧颜色 } } splitLine: { show: false } } ] series: [ { name: &#39;销售笔数&#39; type: &#39;line&#39; smooth: true data: orderCount } { name: &#39;销售额&#39; type: &#39;bar&#39; yAxisIndex: 1 data: salesData } ] }; } var dailyBarOption = getDailyBarOption(dateArrorderCount salesData); var dailyBarChart = echarts.init(document.getElementById(&#39;daily_sales&#39;)); dailyBarChart.setOption(dailyBarOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { dailyBarChart.dispose(); $(&#39;#daily_sales&#39;).html(&#39;&#39;); dailyBarChart = echarts.init(document.getElementById(&#39;daily_sales&#39;)); dailyBarChart.setOption(dailyBarOption); } 20000);});

      

    八、商品月销售趋势

    image

    代码如下:

    //商品月销售趋势$(function () { var dateArr = [&#39;2月&#39; &#39;3月&#39; &#39;4月&#39; &#39;5月&#39; &#39;6月&#39; &#39;7月&#39; &#39;8月&#39; &#39;9月&#39; &#39;10月&#39; &#39;11月&#39; &#39;12月&#39; &#39;1月&#39;] orderCount = [121 130 140 160 312 250 220 160 100 121 160 55] salesData = [26541 24541 22541 21541 19541 18541 26541 36541 46541 56541 60004 46541]; function getMonthlyBarOption(dateArr orderCount salesData) { return { color: [&#39;#dedd74&#39; &#39;#4fc0f5&#39;] tooltip: { trigger: &#39;axis&#39; } toolbox: { feature: { dataView: { show: false readOnly: false } magicType: { show: false type: [&#39;line&#39; &#39;bar&#39;] } restore: { show: false } saveAsImage: { show: false } } } grid: { x: 60 x2: 60 } legend: { data: [&#39;销售额&#39; &#39;销售笔数&#39;] top: &#39;bottom&#39; left: &#39;center&#39; textStyle: { color: &#39;#fff&#39; } } xAxis: [ { axisLabel: { interval: 0 } type: &#39;category&#39; data: dateArr axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置x轴颜色 } } } ] yAxis: [ { type: &#39;value&#39; name: &#39;销售笔数&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形左侧颜色 } } splitLine: { show: false } } { type: &#39;value&#39; name: &#39;销售额&#39; min: 0 axisLine: { lineStyle: { color: &#39;#95a7c5&#39;//设置图形右侧颜色 } } splitLine: { show: false } } ] series: [ { name: &#39;销售笔数&#39; type: &#39;line&#39; smooth: true data: orderCount } { name: &#39;销售额&#39; type: &#39;bar&#39; yAxisIndex: 1 data: salesData } ] }; } var monthlyBarOption = getMonthlyBarOption(dateArr orderCount salesData); var monthlyBarChart = echarts.init(document.getElementById(&#39;monthly_sales&#39;)); monthlyBarChart.setOption(monthlyBarOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { monthlyBarChart.dispose(); $(&#39;#monthly_sales&#39;).html(&#39;&#39;); monthlyBarChart = echarts.init(document.getElementById(&#39;monthly_sales&#39;)); monthlyBarChart.setOption(monthlyBarOption); } 25000);});

      

    九、月商品销售Top10

    image

    代码如下:

    //商品月销售Top 10商品$(function () { var salesData = [{ value: 26541 name: &#39;美国Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 36541 name: &#39;日本utena佑天兰胶原卵白黄金啫喱果冻面膜 3片...&#39; } { value: 16541 name: &#39;荷兰Hero Baby美素白金版奶粉3段 700g&#39; } { value: 46541 name: &#39;澳大利亚Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 66541 name: &#39;法国Hero Baby美素白金版奶粉3段 700g&#39; } { value: 26541 name: &#39;德国Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 36541 name: &#39;意太利Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 76541 name: &#39;加拿大Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 96541 name: &#39;香港Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } { value: 56541 name: &#39;澳门Gerber嘉宝 1段大米米粉 227g 宝宝辅食&#39; } ]; function genMonthlyGoodsOption(salesData) { var total = 0; for (var i in salesData) { total += salesData[i].value; } return { color: [&#39;#6f85ff&#39; &#39;#66ffff&#39; &#39;#4fc0f5&#39; &#39;#6f85ff&#39; &#39;#66ffff&#39; &#39;#4fc0f5&#39; &#39;#6f85ff&#39; &#39;#66ffff&#39; &#39;#4fc0f5&#39; &#39;#66ffff&#39;] tooltip: { trigger: &#39;item&#39; formatter: &#39;{a} <br/>{b}: {c} ({d}%)&#39; } series: [ { name: &#39;销售额&#39; type: &#39;pie&#39; radius: [&#39;40%&#39; &#39;55%&#39;] data: salesData itemStyle: { normal: { label: { show: true formatter: function (a) { var name = &#39;&#39;; if (a.name.length > 20) { name = a.name.substr(0 20) + &#39;&#39; + a.name.substr(20); } else { name = a.name; } return ((a.value / total) * 100).toFixed(2) + &#39;%&#39; + &#39;&#39; + name; } textStyle: { fontSize: 18 fontWeight: &#39;bold&#39; } } labelLine: { show: true } } } } ] }; } var monthlyGoodsOption = genMonthlyGoodsOption(salesData); var monthlyGoodsChart = echarts.init(document.getElementById(&#39;top10_monthly_goods&#39;)); monthlyGoodsChart.setOption(monthlyGoodsOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { monthlyGoodsChart.dispose(); $(&#39;#top10_monthly_goods&#39;).html(&#39;&#39;); monthlyGoodsChart = echarts.init(document.getElementById(&#39;top10_monthly_goods&#39;)); monthlyGoodsChart.setOption(monthlyGoodsOption); } 22000);});

      

    十、月销售品类Top5

    image

    代码如下:

    //商品月销售Top 10商品$(function () { var salesData = [{ value: 26541 name: &#39;电商-家居&#39; } { value: 36541 name: &#39;电商-美妆护肤&#39; } { value: 16541 name: &#39;电商-入口食品&#39; } { value: 46541 name: &#39;电商-母婴&#39; } { value: 66541 name: &#39;电商-保健品&#39; }]; function genMonthlyChannelOption(salesData) { var total = 0; for (var i in salesData) { total += salesData[i].value; } return { color: [&#39;#6f85ff&#39; &#39;#66ffff&#39; &#39;#4fc0f5&#39; &#39;#6f85ff&#39; &#39;#66ffff&#39;] tooltip: { trigger: &#39;item&#39; formatter: &#39;{a} <br/>{b}: {c} ({d}%)&#39; } series: [ { name: &#39;销售额&#39; type: &#39;pie&#39; radius: [&#39;40%&#39; &#39;55%&#39;] data: salesData itemStyle: { normal: { label: { show: true formatter: function (a) { var name = &#39;&#39;; if (a.name.length > 20) { name = a.name.substr(0 20) + &#39;&#39; + a.name.substr(20); } else { name = a.name; } return ((a.value / total) * 100).toFixed(2) + &#39;%&#39; + &#39; &#39; + name; } textStyle: { fontSize: 18 fontWeight: &#39;bold&#39; } } labelLine: { show: true } } } } ] }; } var monthlyChannelOption = genMonthlyChannelOption(salesData); var monthlyChannelChart = echarts.init(document.getElementById(&#39;top10_monthly_channel&#39;)); monthlyChannelChart.setOption(monthlyChannelOption); // 基于准备好的dom,初始化echarts实例 setInterval(function () { monthlyChannelChart.dispose(); $(&#39;#top10_monthly_channel&#39;).html(&#39;&#39;); monthlyChannelChart = echarts.init(document.getElementById(&#39;top10_monthly_channel&#39;)); monthlyChannelChart.setOption(monthlyChannelOption); } 24000);});

      


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)