odoo.define('quotation.pre.sale', function (require) { var framework = require("web.framework"); var session = require("web.session"); var crash_manager = require("web.CrashManager"); var AbstractAction = require('web.AbstractAction') var core = require('web.core') var map = AbstractAction.extend({ template: 'quotation_map_page', start: function () { var self = this self.renderMap() self.renderPie() self.renderBar() self.renderLine() }, renderMap: function () { let self = this let option = { tooltip: { show: false }, geo: { map: "china", roam: false, zoom: 1.23, center: [105, 36], label: { normal: { show: false, fontSize: "10", color: "rgba(0,0,0,0.7)" }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: "#0d0059", borderColor: "#389dff", borderWidth: 1, shadowBlur: 5, shadowOffsetY: 8, shadowOffsetX: 0, shadowColor: "#01012a" }, emphasis: { areaColor: "#184cff", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } }, series: [ { type: "map", map: "china", roam: false, zoom: 1.23, center: [105, 36], showLegendSymbol: false, label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: "#fff" } } }, itemStyle: { normal: { areaColor: "#0d0059", borderColor: "#389dff", borderWidth: 0.5 }, emphasis: { areaColor: "#17008d", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } } ] }; var dataValue = this.dealWithData(); var data1 = dataValue.splice(0, 6); var options = { series: [ { type: "map", map: "china", roam: false, zoom: 1.23, center: [105, 36], showLegendSymbol: false, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: "#0d0059", borderColor: "#389dff", borderWidth: 0.5 }, emphasis: { areaColor: "#17008d", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } }, { name: "", type: "scatter", coordinateSystem: "geo", data: dataValue, symbol: "circle", symbolSize: 8, hoverSymbolSize: 10, tooltip: { formatter(value) { return value.data.name + "<br/>" + "设备数：" + "22"; }, show: true }, encode: { value: 2 }, label: { formatter: "{b}", position: "right", show: false }, itemStyle: { color: "#0efacc" }, emphasis: { label: { show: false } } }, { name: "人数", type: "effectScatter", coordinateSystem: "geo", data: data1, symbolSize: 15, tooltip: { show: true }, encode: { value: 2 }, showEffectOn: "render", rippleEffect: { brushType: "stroke", color: "#0efacc", period: 9, scale: 5 }, hoverAnimation: true, label: { formatter: "{b}", position: "bottom", show: true }, itemStyle: { color: "#0efacc", shadowBlur: 2, shadowColor: "#333" }, zlevel: 1 } ] }; $(document).ready(() => { this.myEchart = echarts.init(document.getElementById('map')); this.myEchart.setOption(options); this.myEchart.setOption(option); this.myEchart.on('click', self.selectCity.bind(self)) $(".image-click").on('click', self.changeImage.bind(self)); }); }, selectCity: function (ev){ console.log(ev.name) }, changeImage: function (ev){ let imageSrc = $($(ev.target)[0]).attr('src') $('#activePhoto').attr('src', imageSrc) }, dealWithData: function () { var data = [ { name: '北京', value: 1400 }, { name: '上海', value: 1000 }, { name: '深圳', value: 700 }, { name: '武汉', value: 999 }, { name: '成都', value: 400 }, ] var geoCoordMap = { 北京: [116.46, 39.92], 上海: [121.48, 31.22], 深圳: [114.07, 22.62], 武汉: [114.31, 30.52], 成都: [104.06, 30.67], }; var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }, renderPie: function () { let option2 = { title: { text: '活动类型', left: 'center' }, color:['#1bfff1', '#5a87fd', '#5afdaf','#ffae63'], tooltip: { trigger: 'item' }, legend: { top:'bottom' }, series: [ { type: 'pie', radius: '50%', data: [ {value: 30, name: '市场活动'}, {value: 40, name: '签约活动'}, {value: 15, name: '技术大会'}, {value: 15, name: '员工培训'}, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; $(document).ready(function () { this.myEchart2 = echarts.init(document.getElementById('pie2')); this.myEchart2.setOption(option2); }); }, renderBar: function () { let option = { title: { text: '活动数量统计', left: 'center' }, color:['#1bfff1', '#5a87fd'], tooltip: { trigger: 'axis' }, legend: { data: ['内部活动', '外部活动'], top:'bottom' }, toolbox: { show: false, feature: { } }, calculable: true, xAxis: [ { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '内部活动', type: 'bar', data: [ 200, 270, 320, 250, 380, 300, 200, 100, 50, 120, 170,200 ] }, { name: '外部活动', type: 'bar', data: [ 100, 170, 120, 250, 280, 200, 400, 200, 250, 220, 70,200 ] } ] }; $(document).ready(function () { this.myEchart = echarts.init(document.getElementById('bar')); this.myEchart.setOption(option); }); }, renderLine: function () { let option = { title: { text: '活动关注度', left: 'center' }, xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260,200, 250, 100, 230,50], type: 'line', symbolSize: 3, smooth:false, itemStyle: { normal : { color:'#5a87fd', lineStyle:{ color:'#1bfff1' } } } } ] }; $(document).ready(function () { this.myEchart = echarts.init(document.getElementById('line')); this.myEchart.setOption(option); }); } }) core.action_registry.add('quotation.map.page', map); return map;})
