// index.js // 获取应用实例 import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录 import {path} from '../../utils/circle'; const app = getApp() Page({ data: { showRight:false, polyline:[], tempList:[], hisLocal:[], ossPath: app.globalData.$filePath, title: '冷链追溯系统', token: '', mapCtx: '', latitude: '', //纬度 longitude: '', //经度 navbarData: { title: app.globalData.title, showCapsule: true, share: false }, llzsEc: { lazyLoad: true, }, tempList:[], Ec: { lazyLoad: true, }, pieEc: { lazyLoad: true, }, labelNum: { lazyLoad: true, }, latitude: 40, longitude: 116, status: { checkedMap:true, statisticsInfo:true, statusLabelTest:true, statusLabelNum:true, statusLabelType:true, expressStatu:true, transportStatus:true, tempChart:true, onlineNum:true, packageStatu:true, onlineSituat:true, newSituat:true }, CustomBar: app.globalData.CustomBar, StatusBar: app.globalData.StatusBar, systemMenu: [{ menuName: '查一查', icon: '/img/idx_img2.png', path: 'find', }, { menuName: '监测列表', icon: '/img/dev_img4.png', path: 'coldChain' }, { menuName: '激活锁闭', icon: 'http://oss.zhongyihz.cn/group156/default/20220815/17/51/6/4dcc7eb59450f00227dd7e20380f9c94.png', path: 'onAndOff' }, ], isAuth: false, modalHidden: true, scrollTop:0,//滚动监听 // 沃森新 cardIndex:0, tabLeftTop:[ {name:'新冠',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'}, {name:'肺炎',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'}, {name:'流感',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'} ], tabLeftTop_remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常', orderCardList:[{city:'泰州市',used:50,stack: 2},{city:'北京市',used:50,stack: 2},{city:'西安市',used:50,stack: 2},{city:'天津市',stack: 2,used:50},{city:'廊坊市',stack: 2,used:50},{city:'广州市',used:50,stack: 2},{city:'郑州市',used:50,stack: 2}] }, // 事件处理函数 onLoad() { var that = this; if (!wx.getStorageSync('status')) { wx.setStorageSync('status', JSON.stringify(that.data.status)); } }, showRight(){ this.setData({ showRight:true, }) }, gopage1(){ this.setData({ showRight:false, },()=>{ this.setCardLeft(); }) }, onReady: function () { }, onShow: function (options) { var that = this; var status = JSON.parse(wx.getStorageSync('status')) || ''; var title = wx.getStorageSync('title') || '' var status =status ? status:that.data.status; title = title ? title : '冷链追溯系统' this.setData({ status, title }) //获取新闻 this.getNewsList(); // 加载 this.setCardLeft(); }, setCardLeft(){ var diagamList = [ {name: "标签1",value: 0,unNormalTotal:0,symbolSize:40}, {name: "标签2",value: 0,unNormalTotal:0,symbolSize:40}, {name: "标签3",value: 1,unNormalTotal:2,symbolSize:40}, {name: "标签4",value: 3,unNormalTotal:1,symbolSize:40}, {name: "标签5",value: 3,unNormalTotal:1,symbolSize:40}, ] this.setCardDiagram(diagamList); // this.setCardFivePie(); this.setCardXuTuOption({normalTotal:15}); // this.setCardFivePie_rght(); var sixRightBarList = [{data:[120, 132, 101, 134, 90, 230, 210]},{data:[220, 182, 191, 234, 290, 330, 310]},{data:[150, 232, 201, 154, 190, 330, 410]}] this.setCardSixRightBar(sixRightBarList); var sevenCardPieList = [ {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, ] this.setSevenCardPie(sevenCardPieList); /**沃森新 */ //获取token,若无则判定用户是游客访问，不进行任何请求 var token = wx.getStorageSync('token'); this.setData({ token, tempList:[] }) var that = this; if (!token) { setTimeout(function () { that.noLogin() }, 500) return; } // 主产品查询 this.getsignProduct(); //主产品使用、库存、总数统计 this.getSignProductUseAndStackState(); //单一主产品不同地区使用情况 this.getSingleProductUseZoneStat(); // 获取按钮 this.getUserDefaultMenuList(); // 图5 主产品在库、在途、结束统计 this.getSignProductState(); // 主产品正常、预警统计 this.getSignPorductNormalWarningState(); // 主产品使用量、生产量统计 this.getSignProductUsedProduceState(); // 主产品不同年度 使用量统计 this.getSignPrroductYearUsedProduceState(); // 主产品在不同地区库存、使用数据统计 this.getSignProductCityState(); // 主产品最近一周每一天的使用量统计 this.getSignProductEveryWeekState(); }, getCysOrderOption(list){ var fontSize=8; return { color:["#7190F6","#FF723A","#EA1C43"], title: { show:false }, grid:{ top:"5%", left:"8%", right:"5%", bottom:"14%", }, xAxis: { type: 'category', axisTick:{show:false,}, axisLine:{lineStyle:{color:"#DEE3FF",}}, axisLabel:{color:"#999999", fontSize,interval: 0}, data: list.map(item=>item.name), }, yAxis: { type: 'value', splitLine:{lineStyle:{color:"#DEE3FF",}}, axisLabel:{color:"#999999", fontSize,}, }, series: [ { type: 'bar', barMaxWidth:30, barMinHeight:10, data: list.map(item=>item.orderNum), }, ] } }, setTemp(temperature) { var that = this; that.ecWen = that.selectComponent('#ecDomWen'); that.ecWen.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); var option = that.getTempOption(); option.xAxis.data = temperature.map(v => v.createTime.replace(" ", "\n")); option.series[0].data = temperature.map(v => v.temp); chart.setOption(option); that.wenChart = chart; return chart; }); }, showMap(markers) { var that = this; var token = wx.getStorageSync('token'); this.mapCtx = wx.createMapContext('home_map'); var points = [] for (var i in markers) { if(i==0){ points.push({ width:35, height:35, latitude:Number(markers[i].lat), longitude:Number(markers[i].lng), iconPath:"/img/map_icon1.png", }) } else if(i == markers.length-1){ points.push({ width:54, height:54, latitude:Number(markers[i].lat), longitude:Number(markers[i].lng), iconPath:"/img/index_icon_1000.png", }) } markers[i].latitude = Number(markers[i].lat) markers[i].longitude = Number(markers[i].lng) delete markers[i].lat delete markers[i].lng } that.setData({ markers:points, polyline: [{ color: '#2D59E6', width: 2, points: markers, }], latitude:markers.length != 0 ? markers[0].latitude : '', longitude:markers.length != 0 ? markers[0].longitude : '' }); that.mapCtx.includePoints({ points: markers || [], padding: [50, 50, 50, 50] }) }, noLogin() { var temp = [ {temp: '23.3',createTime: "2021-12-03 17:06:40"}, {temp: '23.2', createTime: "2021-12-03 17:08:10"}, {temp: '23.1', createTime: "2021-12-03 17:09:40"}, {temp: '23.1', createTime: "2021-12-03 17:11:10"}, {temp: '23.3', createTime: "2021-12-03 17:12:40"}, {temp:' 23.2', createTime: "2021-12-03 17:14:10"}, {temp: '23.3', createTime: "2021-12-03 17:15:40"}, {temp: '23.3', createTime: "2021-12-03 17:18:40"}, {temp: '23.2', createTime: "2021-12-03 17:26:10"}, {temp: '23.2', createTime: "2021-12-03 17:32:10"} ] //设备定位列表 var markerList = [{ id: 1, lat: "49.828921", lng: "122.956163", lastTemp: 29.2, transportType: '10', status: '10', }, { id: 2, lat: "39.898959", lng: "116.188584", lastTemp: 19.2, transportType: '40', status: '00', }, { id: 3, lat: "29.828457", lng: "120.495225", lastTemp: 29.3, transportType: '40', status: '10', }, { id: 4, lat: "21.358161", lng: "111.003038", lastTemp: 29.5, transportType: '30', status: '20', }, { id: 5, lat: "38.948484", lng: "120.846788", lastTemp: 29.8, transportType: '20', status: '10', }, { id: 6, lat: "33.785733", lng: "104.850694", lastTemp: 28.2, transportType: '10', status: '00', }, { id: 7, lat: "29.225357", lng: "121.306968", lastTemp: 27.2, transportType: '30', status: '00', }, ] this.showMap(markerList); this.setCard_top_right_butChart([ {total:10,city:'河北省'}, {total:25,city:'河南省'}, {total:27,city:'广东省'}, {total:32,city:'江苏省'}, ]) var klineList = [{ maps:[{total:10,},{total:15,},{total:19,},{total:13,},{total:18,},], productInfo:{name:'阿莫西林'} },{ maps:[{total:16,},{total:11,},{total:14,},{total:13,},{total:18,},], productInfo:{name:'红霉素'} },{ maps:[{total:18,},{total:14,},{total:11,},{total:8,},{total:17,},], productInfo:{name:'新型冠状病毒疫苗'} } ]; this.setKLine(klineList); this.setData({ tempList:temp, },()=>{ this.setTemp(temp); }) this.setData({ statisticSproductList:[ {product_name: "阿莫西林",data:[{data: 1,index: 39,color:"#2D59E6"},{data:1,index:872,color:"#71CCFF"}]}, {product_name: "红霉素",data:[{data:1,index: 266,color: "#2D59E6"},{data: 1,index: 862,color:"#71CCFF"}]}, {product_name: "新型冠状病毒疫苗",data:[{data:10,index: 555, color: "#2D59E6"},{data:1,index:200,color:"#71CCFF"}]}, ] },()=>{ var list1 = this.data.statisticSproductList; for (let index = 0; index < list1.length; index++) { for (let lindex = 0; lindex < list1[index].data.length; lindex++) { var color = list1[index].data[lindex].color; var total = list1[index].data[lindex].data; var itemIndex = list1[index].data[lindex].index; this.setCardFivePie_rght(color,total,itemIndex); } } }) const rawData = [ ['2021/12/31', '25.8', '26.8', '-33.69', '-0.94%', '24.5', '27.2', '176963664', '25403106', '-'], ['2021/12/30', '28.2', '26.3', '9.14', '0.26%', '25', '27.3', '26778766', '26778766', '-'], ['2021/12/29', '32.4', '28.74', '29.96', '0.85%', '26.2', '28.2', '182551920', '25093890', '-'], ['2021/12/28', '36.3', '35.3', '-94.13', '-2.59%', '35.3', '36.4', '269983264', '36904280', '-'], ['2021/12/25', '36.1', '36.2', '15.43', '0.43%', '36', '36.35', '198451120', '27466004', '-'], ['2021/12/24', '36.3', '36.1', '-23.6', '-0.65%', '35.7', '36.4', '227785216', '31542126', '-'], ['2021/12/23', '36.5', '36.3', '-15.68', '-0.43%', '36.3', '36.8', '298201792', '41990292', '-'], ['2021/12/22', '36.4', '36.5', '9.3', '0.26%', '36.1', '36.5', '261178752', '36084604', '-'], ['2021/12/21', '35.6', '36.4', '63.51', '1.77%', '35.6', '36.50', '299849280', '39831696', '-'], ['2021/12/18', '35.70', '35.90', '-1.03', '-0.03%', '35.60', '36.10', '273707904', '36538580', '-'], ['2021/12/17', '35.30', '35.80', '63.81', '1.81%', '35.30', '35.80', '283856480', '38143960', '-'], ['2021/12/16', '35.20', '35.10', '5.83', '0.17%', '35.00', '35.30', '193482304', '26528864', '-'], ['2021/12/15', '35.18', '35.10', '-10.31', '-0.29%', '34.90', '35.20', '200471344', '27627494', '-'], ['2021/12/14', '34.00', '35.20', '86.09', '2.51%', '33.90', '35.20', '215374624', '27921354', '-'], ['2021/12/11', '34.40', '34.30', '-20.91', '-0.61%', '34.0', '34.50', '182908880', '24507642', '-'], ['2021/12/10', '34.60', '34.50', '-16.94', '-0.49%', '34.40', '35.0', '200427520', '27949970', '-'], ['2021/12/9', '34.60', '34.70', '2.37', '0.07%', '34.50', '34.90', '195698848', '26785488', '-'], ['2021/12/8', '35.10', '34.70', '-66.86', '-1.89%', '34.60', '35.10', '224367312', '29782174', '-'], ['2021/12/7', '35.20', '35.30', '11.94', '0.34%', '35.00', '35.40', '208302576', '28056158', '-'], ['2021/12/4', '35.50', '35.20', '-59.83', '-1.67%', '35.10', '35.60', '251736416', '31976682', '-'], ['2021/12/3', '35.20', '35.80', '47.92', '1.35%', '35.10', '35.90', '281111232', '33885908', '-'], ['2021/12/2', '34.50', '35.30', '80.6', '2.33%', '34.20', '35.30', '301491488', '36918304', '-'], ['2021/12/1', '34.40', '34.50', '10.9', '0.32%', '34.10', '34.80', '252390752', '33025674', '-'] ]; this.setEchartkline(rawData); //地区产品统计 this.setCardLeftFive({ name:['北京', '云南', '广州', '辽宁', '山东', '重庆'], data:[ {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]}, {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]}, ] }); const cardTwo_leftOne = [ {stack: 0, end: 1, productName: "阿莫西林", trans: 0}, {stack: 0, end: 1, productName: "红霉素", trans: 0}, {stack: 0, end: 1, productName: "红霉素", trans: 0}, ] this.setCard_two_left_one(cardTwo_leftOne); // 主产品正常、预警统计 this.setCardEightBar([ {normal: 1, warning: 0, product_name: "阿莫西林"}, {normal: 0, warning: 1, product_name: "红霉素"}, {normal: 1, warning: 9, product_name: "新型冠状病毒疫苗"} ]); var seriesSixBar = [ {name: 2022, type: "line", stack: "Total",data:[1, 1, 6]}, {name: 2021, type: "line", stack: "Total",data:[4, 0,0]}, ] var cardSixLineList = ["阿莫西林", "红霉素", "新型冠状病毒疫苗"]; this.setCardSixBar(seriesSixBar,cardSixLineList); //地区产品统计 this.setCardLeftFive({ name:['北京', '云南', '广州', '辽宁', '山东', '重庆'], data:[ {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]}, {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]}, ] }); }, showMap1(markers) { var that = this; var token = wx.getStorageSync('token'); this.mapCtx = wx.createMapContext('home_map'); for (var i in markers) { markers[i].bId = markers[i].id markers[i].id = Number(i) markers[i].width = 54 markers[i].height = 54 markers[i].iconPath = "/img/index_icon_" + markers[i].transportType + '' + markers[i].status + ".png" markers[i].latitude = Number(markers[i].lat) markers[i].longitude = Number(markers[i].lng) delete markers[i].lat delete markers[i].lng } that.setData({ markers, latitude:markers.length != 0 ? markers[0].latitude : '', longitude:markers.length != 0 ? markers[0].longitude : '' },()=>{ if(markers.length!=0 && token){ //地图数据加载完成后，获取第一条数据的详情 that.getListChainTemperature(markers[0].bId); }else{ var temp = [ {temp: '23.3',createTime: "2021-12-03 17:06:40"}, {temp: '23.2', createTime: "2021-12-03 17:08:10"}, {temp: '23.1', createTime: "2021-12-03 17:09:40"}, {temp: '23.1', createTime: "2021-12-03 17:11:10"}, {temp: '23.3', createTime: "2021-12-03 17:12:40"}, {temp:' 23.2', createTime: "2021-12-03 17:14:10"}, {temp: '23.3', createTime: "2021-12-03 17:15:40"}, {temp: '23.3', createTime: "2021-12-03 17:18:40"}, {temp: '23.2', createTime: "2021-12-03 17:26:10"}, {temp: '23.2', createTime: "2021-12-03 17:32:10"} ] that.setTemp(temp) } }); that.mapCtx.includePoints({ points: markers, padding: [50, 50, 50, 50] }) }, getMapInfo(e) { var that = this; var index = e.detail.markerId; if (that.data.token) { for (var i in that.data.markers) { if (that.data.markers[i].id == index) { return; } } } else { wx.navigateTo({ url: '/pages/login/login', }) } }, onPageScroll:function(e){ this.setData({ scrollTop:e.scrollTop }) }, getList() { var that = this; app.requestP({ url: '/index/listChainLocal', method: 'post', contentType: ' application/json' }).then(res => { var result = [] res.data.data && res.data.data.map(item=>{ if(item.lng != 0 && item.lat != 0){ result.push(item) } }) that.showMap(result); }).catch(err=>{ app.showToptip(that,'error',err.data.msg) }) }, getTempOption() { return { title: { text: '温度：℃', textStyle: { color: '#999', fontSize: 6, } }, grid: { top: "20%", left: "4%", right: "5%", bottom: "3%", containLabel: true }, xAxis: { type: 'category', // boundaryGap: false, nameTextStyle: { color: "#77869E", fontSize: 4 }, axisLine: { onZero: false, lineStyle: { color: "#cccccc" } }, axisTick: { show: false }, splitLine: { show: false, }, axisLabel: { show: true, textStyle: { color: '#999', //更改坐标轴文字颜色 fontSize: 5, //更改坐标轴文字大小 } }, data: ['16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30'], // show: false }, yAxis: { type: 'value', splitNumber: 10, max: 40, axisLine: { lineStyle: { color: "#cccccc", }, show: true }, axisLabel: { show: true, textStyle: { color: '#999', //更改坐标轴文字颜色 fontSize: 5, //更改坐标轴文字大小 } }, splitLine: { show: false } }, series: [{ type: 'line', showSymbol: false, smooth: true, lineStyle: { width: 1, color: "#328EFD", //#D4D4D4 }, areaStyle: { origin: "start", color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#FFFFFF' // }, { offset: 1, color: '#4C96FE' //#D4D4D4 }], global: false } }, data: [18, 36, 25, 30, -20, 40, 33] }] } }, setPieChart(temperature) { var that = this; var num = 0; var color = ['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393']; temperature.map(v => num += v.num); that.ecWen = that.selectComponent('#pieDom'); that.ecWen.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getPieChartOption(); option.color = color; option.series[0].data = temperature.map(v => { var per = v.num / num * 100; return { value:v.num, name: v.productTypeName+':'+ v.num + ' 占比' + per.toFixed(2) + '%' } }); chart.setOption(option); that.wenChart = chart; return chart; }); }, getPieChartOption() { return { legend: { top: 'bottom', show: false, }, grid: { left: '0%', right: '0%', bottom: '3%', containLabel: true }, // color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'], series: [{ type: 'pie', radius: [30, 60], center: ['50%', '50%'], itemStyle: { normal: { label: { formatter: function (v) { //文字中遇到空格就换行 let text = v.name.split(" ").join("\n"); return text; }, show: true, }, labelLine: { show: true, color:'' } }, }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, }, data: [{ value: 40, itemStyle:{ normal:{ color:'#45C2E0' } } }, { value: 38, }, { value: 32, }, { value: 30, }, ] }] } }, setMapCenter() { var that = this; var locations = that.data.markers; that.mapCtx.includePoints({ points: locations, padding: [50, 50, 50, 50] }) }, getUserInfo() { var that = this; app.requestP({ method: "post", url: "/user/getUserInfo", }).then(function (res) { var userId = res.data.data.userId; // that.getProductChipState(); }).catch(err => { app.showToptip(that, 'error', '请刷新重试'); }) }, packageInfo(){ var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var packageList = JSON.stringify(this.data.packageList); wx.navigateTo({ url: '/pages/index/packageInfo/packageinfo?list=' + packageList, }) }, getNewsList() { var that = this; app.requestP({ url: '/query/news', method: 'post', needToken: false, data: { keyword: '', pageNum: '1', pageSize: '5' } }).then(res => { that.setData({ newsList: res.data.data.map(item => { return { ...item, createTime: item.createTime.substring(item.createTime.length - 8) } }) }) }).catch(err => { app.showToptip(that, 'error', err.data.msg) }) }, goNewsInfo(e) { var id = e.currentTarget.dataset.id; wx.navigateTo({ url: '/pages/index/newsInfo/newsInfo?id=' + id, }) }, goNewsList() { wx.navigateTo({ url: '/pages/index/newList/newList', }) }, getUserDefaultMenuList() { var that = this; app.requestP({ url: '/userDeaultMenu/list', method: 'post', }).then(res => { that.setData({ systemMenu: res.data.data }) }).catch(err => { app.showToptip(that, 'error', err.data.msg) }) }, tapMenu(e) { let type = e.currentTarget.dataset.type let path = e.currentTarget.dataset.path; //判断token，若有则假设已经登录 if (!wx.getStorageSync('token')) { wx.redirectTo({ url: '/pages/login/login', }) return; } //获取用户信息，判断userInfo是否过期 let userInfo = wx.getStorageSync('userInfo'); const { loginRole, ifOverFlow, status } = userInfo; // this.matchPage(loginRole, ifOverFlow, status, path); app.globalData.tabarData = {loginRole, ifOverFlow, status, path}; wx.switchTab({ url: '/pages/workbench/workbench', }) }, goMessage:function(){ if(this.data.token){ wx.navigateTo({ url: '/pages/news/newList', }) }else{ wx.redirectTo({ url: '/pages/login/login', }) } }, // 沃森新 // 主产品查询 getsignProduct(){ app.requestP({ url: '/daping/signProduct', method: 'post', }).then(res => { this.setData({ tabLeftTop:res.data.data }) }).catch(err => { app.showToptip(this,'err',err.data.msg) }) }, // 主产品使用、库存、总数统计 getSignProductUseAndStackState(){ app.requestP({ url: '/daping/signProductUseAndStackState', method: 'post', }).then(res => { this.setPie4Chart(res.data.data) }).catch(err => { app.showToptip(this,'err',err.data.msg) }) }, setCard(e){ var index = e.currentTarget.dataset.index; this.setData({ cardIndex:index, // tabLeftTop_remark:this.data.tabLfeftTop[index].remark }) }, //单一主产品不同地区使用情况 getSingleProductUseZoneStat(){ app.requestP({ url: '/daping/singleProductUseZoneState', method: 'post', }).then(res=>{ this.setCard_top_right_butChart(res.data.data); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setPie4Chart(list){ var that = this; var series = []; list.map((item,index)=>{ series.push(...that.pice4Chart("#23D9E9",index == 0 ? "20%" :index == 1 ? '50%':'80%',item.total,item.use_num,item.stack_num,item.name,'45%',)) }); that.pie4ChartConDom = that.selectComponent('#pie4ChartConDom'); that.pie4ChartConDom.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ title: { show:false }, grid:{ top:"0%", left:"0%", right:"0%", bottom:"0%", }, color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"], legend: { icon:"rect", top:10, right:0, itemWidth:20, itemHeight:20, textStyle:{ fontSize:16, color: "#D1E9F5", }, }, series:series, }); return chart; }) }, pice4Chart(color,pos,total,use_num,stack_num,name,top){ var that = this; var placeHolderStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格就换行 let text = v.value; return text; }, }, labelLine: { show: true, }, }, }; const pieValue1 = { value1:(stack_num+use_num) / total, value2: 1 - (stack_num+use_num) / total }; const pieValue2 = { value1:use_num / total, value2:1 - use_num / total }; const pieValue3 = { value1: stack_num / total, value2: 1 - stack_num / total }; return [{ type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 silent:false, radius: [20, 23], center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue1.value1, itemStyle:{ normal:{ color:'#0e74ff' } } }, { value: pieValue1.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], },{ type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [15, 18], silent:false, center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue2.value1, itemStyle:{ normal:{ color:'#64a6ff' } } }, { value: pieValue2.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], }, { type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 silent:false, radius: [10, 13], center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue3.value1, itemStyle:{ normal:{ color:'red' } } }, { value: pieValue3.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], }] }, setCard_top_right_butChart(list){ var that = this; that.selectComponent('#cardBarChartConDom').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); list = list.map(item=>{ return {orderNum:item.total,name:item.city || 'N/A'} }) var option = that.getCysOrderOption(list); option.series = [{ type:'bar', barMaxWidth: 15, barMinHeight: 10, data:list.map(item=>item.orderNum), label: { show: true, position: 'inside' }, itemStyle:{ normal:{color:'#333FFF'} } }] chart.setOption(option); return chart; }); }, // 图5 主产品在库、在途、结束统计 getSignProductState(){ app.requestP({ url: '/daping/signProductState', method: 'post', }).then(res=>{ this.setCard_two_left_one(res.data.data); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setCard_two_left_one(list){ var that = this; that.selectComponent('#product_two_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.legend = { data:['在库','在途','结束'], icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.color = ['#2D59E6','#FFAF36','#7FD1FF'] option.grid.top='20%'; option.grid.bottom='13%'; option.series = []; option.xAxis.data = []; const echartsData = [ {name:'在库',data:list.map(item=>item.stack)}, {name:'结束',data:list.map(item=>item.end)}, {name:'在途',data:list.map(item=>item.trans)} ] option.xAxis.data = list.map(item=>item.productName); echartsData.map((item,index)=>{ option.series.push({ name:item.name, type: "bar", stack: "Ad", emphasis: { focus: "series", }, data:item.data }) }) chart.setOption(option); return chart; }) }, product_two_left_two(list){ var that = this; that.selectComponent('#product_two_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticBarChart(); option.series = []; option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.grid.top='20%'; option.grid.bottom='13%'; list.map((item,index)=>{ option.series.push({ name:item.name, type: index != list.length -1 ? 'bar' :'line', // yAxisIndex: 1, data:item.data }); // if(index != list.length-1){ // delete option.series[index].yAxisIndex; // } }) chart.setOption(option); return chart; }) }, getStaticBarChart(){ return { xAxis: { type: "category", axisTick:{show:false,}, nameTextStyle: { color: "#77869E", fontSize: 8, }, axisLabel: { color: '#999999', fontSize: 8, }, axisLine: { onZero: false, lineStyle: { color: "#cccccc", }, }, data: ["Mon", "Tue", "Wed", "Thu",], }, yAxis: { type: "value", minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, color: ["#7661FF", "#5AC8FA", "#00B972"], grid: { left: "3%", top: "8%", right: "4%", bottom: "3%", containLabel: true, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 110], type: "bar", }, ], }; }, setCardPieTwo(list){ var that = this; that.selectComponent('#product_three_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); var itemStyle = { normal: { label: { show: true, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } option.series = [ { type: "pie", radius: "40%", center: ["50%", "25%"], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "40%", center: ["50%", "75%"], percentPrecision:0, minShowLabelAngle:30, itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, ] chart.setOption(option); return chart; }) }, getStaticPieChart(){ return { color: ["#964CC4", "#04A3CC", "#3B6AD5"], title: { show: false, }, grid: { top: "12%", left: "5%", right: "5%", bottom: "12%", }, series: [ // { // type: "pie", // radius: "50%", // center: ["50%", "25%"], // label: { // position: "inside", // formatter: "{d}%", // fontSize: 8, // color: '#fff', // }, // data: [ // { name: "在途", value: 50 }, // { name: "完成", value: 20 }, // { name: "待发运", value: 10 }, // ], // }, // { // type: "pie", // radius: "50%", // center: ["50%", "75%"], // percentPrecision:0, // minShowLabelAngle:30, // label: { // position: "inside", // formatter: "{d}%", // fontSize: 8, // color: '#fff', // }, // data: [ // { name: "在途", value: 50 }, // { name: "完成", value: 20 }, // { name: "待发运", value: 10 }, // ], // }, ] } }, setCardFivePie(){ var that = this; that.selectComponent('#product_five_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); option.color = ['rgb(91,132,206)','rgb(127,210,255)','rgb(44,87,226)']; var itemStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } option.series = [ { type: "pie", radius: "80%", center: ["50%", "30%"], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "80%", center: ["50%", "53%"], itemStyle, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "80%", itemStyle, center: ["50%", "77%"], data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, ] option.grid = { top: "12%", left: "10%", right: "0%", bottom: "12%", }, chart.setOption(option); return chart; }) }, setCard3dBar(){ var that = this; that.selectComponent('#product_three_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]] chart.setOption({ tooltip: {}, xAxis3D: { type: 'category', data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'] }, yAxis3D: { type: 'category', data: ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'] }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // projection: 'orthographic' }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [ { type: 'bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2]] }; }), shading: 'lambert', label: { fontSize: 16, borderWidth: 1 }, emphasis: { label: { fontSize: 20, color: '#900' }, itemStyle: { color: '#900' } } } ] }); return chart; }) }, setKLine(list){ var that = this; that.selectComponent('#product_four').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.color = ['#2D59E6','#FFAF36','#7FD1FF'] option.grid.top='20%'; option.grid.bottom='13%'; option.series = []; option.xAxis.data = []; const echartsData = []; list.map(item=>{ echartsData.push({ name:item.productInfo.name,data:item.maps.map(itemChild=>itemChild.total) }) }) option.xAxis.data = list.map(item=>item.productInfo.name); echartsData.map((item,index)=>{ option.series.push({ name:item.name, type: "bar", stack: "Ad", barMaxWidth: 25, // barMinHeight: 10, emphasis: { focus: "series", }, data:item.data }) }) chart.setOption(option); return chart; }) }, calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += +data[i - j][1]; } result.push(sum / dayCount); } return result; }, setCardDiagram(list){ var that = this; that.selectComponent('#product_four_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ backgroundColor: "transparent", tooltip: { formatter:function(params){ const {data:{name,value,unNormalTotal}} = params; return `${name}\n正常: ${value}\n预警: ${unNormalTotal}` } }, grid: {}, animationDurationUpdate: function (idx) { // 越往后的数据延迟越大 return idx * 100; }, color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"], animationEasingUpdate: "bounceIn", series: [ { type: "graph", layout: "force", force: { repulsion: 100, //越大斥力越大 gravity: 0.05, //越大节点越往中心靠拢 edgeLength: 20, //值越小则长度越长 }, roam: true, draggable: true, symbolSize: 1, itemStyle: { // opacity: 0.9, color: () => { return ( 'red', 'rgb(114,205,255)', 'rgb(10,92,170)' ); }, }, label: { normal: { show: true, fontSize: 10, }, }, data: list }, ], }) return chart; }) }, setCardXuTuOption(testNum){ var that = this; let icon = "path://M512.584639,219.893708c40.41173,0.258019,73.19961-32.274913,73.199609-72.557634,0-40.025725-32.78788-72.559681-73.199609-72.559681-40.473163,0-73.196538,32.533956-73.196538,72.559681,0,40.089206,32.723375,72.557634,73.196538,72.557634z,m73.330666,16.396499H439.129058c-55.266258,0-91.39098,48.28336-91.390981,94.203594v220.945238c0,42.847553,60.780905,42.847553,60.780905,0V347.144224h11.782872v555.564273c0,59.179548,82.417649,57.316077,84.337434,0V582.569248h15.696162V902.96754c3.391108,60.650871,84.340506,54.817796,84.340506-0.258019V347.144224h9.800631v204.234406c0,42.837314,62.696594,42.837314,62.696594,0V330.433391c0.126962-45.72979-36.116531-94.143184-91.257876-94.143184z"; for (var index = 0; index < 4; index++) { that.selectComponent('#product_five_right_one'+index).init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ backgroundColor: "transparent", tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, formatter: "{b0}: {c0}%", }, grid: { containLabel: true, height: "200px", width: "auto", left: "0", top: "center", }, xAxis: { max: 100, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, yAxis: { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { // margin: 10, fontSize: 20, color: "white", }, axisPointer: { label: { show: true, margin: 100, }, }, }, series: [ { type: "pictorialBar", symbolRepeat: "fixed", symbolMargin: "6!", label: { normal: { show: false, position: "right", offset: [3, 0], formatter: (param) => { return param.value.toFixed(0) + "%"; }, textStyle: { fontSize: 20, color: "white", }, }, }, symbolClip: true, symbolSize: [22, 30], symbolPosition: "start", symbolBoundingData: 100, data: [ { value: testNum.normalTotal, symbol: icon, itemStyle: { color: "#1DDBF9", }, }, ], z: 10, }, { type: "pictorialBar", itemStyle: { normal: { opacity: 0.2, }, }, animationDuration: 0, symbolRepeat: "fixed", symbolMargin: "6!", symbolSize: [22, 30], symbolBoundingData: 100, symbolPosition: "start", // symbolOffset: [ // 10, // 0 // ], data: [ { value: 100, symbol: icon, itemStyle: { color: "#1DDBF9", }, }, ], z: 5, }, ], }) return chart }) } }, // 主产品使用量、生产量统计 getSignProductUsedProduceState(){ var that = this; app.requestP({ url: '/daping/signProductUsedProduceState', method: 'post', }).then(res=>{ this.setData({ statisticSproductList:res.data.data.map(item=>{ return { product_name:item.product_name, data:[ {data:item.produce,index:Math.floor(Math.random()*1000),color:'#2D59E6'}, {data:item.end,index:Math.floor(Math.random()*1000),color:'#71CCFF'}, ] } }), },()=>{ var list = that.data.statisticSproductList; for (let index = 0; index < list.length; index++) { for (let lindex = 0; lindex < list[index].data.length; lindex++) { var color = list[index].data[lindex].color; var total = list[index].data[lindex].data; var itemIndex = list[index].data[lindex].index; that.setCardFivePie_rght(color,total,itemIndex); } } }) }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setCardFivePie_rght(color,total,itemIndex){ console.log(color,total,itemIndex); var that = this; var placeHolderStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格就换行 let text = v.value; return text; }, }, labelLine: { show: true, }, }, }; that.selectComponent('#product_five_right'+itemIndex).init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticPieChart(); option.series = []; option.color = [color]; option.series.push({ type: "pie", silent: 1, radius: ["65%", "80%"], label: { show: false, }, labelLine: 0, emphasis: { label: { show: true, fontSize: "40", fontWeight: "bold", }, }, data: [ { value:total, label: { show: true, fontSize: 8 * 1.5, color: '#485465', position: "center", formatter: "{c}", }, }, // { value: 55 ,}, ], }) chart.setOption(option); return chart; }) }, // 主产品不同年度 使用量统计 getSignPrroductYearUsedProduceState(){ app.requestP({ url: '/daping/signPrroductYearUsedProduceState', method: 'post', }).then(res=>{ var xAxisName = []; var seriesYear = []; var series = []; res.data.data.map((item,index)=>{ item.map((itemChild)=>{ if(xAxisName.indexOf(itemChild.productName) == -1){ xAxisName.push(itemChild.productName); } if(seriesYear.indexOf(itemChild.year) == -1){ seriesYear.push(itemChild.year); series.push({ name:itemChild.year, type: "line", stack: "Total", data:[itemChild.produce] }) }else{ series.map((serItem,i)=>{ if(serItem.name == itemChild.year){ series[i].data.push(itemChild.produce) } if(serItem.name != itemChild.year){ series[i].data.push(0); } }) } }) if(index == res.data.data.length-1){ this.setCardSixBar(series,xAxisName); this.setCardSixRightBar(series,xAxisName) } }) }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setCardSixBar(lineList,xAxisName){ var that = this; that.selectComponent('#product_six_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var colors = ['#F71404','#2D59E6','#71CCFF'] var option = that.getStaticBarChart(); option.color = ['#F71404','#2D59E6','#71CCFF']; option.grid.top = '26%' option.series = []; option.xAxis.data = xAxisName; option.title={ text: '单位：支', left: 'right', top:'15%', textStyle: { color: '#666', fontSize: 12, } }, option.legend = { data:lineList.map(item=>item.name+''), icon:"circle", top:"10%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } lineList.map((item,index)=>{ option.series.push({ name:item.name+'', type:'line', data:item.data, lineStyle:{ normal:{ color:colors[index] } }, itemStyle:{ normal:{ color:colors[index] } } }) }) chart.setOption(option); return chart }) }, setCardSixRightBar(lineList,xAxisName){ var that = this; that.selectComponent('#product_six_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.setCardLineTotal(); option.series = []; var colors = ['#F71404','#2D59E6','#71CCFF']; option.color = ['#F71404','#2D59E6','#71CCFF']; option.grid.top = '26%' option.xAxis.data = xAxisName; option.title={ text: '单位：支', left: 'right', top:'15%', textStyle: { color: '#666', fontSize: 12, } }, option.legend = { data:lineList.map(item=>item.name+''), icon:"circle", top:"10%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } lineList.map((item,index)=>{ option.series.push({ name:item.name+'', type:'line', data:item.data, areaStyle: {}, lineStyle:{ normal:{ color:colors[index] } }, itemStyle:{ normal:{ color:colors[index] } } }) }) chart.setOption(option) return chart; }) }, setCardLineTotal(){ return { xAxis: { type: "category", axisTick:{show:false,}, nameTextStyle: { color: "#77869E", fontSize: 8, }, axisLabel: { color: '#999999', fontSize: 8, }, axisLine: { onZero: false, lineStyle: { color: "#cccccc", }, }, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], }, yAxis: { type: "value", minInterval: 1, axisLabel:{color:"#000", fontSize:8,}, axisLine: { lineStyle: { color: "#cccccc", }, show: true, }, }, color: ["#7661FF", "#5AC8FA", "#00B972"], grid: { left: "3%", top: "5%", right: "4%", bottom: "3%", containLabel: true, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 110], type: "line", }, ] } }, setSevenCardPie(list){ var that = this; that.selectComponent('#product_seven_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var itemStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } var option = this.getStaticPieChart(); option.color = ['rgb(127,210,255)','rgb(44,88,288)','rgb(247,20,4)',]; var center = [["50%", "12%"],["50%", "35%"],["50%", "60%"],["50%", "85%"]]; option.series = []; list.map((item,index)=>{ option.series.push({ type: "pie", radius: ['40%','70%'], center: center[index], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: item.data, }) }) chart.setOption(option) return chart }) }, setCardSenvenPie(list){ var that = this; that.selectComponent('#product_seven_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); option.series = []; option.color = ['#FFAF36','#7A4AFE'] option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.series = [{ type: "pie", radius: "80%", center: ["50%", "50%"], label: { show:false, position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data:list, }] chart.setOption(option); return chart; }) }, // 主产品正常、预警统计 getSignPorductNormalWarningState(){ app.requestP({ url: '/daping/signPorductNormalWarningState', method: 'post', }).then(res=>{ this.setCardEightBar(res.data.data) }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setCardEightBar(list){ var that = this; that.selectComponent('#product_eight_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.series = []; option.grid.top='20%'; option.grid.bottom='13%'; option.xAxis.data = list.map(item=>item.product_name); const echartsData = [ {name:'正常',data:list.map(item=>item.normal)}, {name:'报警',data:list.map(item=>item.warning)}, ] option.color = ['#2D59E6','#E1291C'] option.legend = { data:echartsData.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } echartsData.map((item,index)=>{ option.series.push({ name: item.name, type: 'bar', emphasis: { focus: "series", }, data:item.data, }); }) chart.setOption(option); return chart; }); }, setCardEightRightBar(list){ var that = this; that.selectComponent('#product_eight_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.title = { show:false, text: '', top:'10%', textStyle: { color: '#999', fontSize: 6, } } option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.grid = { top:'20%', bottom:'15%', right:'15%', left:'15%' } option.color = ['#26E657','#FFAF36','#F71404']; option.yAxis = [ { type: 'value', // min: 0, // max: 250, interval: 50, minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, { type: 'value', min: 0, max:25, interval: 5, // minInterval: 1, axisLine: { lineStyle: { // color: "", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, } ]; option.series = []; list.map((item,index)=>{ option.series.push({ name: item.name, type: 'bar', stack: "Ad", emphasis: { focus: "series", }, data:item.data, }) }) chart.setOption(option); return chart; }) }, setCardNineBar(list){ var that = this; that.selectComponent('#product_nine_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getCysOrderOption(list); option.title = { text: '产品分类信息', top:'10%', textStyle: { color: '#999', fontSize: 6, } } option.grid = { top:"25%", left:"13%", right:"15%", bottom:"14%", } option.yAxis = [ { type: 'value', // min: 0, // max: 250, // interval: 50, minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, { type: 'value', min: 0, max:25, interval: 5, // minInterval: 1, axisLine: { lineStyle: { // color: "", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, } ]; chart.setOption(option); return chart; }) }, setCardNineRightBar(list){ var that = this; that.selectComponent('#product_nine_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.setCardLineTotal(); option.series = []; option.legend = { data:list.map(item=>item.name), icon:"circle", top:"5%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.yAxis = { type: "value", // minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, }, axisLabel: { color: "#999999", fontSize: 8, }, }, option.grid.top = '20%'; option.grid.right = '10%'; list.map(item=>{ option.series.push({ name:item.name, type: 'line', stack: 'Total', areaStyle: {}, showSymbol:false, emphasis: { focus: 'series' }, data: item.data, }) }) chart.setOption(option) return chart; }) }, // 地区产品统计 setCardLeftFive(list){ var that = this; that.selectComponent('#product_five').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { xAxis: { type: 'value', axisLabel: { show: false } }, grid:{ top:0, left: '3%', right: '4%', bottom: '3%', containLabel: true }, yAxis: { type: 'category', data: list.name.map(item=>item), axisTick: { show: false }, axisLabel:{color:"#999999", fontSize:9,}, axisLine: { lineStyle: { color: '#DEE3FF' } }, }, series:list.data.map(item=>{ return{ name:item.name,type:'bar',data:item.data } }) } chart.setOption(option); return chart; }) }, // 图15 主产品在不同地区库存、使用数据统计 /daping/signProductCityState getSignProductCityState(){ app.requestP({ url: '/daping/signProductCityState', method: 'post', }).then(res=>{ this.setData({ orderCardList:res.data.data, }) var sevenCardPieNum = []; res.data.data.map(item=>{ sevenCardPieNum.push({ data:[{name:item.city,value:item.stack},{name:item.city+'1',value:item.used}] }) }) this.setSevenCardPie(sevenCardPieNum); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, // 主产品最近一周每一天的使用量统计 getSignProductEveryWeekState(){ app.requestP({ url: '/daping/signProductEveryWeekState', method: 'post', }).then(res=>{ this.setKLine(res.data.data); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setEchartkline(rawData){ var that = this; const dates = rawData.map(function (item) { return item[0]; }); const data = rawData.map(function (item) { return [+item[1], +item[2], +item[5], +item[6]]; }); that.selectComponent('#kline').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { legend: { data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'], inactiveColor: '#777' }, tooltip: { trigger: 'axis', axisPointer: { animation: false, type: 'cross', lineStyle: { color: '#376df4', width: 2, opacity: 1 } } }, xAxis: { type: 'category', data: dates, axisLabel: { color: 'white', fontSize: 8, }, axisLine: { lineStyle: { color: '#8392A5' } } }, yAxis: { scale: true, axisLabel: { color: 'white', fontSize: 8, }, axisLine: { lineStyle: { color: '#8392A5' } }, splitLine: { show: false } }, grid: { bottom: "20", left: "1%", right: "5%", top:'5%', containLabel: true, }, dataZoom:{show:false,}, series: [ { type: 'candlestick', data: data, itemStyle: { color: '#FD1050', color0: '#0CF49B', borderColor: '#FD1050', borderColor0: '#0CF49B' } }, { type: 'line', data: this.calculateMA(5, data), smooth: true, showSymbol: false, lineStyle: { width: 1 } }, { type: 'line', data: this.calculateMA(10, data), smooth: true, showSymbol: false, lineStyle: { width: 1 } }, { type: 'line', data: this.calculateMA(20, data), smooth: true, showSymbol: false, lineStyle: { width: 1 } }, { type: 'line', data: this.calculateMA(30, data), smooth: true, showSymbol: false, lineStyle: { width: 1 } } ] } chart.setOption(option); return chart; }) }, calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += +data[i - j][1]; } result.push(sum / dayCount); } return result; } })