Odoo丨如何使用Odoo集成ECharts ？

"1.0" encoding="utf-8" ?><template> "quotation_map_page">  

"padding: 5px 10px 0 10px;">

"center" style="width:100%; height:58vh;background-color: #f7f9ff;display: flex;border-radius: 20px;">

"map" style="width: 40%; height: 80%;margin-top: 20px;">

"activeFlows" style="width: 10%; height: 70%;margin-left: 40px;margin-top: 40px;">

"innerbox"> "padding: 10px;background-color: white;border-radius: 6px;overflow-y: auto;margin-bottom: 0;"> "image-click"> "/xc_order/static/description/1.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/> "image-click"> "/xc_order/static/description/2.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/> "image-click"> "/xc_order/static/description/3.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/> "image-click"> "/xc_order/static/description/4.png" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/>

"activeContent" style="width: 40%; height: 80%;margin-left: 40px;margin-top: 20px;"> "activePhoto" src="/xc_order/static/description/4.png" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 8px;"/>

"text-align: center;color: #5784fd">活动现场照片

"footer" style="display: flex;align-items: center;border-radius: 20px;">

"left" style="width:27%; height:32vh;background-color: #f7f9ff;margin-top:10px; display: flex;">

"pie2" style="width: 50%; height:100%">

"current" style="width:36%; height:32vh;background-color: #f7f9ff;margin-top:10px;margin-left: 10px">

"bar" style="width: 100%; height:100%">

"right" style="width:36%; height:32vh;background-color: #f7f9ff;margin-top:10px;margin-left: 10px">

"line" style="width: 100%; height:100%">

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], // geoIndex: 1, // aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 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], // geoIndex: 1, // aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 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, //   symbolSize: function(val) { //     return val[2] / 10; //   }, symbol: "circle", symbolSize: 8, hoverSymbolSize: 10, tooltip: { formatter(value) { return value.data.name + "
" + "设备数：" + "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', this.changeImage.bind(this)) $(".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 key in geoCoordMap) { //     data.push({name: key, value: geoCoordMap[key]}); // } 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: '活动类型', // subtext: 'Fake Data', left: 'center' }, color:['#1bfff1', '#5a87fd', '#5afdaf','#ffae63'], tooltip: { trigger: 'item' }, legend: { // orient: 'vertical', top:'bottom' }, series: [ { // name: 'Access From', 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: '活动数量统计', // subtext: 'Fake Data' left: 'center' }, color:['#1bfff1', '#5a87fd'], tooltip: { trigger: 'axis' }, legend: { data: ['内部活动', '外部活动'], top:'bottom' }, toolbox: { show: false, feature: { // dataView: {show: true, readOnly: false}, // magicType: {show: true, type: ['line', 'bar']}, // restore: {show: true}, // saveAsImage: {show: true} } }, calculable: true, xAxis: [ { type: 'category', // prettier-ignore 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: '活动关注度', // subtext: 'Fake Data', left: 'center' }, // color:['#1bfff1', '#5a87fd'], 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;})