|
|
@@ -0,0 +1,1094 @@
|
|
|
+<template>
|
|
|
+ <div style="padding:10px" @click.stop="void(0)">
|
|
|
+ <div class="" style="text-align: left;top:2%;width: 100%;letter-spacing: 5px;font-size: 18px;">
|
|
|
+ <span style="position: relative;">日期</span>
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 180px;"
|
|
|
+ v-model="daterangeTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ date-format="YYYY-MM-DD"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ :value-format="'YYYY-MM-DD'"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div style="height:790px;width:100%;background-color:rgb(237 237 237 / 23%);margin-top:10px;box-shadow: 2px 5px 8px 2px rgb(160 129 129 / 32%);border-radius: 5px;">
|
|
|
+ <div style="height: 60%;width: 98%;margin-left: 1%;margin-right: 1%;display: flex;position: relative;">
|
|
|
+ <div style="height: 100%;width: 70%;" ref="worldMap">
|
|
|
+ </div>
|
|
|
+ <div style="height: 100%;width: 30%;" ref="topright_echarts"></div>
|
|
|
+ <div style="position: absolute;width: 100%;left:34%;top: 1%;height: 42px;display: flex;color: #000;font-size: 20px;text-align: center;font-weight: bold;">
|
|
|
+ <span>全球营收</span><span style="font-size: 14px;line-height: 30px;color: #666;margin-left: 30px;">国家数量：{{ datalist.country }}</span><span style="color: #666;font-size: 14px;line-height: 30px;margin-left: 10px;">订单数：{{ datalist.order }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute;width: 100%;left:12%;bottom: 25px;height: 42px;display: flex;color: #1ebe93;">
|
|
|
+ <div style="border-right: 1px solid #d6d6d6;margin-left: 25px;padding-right: 25px;"><div>营收</div><div style="display: flex;font-weight: bold; font-size: 28px;color:#1ebe93">{{ datalist.rev }}<div style="font-size:14px;line-height: 38px;"> 万</div></div></div>
|
|
|
+ <div style="border-right: 1px solid #d6d6d6;margin-left: 25px;padding-right: 25px;"><div>成本</div><div style="display: flex;font-weight: bold;font-size: 28px;color:#d21c16">{{ datalist.cogs }}<div style="font-size:14px;line-height: 38px;"> 万</div></div></div>
|
|
|
+ <div style="border-right: 1px solid #d6d6d6;margin-left: 25px;padding-right: 25px;"><div>毛利润(GP)</div><div style="display: flex;font-weight: bold;font-size: 28px;color:#e77e0c">{{ datalist.gp }}<div style="font-size:14px;line-height: 38px;"> 万</div></div></div>
|
|
|
+ <div style="margin-left: 50px;"><div>毛利率</div><div style="display: flex;font-weight: bold;font-size: 28px;color:#e87f0e">{{ datalist.gpm }}<div style="font-size:14px;line-height: 38px;"> %</div></div></div>
|
|
|
+ <div style="margin-left: 150px;"><div>资产</div><div style="display: flex;font-weight: bold;font-size: 28px;color:#3e9dff">{{ datalist.assets }}<div style="font-size:14px;line-height: 38px;"> 万</div></div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 35%;width: 98%;margin-top: 2%;margin-left: 1%;margin-right: 1%;display: flex;">
|
|
|
+ <div style="height: 100%;width: 24%;margin-right: 1%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>营收组成</div>
|
|
|
+ <div style="height: 90%;width: 100%;" ref="bottomleft_echarts"></div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 100%;width: 24%;margin-right: 1%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>成本组成</div>
|
|
|
+ <div style="height: 90%;width: 100%;" ref="bottommiddle_echarts"></div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 100%;width: 50%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;">
|
|
|
+ <div class="line"></div><span>趋势分析</span>
|
|
|
+ <div style="float:right">
|
|
|
+ <span v-for="item in typeList" :class="tradeType==item.name?'spanBtn active':'spanBtn'" @click="switchType(item)">{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 90%;width: 100%;" ref="bottomright_echarts"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { ref,onMounted,watch } from 'vue';
|
|
|
+ import {d_global} from "@/api/house/api";
|
|
|
+ import { ElDatePicker,ElMessage } from 'element-plus';
|
|
|
+ import 'element-plus/dist/index.css'; // 确保导入样式文件
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import world from '@/utils/echarts_world.json';
|
|
|
+ export default {
|
|
|
+ props:{
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ setup(props,{emit}){
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
|
+ let datalist=ref([]);
|
|
|
+ let detailDataList=ref([]);
|
|
|
+ const daterangeTime=ref("");
|
|
|
+ daterangeTime.value = new Date().Format('yyyy-MM-dd')
|
|
|
+ const worldMap=ref(null);
|
|
|
+ const topright_echarts=ref(null);
|
|
|
+ const bottomleft_echarts=ref(null);
|
|
|
+ const bottommiddle_echarts=ref(null);
|
|
|
+ const bottomright_echarts=ref(null);
|
|
|
+ const loading=ref(true);
|
|
|
+ function impquery(){
|
|
|
+ detailDataList.value=[];
|
|
|
+ datalist.value=[];
|
|
|
+ const msg = ElMessage({
|
|
|
+ message:"正在加载数据",
|
|
|
+ type:"info",
|
|
|
+ duration:0, //一直显示
|
|
|
+ });
|
|
|
+ loading.value = true;
|
|
|
+ d_global({"date":daterangeTime.value}).then((res)=>{
|
|
|
+ loading.value = false;
|
|
|
+ msg.close();
|
|
|
+ if(res.code!=200){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ datalist.value = res.data;
|
|
|
+ showWorldMap(res.data);
|
|
|
+ showTopRight(res.data);
|
|
|
+ showBottomLeft(res.data);
|
|
|
+ showBottomMiddle(res.data);
|
|
|
+ showBottomRight(res.data);
|
|
|
+ }).catch(res=>{
|
|
|
+ ElMessage({
|
|
|
+ message:"数据获取失败！",
|
|
|
+ type:"error",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function showWorldMap(data){
|
|
|
+ echarts.registerMap('world',world);
|
|
|
+ var myChart = echarts.init(worldMap.value);
|
|
|
+ let colorList = ['#4ab2e5', '#4fb6d2', '#52b9c7', '#5abead', '#f34e2b', '#f56321', '#f56f1c', '#f58414'
|
|
|
+ , '#f58f0e'
|
|
|
+ , '#f5a305'
|
|
|
+ , '#e7ab0b'
|
|
|
+ , '#dfae10'
|
|
|
+ , '#d5b314'
|
|
|
+ , '#c1bb1f'
|
|
|
+ , '#b9be23'
|
|
|
+ , '#a6c62c'
|
|
|
+ , '#96cc34']
|
|
|
+ let planePath = 'path://M1705.06,1318.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.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
|
|
|
+ let geoCoordMap = {
|
|
|
+ "济南": [116.98, 36.67],
|
|
|
+ "北京": [116.404184, 39.914578],
|
|
|
+ "尼日利亚": [-4.388361, 11.186148],
|
|
|
+ "香港": [114.195466, 22.282751],
|
|
|
+ "加纳库马西": [-4.62829, 7.72415],
|
|
|
+ "德国汉堡": [10.01959, 54.38474],
|
|
|
+ "哈萨克斯坦阿拉木图": [45.326912, 41.101891],
|
|
|
+ "俄罗斯伊尔库茨克": [89.116876, 67.757906],
|
|
|
+ "埃及达米埃塔": [31.815593, 31.418032],
|
|
|
+ "西班牙巴塞罗纳": [2.175129, 41.385064],
|
|
|
+ "柬埔寨金边": [104.88659, 11.545469],
|
|
|
+ "意大利米兰": [9.189948, 45.46623],
|
|
|
+ "乌拉圭蒙得维的亚": [-56.162231, -34.901113],
|
|
|
+ "莫桑比克马普托": [32.608571, -25.893473],
|
|
|
+ "阿尔及利亚阿尔及尔": [3.054275, 36.753027],
|
|
|
+ "阿联酋迪拜": [55.269441, 25.204514],
|
|
|
+ "匈牙利布达佩斯": [17.108519, 48.179162],
|
|
|
+ "澳大利亚悉尼": [150.993137, -33.675509],
|
|
|
+ "澳大利亚墨尔本": [144.999416, -37.781726],
|
|
|
+ "墨西哥": [-99.094092, 19.365711],
|
|
|
+ "加拿大温哥华": [-123.023921, 49.311753],
|
|
|
+ "阿富汗": [69.11, 34.28],
|
|
|
+ "阿尔巴尼亚": [19.49, 41.18],
|
|
|
+ "阿尔及利亚": [3.08, 36.42],
|
|
|
+ "美属萨摩亚": [-170.43, -14.16],
|
|
|
+ "安道尔": [1.32, 42.31],
|
|
|
+ "安哥拉": [13.15, -8.50],
|
|
|
+ "安提瓜和巴布达": [-61.48, 17.20],
|
|
|
+ "阿根廷": [-60.00, -36.30],
|
|
|
+ "亚美尼亚": [44.31, 40.10],
|
|
|
+ "阿鲁巴": [-70.02, 12.32],
|
|
|
+ "澳大利亚": [149.08, -35.15],
|
|
|
+ "奥地利": [16.22, 48.12],
|
|
|
+ "阿塞拜疆": [49.56, 40.29],
|
|
|
+ "巴哈马": [-77.20, 25.05],
|
|
|
+ "巴林": [50.30, 26.10],
|
|
|
+ "孟加拉国": [90.26, 23.43],
|
|
|
+ "巴巴多斯": [-59.30, 13.05],
|
|
|
+ "白俄罗斯": [27.30, 53.52],
|
|
|
+ "比利时": [4.21, 50.51],
|
|
|
+ "伯利兹": [-88.30, 17.18],
|
|
|
+ "贝宁": [2.42, 6.23],
|
|
|
+ "不丹": [89.45, 27.31],
|
|
|
+ "玻利维亚": [-68.10, -16.20],
|
|
|
+ "波斯尼亚和黑塞哥维那": [18.26, 43.52],
|
|
|
+ "博茨瓦纳": [25.57, -24.45],
|
|
|
+ "巴西": [-47.55, -15.47],
|
|
|
+ "英属维尔京群岛": [-64.37, 18.27],
|
|
|
+ "文莱": [115.00, 4.52],
|
|
|
+ "保加利亚": [23.20, 42.45],
|
|
|
+ "布基纳法索": [-1.30, 12.15],
|
|
|
+ "布隆迪": [29.18, -3.16],
|
|
|
+ "柬埔寨": [104.55, 11.33],
|
|
|
+ "喀麦隆": [11.35, 3.50],
|
|
|
+ "加拿大": [-75.42, 45.27],
|
|
|
+ "佛得角": [-23.34, 15.02],
|
|
|
+ "开曼群岛": [-81.24, 19.20],
|
|
|
+ "中非共和国": [18.35, 4.23],
|
|
|
+ "乍得": [14.59, 12.10],
|
|
|
+ "智利": [-70.40, -33.24],
|
|
|
+ "中国": [116.20, 39.55],
|
|
|
+ "哥伦比亚": [-74.00, 4.34],
|
|
|
+ "科摩罗": [43.16, -11.40],
|
|
|
+ "刚果": [15.12, -4.09],
|
|
|
+ "哥斯达黎加": [-84.02, 9.55],
|
|
|
+ "科特迪瓦": [-5.17, 6.49],
|
|
|
+ "克罗地亚": [15.58, 45.50],
|
|
|
+ "古巴": [-82.22, 23.08],
|
|
|
+ "塞浦路斯": [33.25, 35.10],
|
|
|
+ "捷克共和国": [14.22, 50.05],
|
|
|
+ "朝鲜": [125.30, 39.09],
|
|
|
+ "刚果(扎伊尔)": [15.15, -4.20],
|
|
|
+ "丹麦": [12.34, 55.41],
|
|
|
+ "吉布提": [42.20, 11.08],
|
|
|
+ "多米尼加": [-61.24, 15.20],
|
|
|
+ "多米尼加共和国": [-69.59, 18.30],
|
|
|
+ "东帝汶": [125.34, -8.29],
|
|
|
+ "厄瓜多尔": [-78.35, -0.15],
|
|
|
+ "埃及": [31.14, 30.01],
|
|
|
+ "萨尔瓦多": [-89.10, 13.40],
|
|
|
+ "赤道几内亚": [8.50, 3.45],
|
|
|
+ "厄立特里亚": [38.55, 15.19],
|
|
|
+ "爱沙尼亚": [24.48, 59.22],
|
|
|
+ "埃塞俄比亚": [38.42, 9.02],
|
|
|
+ "福克兰群岛(马尔维纳斯群岛)": [-59.51, -51.40],
|
|
|
+ "法罗群岛": [-6.56, 62.05],
|
|
|
+ "斐济": [178.30, -18.06],
|
|
|
+ "芬兰": [25.03, 60.15],
|
|
|
+ "法国": [2.20, 48.50],
|
|
|
+ "法属圭亚那": [-52.18, 5.05],
|
|
|
+ "法属波利尼西亚": [-149.34, -17.32],
|
|
|
+ "加蓬": [9.26, 0.25],
|
|
|
+ "冈比亚": [-16.40, 13.28],
|
|
|
+ "格鲁吉亚": [44.50, 41.43],
|
|
|
+ "德国": [13.25, 52.30],
|
|
|
+ "加纳": [-0.06, 5.35],
|
|
|
+ "希腊": [23.46, 37.58],
|
|
|
+ "格陵兰": [-51.35, 64.10],
|
|
|
+ "瓜德罗普岛": [-61.44, 16.00],
|
|
|
+ "危地马拉": [-90.22, 14.40],
|
|
|
+ "根西岛": [-2.33, 49.26],
|
|
|
+ "几内亚": [-13.49, 9.29],
|
|
|
+ "几内亚比绍": [-15.45, 11.45],
|
|
|
+ "圭亚那": [-58.12, 6.50],
|
|
|
+ "海地": [-72.20, 18.40],
|
|
|
+ "赫德岛和麦当劳群岛": [74.00, -53.00],
|
|
|
+ "洪都拉斯": [-87.14, 14.05],
|
|
|
+ "匈牙利": [19.05, 47.29],
|
|
|
+ "冰岛": [-21.57, 64.10],
|
|
|
+ "印度": [77.13, 28.37],
|
|
|
+ "伊朗": [51.30, 35.44],
|
|
|
+ "伊拉克": [44.30, 33.20],
|
|
|
+ "爱尔兰": [-6.15, 53.21],
|
|
|
+ "以色列": [35.12, 31.47],
|
|
|
+ "意大利": [12.29, 41.54],
|
|
|
+ "牙买加": [-76.50, 18.00],
|
|
|
+ "约旦": [35.52, 31.57],
|
|
|
+ "哈萨克斯坦": [71.30, 51.10],
|
|
|
+ "肯尼亚": [36.48, -1.17],
|
|
|
+ "基里巴斯": [173.00, 1.30],
|
|
|
+ "科威特": [48.00, 29.30],
|
|
|
+ "吉尔吉斯斯坦": [74.46, 42.54],
|
|
|
+ "老挝": [102.36, 17.58],
|
|
|
+ "拉脱维亚": [24.08, 56.53],
|
|
|
+ "黎巴嫩": [35.31, 33.53],
|
|
|
+ "莱索托": [27.30, -29.18],
|
|
|
+ "利比里亚": [-10.47, 6.18],
|
|
|
+ "阿拉伯利比亚民众国": [13.07, 32.49],
|
|
|
+ "列支敦士登": [9.31, 47.08],
|
|
|
+ "立陶宛": [25.19, 54.38],
|
|
|
+ "卢森堡": [6.09, 49.37],
|
|
|
+ "马达加斯加": [47.31, -18.55],
|
|
|
+ "马拉维": [33.48, -14.00],
|
|
|
+ "马来西亚": [101.41, 3.09],
|
|
|
+ "马尔代夫": [73.28, 4.00],
|
|
|
+ "马里": [-7.55, 12.34],
|
|
|
+ "马耳他": [14.31, 35.54],
|
|
|
+ "马提尼克岛": [-61.02, 14.36],
|
|
|
+ "毛里塔尼亚": [57.30, -20.10],
|
|
|
+ "马约特岛": [45.14, -12.48],
|
|
|
+ "墨西哥": [-99.10, 19.20],
|
|
|
+ "密克罗尼西亚(联邦) ": [158.09, 6.55],
|
|
|
+ "摩尔多瓦共和国": [28.50, 47.02],
|
|
|
+ "莫桑比克": [32.32, -25.58],
|
|
|
+ "缅甸": [96.20, 16.45],
|
|
|
+ "纳米比亚": [17.04, -22.35],
|
|
|
+ "尼泊尔": [85.20, 27.45],
|
|
|
+ "荷兰": [4.54, 52.23],
|
|
|
+ "荷属安的列斯": [-69.00, 12.05],
|
|
|
+ "新喀里多尼亚": [166.30, -22.17],
|
|
|
+ "新西兰": [174.46, -41.19],
|
|
|
+ "尼加拉瓜": [-86.20, 12.06],
|
|
|
+ "尼日尔": [2.06, 13.27],
|
|
|
+ "尼日利亚": [7.32, 9.05],
|
|
|
+ "诺福克岛": [168.43, -45.20],
|
|
|
+ "北马里亚纳群岛": [145.45, 15.12],
|
|
|
+ "挪威": [10.45, 59.55],
|
|
|
+ "阿曼": [58.36, 23.37],
|
|
|
+ "巴基斯坦": [73.10, 33.40],
|
|
|
+ "帕劳": [134.28, 7.20],
|
|
|
+ "巴拿马": [-79.25, 9.00],
|
|
|
+ "巴布亚新几内亚": [147.08, -9.24],
|
|
|
+ "巴拉圭": [-57.30, -25.10],
|
|
|
+ "秘鲁": [-77.00, -12.00],
|
|
|
+ "菲律宾": [121.03, 14.40],
|
|
|
+ "波兰": [21.00, 52.13],
|
|
|
+ "葡萄牙": [-9.10, 38.42],
|
|
|
+ "波多黎各": [-66.07, 18.28],
|
|
|
+ "卡塔尔": [51.35, 25.15],
|
|
|
+ "韩国": [126.58, 37.31],
|
|
|
+ "罗马尼亚": [26.10, 44.27],
|
|
|
+ "俄罗斯": [37.35, 55.45],
|
|
|
+ "卢旺达": [30.04, -1.59],
|
|
|
+ "圣基茨和尼维斯": [-62.43, 17.17],
|
|
|
+ "圣卢西亚": [-60.58, 14.02],
|
|
|
+ "圣皮埃尔和密克隆": [-56.12, 46.46],
|
|
|
+ "圣文森特和格林纳丁斯": [-61.10, 13.10],
|
|
|
+ "萨摩亚": [-171.50, -13.50],
|
|
|
+ "圣马力诺": [12.30, 43.55],
|
|
|
+ "圣多美和普林西比": [6.39, 0.10],
|
|
|
+ "沙特阿拉伯": [46.42, 24.41],
|
|
|
+ "塞内加尔": [-17.29, 14.34],
|
|
|
+ "塞拉利昂": [-13.17, 8.30],
|
|
|
+ "斯洛伐克": [17.07, 48.10],
|
|
|
+ "斯洛文尼亚": [14.33, 46.04],
|
|
|
+ "所罗门群岛": [159.57, -9.27],
|
|
|
+ "索马里": [45.25, 2.02],
|
|
|
+ "比勒陀利亚": [28.12, -25.44],
|
|
|
+ "西班牙": [-3.45, 40.25],
|
|
|
+ "苏丹": [32.35, 15.31],
|
|
|
+ "苏里南": [-55.10, 5.50],
|
|
|
+ "斯威士兰": [31.06, -26.18],
|
|
|
+ "瑞典": [18.03, 59.20],
|
|
|
+ "瑞士": [7.28, 46.57],
|
|
|
+ "阿拉伯叙利亚共和国": [36.18, 33.30],
|
|
|
+ "塔吉克斯坦": [68.48, 38.33],
|
|
|
+ "泰国": [100.35, 13.45],
|
|
|
+ "马其顿": [21.26, 42.01],
|
|
|
+ "多哥": [1.20, 6.09],
|
|
|
+ "汤加": [-174.00, -21.10],
|
|
|
+ "突尼斯": [10.11, 36.50],
|
|
|
+ "土耳其": [32.54, 39.57],
|
|
|
+ "土库曼斯坦": [57.50, 38.00],
|
|
|
+ "图瓦卢": [179.13, -8.31],
|
|
|
+ "乌干达": [32.30, 0.20],
|
|
|
+ "乌克兰": [30.28, 50.30],
|
|
|
+ "阿联酋": [54.22, 24.28],
|
|
|
+ "英国": [-0.05, 51.36],
|
|
|
+ "坦桑尼亚": [35.45, -6.08],
|
|
|
+ "美国": [-77.02, 39.91],
|
|
|
+ "美属维尔京群岛": [-64.56, 18.21],
|
|
|
+ "乌拉圭": [-56.11, -34.50],
|
|
|
+ "乌兹别克斯坦": [69.10, 41.20],
|
|
|
+ "瓦努阿图": [168.18, -17.45],
|
|
|
+ "委内瑞拉": [-66.55, 10.30],
|
|
|
+ "越南": [105.55, 21.05],
|
|
|
+ "南斯拉夫": [20.37, 44.50],
|
|
|
+ "赞比亚": [28.16, -15.28],
|
|
|
+ "津巴布韦": [31.02, -17.43],
|
|
|
+ "日本": [35.73, 139.71]
|
|
|
+ };
|
|
|
+ let BJData = [];
|
|
|
+ for (let index = 0; index < data.orderList.length; index++) {
|
|
|
+ const element = data.orderList[index];
|
|
|
+ BJData.push([{"name":element.country,"value":element.num,"gp":element.gp,"rev":element.rev}]);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ let series = [];
|
|
|
+ [
|
|
|
+ ["", BJData]
|
|
|
+ ].forEach(function (item, i) {
|
|
|
+ series.push({
|
|
|
+ type: 'map',
|
|
|
+ roam: false,
|
|
|
+ label: {
|
|
|
+ show: !1,
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#1DE9B6'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'rgb(183,185,14)'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgb(147, 235, 248)',
|
|
|
+ borderWidth: 0.1,
|
|
|
+ areaColor: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.8,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(210,246,253)' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(154,210,244)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ globalCoord: true // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ areaColor: 'rgb(46,229,206)',
|
|
|
+ // shadowColor: 'rgb(12,25,50)',
|
|
|
+ borderWidth: 0.1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zoom: 1.05,
|
|
|
+ // roam: false,
|
|
|
+ map: 'world' //使用
|
|
|
+ // data: this.difficultData //热力图数据 不同区域 不同的底色
|
|
|
+ }, {
|
|
|
+ type: "effectScatter",
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ zlevel: 2,
|
|
|
+ tooltip:{
|
|
|
+ triggerOn: 'mousemove',
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ //console.log(params)
|
|
|
+ return "<div style='width:150px;background:#666666;color:#fff;border-radius:5px;padding:3px'><div style='background:#00000070;width:100%;border-radius:5px 5px 0 0;margin-top:-3px;margin-left:-3px;width:104%'> "+params.name+"</div><div>订单："+params.value[2]+"</div><div>营收："+params.value[4]+"</div><div>利润："+params.value[3]+"</div><div>";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "right", //显示位置
|
|
|
+ offset: [5, 0], //偏移设置
|
|
|
+ formatter: "{b}", //圆环显示文字
|
|
|
+ textStyle: {
|
|
|
+ color: "#000"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ color: function (item, index) {
|
|
|
+ //let color = colorList[item.dataIndex] || "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
|
|
|
+ return "red"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: item[1].map(function (dataItem) {
|
|
|
+ return {
|
|
|
+ name: dataItem[0].name,
|
|
|
+ value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value,dataItem[0].rev,dataItem[0].gp])
|
|
|
+ };
|
|
|
+ })
|
|
|
+ },
|
|
|
+ );
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ backgroundColor:'#fff',
|
|
|
+ tooltip: {
|
|
|
+ show:true,
|
|
|
+ trigger: 'item', // 触发类型，默认数据项触发，会自动提示对应的数据信息
|
|
|
+ formatter: function (params) {
|
|
|
+ //if(params.seriesType!="effectScatter") return false;
|
|
|
+ //console.log(params)
|
|
|
+ // 自定义tooltip内容格式
|
|
|
+ //return params.name + ': ' + params.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ right: '8%',
|
|
|
+ // top:'5%'
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: 'world',
|
|
|
+ aspectScale: 0.75, //长宽比
|
|
|
+ zoom: 1.05,
|
|
|
+ tooltip:{
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ //if(params.seriesType!="effectScatter") return false;
|
|
|
+ // return params.name+"---ssssss";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scaleLimit: {
|
|
|
+ min: 1,
|
|
|
+ max: 5,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: !1
|
|
|
+ },
|
|
|
+ roam: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.8,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#09132c' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#274d68' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ globalCoord: true // 缺省为 false
|
|
|
+ },
|
|
|
+ shadowColor: 'rgb(58,115,192)',
|
|
|
+ shadowOffsetX: 10,
|
|
|
+ shadowOffsetY: 11
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#2AB8FF',
|
|
|
+ borderWidth: 0,
|
|
|
+ color: '#fff',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ zlevel: 0,
|
|
|
+ series: [...series],
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ function showTopRight(data){
|
|
|
+ let gpList=data.gpList;
|
|
|
+ let gpmList=data.gpmList;
|
|
|
+ let xdata=[];
|
|
|
+ let y1=[];
|
|
|
+ let y2=[];
|
|
|
+ for (let index = 0; index < gpList.length; index++) {
|
|
|
+ const element = gpList[index];
|
|
|
+ xdata.push(element.type);
|
|
|
+ y1.push(element.value*-1)
|
|
|
+ y2.push(gpmList[index].value);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ left: 'center',
|
|
|
+ data: ['', '利润排行', '利润率排行']
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: (params) => {
|
|
|
+ return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
|
|
|
+ box-shadow: 0 4px 9px 0 rgba($color: #000000, $alpha: 0.1);
|
|
|
+ padding:0 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;" class="tooltip-area"><p>${params.marker}${params.name}</p><h4 style="margin-left: 30px;">${Math.abs(params.value)}</h4></div>`
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: [{
|
|
|
+ gridIndex: 0,
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ lineStyle: { color:"#666666", width:0, type:"solid" }
|
|
|
+ },
|
|
|
+ data: xdata
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 1,
|
|
|
+ show: true,
|
|
|
+ axisLine:{
|
|
|
+ lineStyle: { color:"#2F5FFE70", width:2, type:"solid" }
|
|
|
+ },
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 2,
|
|
|
+ show: false,
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis: [{
|
|
|
+ gridIndex: 0,
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitNumber: 1,
|
|
|
+ name: '',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameRotate: 360
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 1,
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitNumber: 1,
|
|
|
+ name: '利润排行',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameRotate: 360
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gridIndex: 2,
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitNumber: 1,
|
|
|
+ name: '利润率排行',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameRotate: 360
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: [{
|
|
|
+ top: '5%',
|
|
|
+ left: '17%',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ top: '5%',
|
|
|
+ left: '32%',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ top: '5%',
|
|
|
+ left: '47%',
|
|
|
+ width: '15%'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ type: 'line',
|
|
|
+ data: [],
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ data: y1,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 5,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2F5FFE20',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#2F5FFE50'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(52,99,254,0.52)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255,255,255,0.3)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ data: y2,
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 5,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2F5FFE20',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#2F5FFE50'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(52,99,254,0.52)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255,255,255,0.3)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let mychat = echarts.init(topright_echarts.value)
|
|
|
+ mychat.setOption(option);
|
|
|
+ }
|
|
|
+ function showBottomLeft(data){
|
|
|
+ let total=0;
|
|
|
+ for (let index = 0; index < data.revList.length; index++) {
|
|
|
+ const element = data.revList[index];
|
|
|
+ total = total+element.value;
|
|
|
+ data.revList[index]["name"] = element.type;
|
|
|
+ }
|
|
|
+ let data1 = {
|
|
|
+ total: {
|
|
|
+ title: '总计',
|
|
|
+ figure: total
|
|
|
+ },
|
|
|
+ data: data.revList
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "#fff",
|
|
|
+ color: ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ padding: 0,
|
|
|
+ borderWidth: 0,
|
|
|
+ formatter: (params) => {
|
|
|
+ return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
|
|
|
+ box-shadow: 0 4px 9px 0 rgba($color: #000000, $alpha: 0.1);
|
|
|
+ padding:0 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;" class="tooltip-area"><p>${params.marker}${params.name}</p><h4 style="margin-left: 30px;">${params.percent}%</h4></div>`
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: data1.total.title,
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(28, 31, 35, 0.80)',
|
|
|
+ fontSize: '12px',
|
|
|
+ fontWeight: 'normal'
|
|
|
+ },
|
|
|
+ subtext: data1.total.figure,
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#1C1F23',
|
|
|
+ fontSize: '20px',
|
|
|
+ fontWeight: '600'
|
|
|
+ },
|
|
|
+ top: "center",
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '45%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ formatter: `{a|{b}}: {b|{d}%}`,
|
|
|
+ alignTo: 'labelLine',
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: 'rgba(28, 31, 35, 0.80)',
|
|
|
+ fontSize: '12px',
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ color: '#1C1F23',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontWeight: '600'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ cap: 'round'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data1.data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var mychat = echarts.init(bottomleft_echarts.value);
|
|
|
+ mychat.setOption(option)
|
|
|
+ }
|
|
|
+ function showBottomMiddle(data){
|
|
|
+ let echartData =[];
|
|
|
+ for (let index = 0; index < data.cogsList.length; index++) {
|
|
|
+ const element = data.cogsList[index];
|
|
|
+ echartData.push({"name":element.type,"value":element.value});
|
|
|
+ }
|
|
|
+ let bgColor = '#fff';
|
|
|
+ let title = '总量';
|
|
|
+ let color = ['#2A8BFD', '#BAFF7F', '#00FAC1', '#00CAFF', '#FDE056', '#4ED33C', '#FF8A26', '#FF5252', '#9689FF', '#CB00FF']
|
|
|
+
|
|
|
+
|
|
|
+ let formatNumber = function (num) {
|
|
|
+ let reg = /(?=(\B)(\d{3})+$)/g;
|
|
|
+ return num.toString().replace(reg, ',');
|
|
|
+ }
|
|
|
+ let total = echartData.reduce((a, b) => {
|
|
|
+ return a + b.value * 1
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "#fff",
|
|
|
+ color: color,
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: 25,
|
|
|
+ top: 10,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
|
|
|
+ top: 'center',
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#fff',
|
|
|
+ padding: [10, 0]
|
|
|
+ },
|
|
|
+ val: {
|
|
|
+ fontSize: 32,
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ color: '#fff',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ roseType: 'radius',
|
|
|
+ radius: ['20%', '50%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: echartData,
|
|
|
+ hoverAnimation: false,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ length: 3,
|
|
|
+ length2: 5,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: params => {
|
|
|
+ return (
|
|
|
+ '{icon|●}{name|' + params.name + '}\n{value|' +
|
|
|
+ formatNumber(params.value) + '}'
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ rich: {
|
|
|
+ icon: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: 'inherit'
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 0, 0, 10],
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ padding: [10, 0, 0, 20],
|
|
|
+ color: 'inherit'
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ let mychat = echarts.init(bottommiddle_echarts.value);
|
|
|
+ mychat.setOption(option);
|
|
|
+ }
|
|
|
+ const tradeType=ref('revenue');
|
|
|
+ const typeNames=ref({"revenue":"营收","cost":"成本","profitRate":"利润率","profit":"利润"});
|
|
|
+ const typeList = ref([{"name":"revenue","text":"营收"},{"name":"cost","text":"成本"},{"name":"profitRate","text":"利润率"},{"name":"profit","text":"利润"}])
|
|
|
+ function showBottomRight(data){
|
|
|
+ let dates = [];
|
|
|
+ let values=[];
|
|
|
+
|
|
|
+ for (let index = 0; index < data.tradeList.length; index++) {
|
|
|
+ const element = data.tradeList[index];
|
|
|
+ data.tradeList[index]["name"] = element.type;
|
|
|
+ dates.push(element.month)
|
|
|
+ values.push(element[tradeType.value]);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: 20,
|
|
|
+ top: 10,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ bottom: 0,
|
|
|
+ itemWidth: 20,
|
|
|
+ itemHeight: 10,
|
|
|
+ data: [typeNames.value[tradeType.value]],
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: dates,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 320,//坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ boundaryGap: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { //坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#3E3E3E',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: false
|
|
|
+ // lineStyle:{
|
|
|
+ // color:'#dadde4',
|
|
|
+ // type:"dashed"
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: typeNames.value[tradeType.value],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none', //'circle',
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2F5FFE',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#2F5FFE50'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(52,99,254,0.52)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255,255,255,0.3)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: values
|
|
|
+ }],
|
|
|
+ dataZoom: [{
|
|
|
+ type: 'slider',
|
|
|
+ show: false,
|
|
|
+ startValue: data.length - 14, // 展示后14个数据的索引
|
|
|
+ endValue: data.length // 展示全部数据
|
|
|
+ }, {
|
|
|
+ type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
|
|
|
+ start: 0, // 左边在 0% 的位置。
|
|
|
+ end: 10 // 右边在 10% 的位置。
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ let mychat = echarts.init(bottomright_echarts.value);
|
|
|
+ mychat.setOption(option);
|
|
|
+ }
|
|
|
+
|
|
|
+ function switchType(item){
|
|
|
+ tradeType.value = item.name;
|
|
|
+ showBottomRight(datalist.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(()=>{
|
|
|
+ impquery();
|
|
|
+ })
|
|
|
+
|
|
|
+ return{
|
|
|
+ datalist,
|
|
|
+ impquery,
|
|
|
+ loading,
|
|
|
+ worldMap,
|
|
|
+ daterangeTime,
|
|
|
+ topright_echarts,
|
|
|
+ bottomleft_echarts,
|
|
|
+ bottommiddle_echarts,
|
|
|
+ bottomright_echarts,
|
|
|
+ tradeType,
|
|
|
+ typeNames,
|
|
|
+ typeList,
|
|
|
+ switchType,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.el-table__body tr.current-row>td.el-table__cell
|
|
|
+{
|
|
|
+ background-color: #aacbec;
|
|
|
+}
|
|
|
+.table_caption{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+}
|
|
|
+.line{
|
|
|
+ height: 60%;
|
|
|
+ width: 5px;
|
|
|
+ background-color: #000;
|
|
|
+ border-radius: 5px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+.spanBtn{
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.active{
|
|
|
+ background-color: cornflowerblue;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
