Skip to content

M
Muse
Commit 49f72465 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent d82fecb3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1188 additions and 113 deletions
src/components/sellDashboard/map/viittoMap.vue 0 → 100644
View file @ 49f72465
<template>
<div class="echarts" :style="{height:'100%',width:'100%'}">
<div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
<div v-for="(item, index) in points" :key="index" class="jiaoyidian" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
</div>
</template>
<script>
import echarts from "echarts";
// import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson"],
data() {
return {
chart: null,
position: [-999999, -999999],
points:[],
myChart:{}
};
},
mounted() {
this.bus.$on('addpoint',addTradeInfo=>{
this.addPoint(addTradeInfo)
})
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chinaConfigure() {
var myData = [
// { name: "1", value: [121.15, 31.89, 90] },
// { name: "2", value: [109.781327, 39.608266, 70] },
// { name: "3", value: [120.38, 37.35, 42] },
// { name: "4", value: [122.207216, 29.985295, 23] },
// { name: "5", value: [110.245672, 30.7787677, 20] }
];
this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = this.myChart.resize;
this.myChart.setOption({
// 进行相关配置
backgroundColor: "transparent",
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ["#ff3333", "orange", "yellow", "lime", "aqua"],
itemWidth: 15, //调整左侧彩条的大小。
itemHeight: 100,
y: "center",
textStyle: {
color: "#fff"
},
show: false
},
grid: {
left: "0",
right: "0",
top: "0",
bottom:'0'
},
geo: {
// 这个是重点配置区
map: "china", // 表示中国地图
roam: false,
label: {
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: "rgba(0,0,0,0.4)"
}
}
},
itemStyle: {
normal: {
areaColor: "#242B46", //地图本身的颜色
borderColor: "#151A30", //省份的边框颜色rgb(60,180,207)
borderWidth: 1, //省份的边框宽度
opacity: 0.8, //图形透明度
textStyle: {
show: false
}
},
emphasis: {
areaColor: "rgb(60,180,207)", //高亮时候地图显示的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgb(60,180,207)"
}
}
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
markPoint: this.markPoint
},
{
name: "交易数据", //series名称
type: "scatter", //为散点类型
coordinateSystem: "geo", // series坐标系类型
data: myData,
symbol: "circle",
symbolSize: [10, 10],
animation: true
}
]
});
},
addPoint(param){
console.log(param)
let ad=param.address?param.address:param.city
var myGeo = new BMap.Geocoder();
var that=this
console.log(ad)
myGeo.getPoint(ad, function(point){
if (point) {
var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
let coord = that.myChart.convertToPixel("geo", [point.lng, point.lat]);
that.points.push(coord);
if(that.points.length>100){
that.points.splice(0,1)
}
}
})
},
}
};
</script>
<style>
.jiaoyidian {
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
background: #2a73fe;
border-radius: 100%;
box-shadow: 0 0 30px #2a73fe;
animation-timing-function: ease-in-out;
animation-name: breathe;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.canpingsee {
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
background: #2a9e9e;
border-radius: 100%;
box-shadow: 0 0 30px #2a9e9e;
animation-timing-function: ease-in-out;
animation-name: breathe;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@-webkit-keyframes breathe {
0% {
box-shadow: 0 0 20px inherit;
opacity: 0;
}
100% {
box-shadow: 0 1px 30px inherit;
opacity: 1;
width: 10px;
height: 10px;
}
}
</style>
src/components/viitto/dashboard.vue 0 → 100644
View file @ 49f72465
<style>
</style>
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
score:{
type:Number,
default:0
},
title:{
type:String,
default:''
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let _this = this;
let option = {
series: [
{
type: "gauge",
radius: "99%", //仪表大小
min: 0,
max: 100,
splitNumber: 5,
data: [{ value: this.score, name: _this.title }],
title: {
offsetCenter: [0, '40%'],
color: "#494E63",
},
detail: {
offsetCenter: [0, '-10%'],
fontSize: 40,
color: "#ffffff"
},
axisLine: {
show: false,
lineStyle: {
color: [
[
(this.score/100),
new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#44D6AC" },
{ offset: 1, color: "#A7DE8A" }
])
],
[1, "#00000000"]
],
width: 18
}
},
axisTick:{
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
splitLine: {
show:false
},
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.inerank-container {
height: 100%;
width: 100%;
padding-top: 30px;
}
</style>
src/components/viitto/viittoData.vue 0 → 100644
View file @ 49f72465
This diff is collapsed.
src/components/viitto/viittoData2.vue 0 → 100644
View file @ 49f72465
This diff is collapsed.
src/router.js
View file @ 49f72465
......@@ -2,7 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router'
import login from './views/login'
import index from './views/index'
import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2'
Vue.use(Router)
export default new Router({
......@@ -23,118 +24,16 @@ export default new Router({
'http-equiv':"X-UA-Compatible",
'content':'IE=Edge,chrome=1'
}
},
{
path: '/viittoData',
name: 'viittoData',
component: viittoData,
},
{
path: '/viittoData2',
name: 'viittoData2',
component: viittoData2,
}
// {
// path: '/index',
// name: 'index',
// component: index,
// meta: {
// 'title':"印象之旅~感动与世界同步",
// 'http-equiv':"X-UA-Compatible",
// 'content':'IE=Edge,chrome=1'
// },
// children:[
// {
// path: '/detail/:id',
// name: 'detail',
// component: resolve => require(['@/components/mall/detail'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detail/:id/:pre',
// name: 'detail',
// component: resolve => require(['@/components/mall/detail'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detailTwo/:id/',
// name: 'detailTwo',
// component: resolve => require(['@/components/mall/detailTwo'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detailTwo/:id/:pre',
// name: 'detailTwo',
// component: resolve => require(['@/components/mall/detailTwo'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/heel',
// name: 'heel',
// component: resolve => require(['@/components/mall/heeltour'], resolve),
// meta: {
// title: '跟团游-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/coding',
// name: 'coding',
// component: resolve => require(['@/components/mall/coding'], resolve),
// meta: {
// title: '正在开发中-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/search',
// name: 'search',
// component: resolve => require(['@/components/mall/search'], resolve),
// meta: {
// title: '搜索行程-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/PersonalHome',
// name: 'PersonalHome',
// component: resolve => require(['@/components/PersonalCenter/PersonalHome'], resolve),
// meta: {
// },
// children:[{
// path: '/PsCenter',
// name: 'PsCenter',
// component: resolve => require(['@/components/PersonalCenter/PsCenter'], resolve),
// meta: {
// title: '个人中心'
// }
// },{
// path: '/PsOrder',
// name: 'PsOrder',
// component: resolve => require(['@/components/PersonalCenter/PsOrder'], resolve),
// meta: {
// title: '订单管理'
// }
// },{
// path: '/PsSystem',
// name: 'PsSystem',
// component: resolve => require(['@/components/PersonalCenter/PsSystem'], resolve),
// meta: {
// title: '系统管理'
// }
// },{
// path: '/PsAccBalance',
// name: 'PsAccBalance',
// component: resolve => require(['@/components/PersonalCenter/PsAccBalance'], resolve),
// meta: {
// title: '账户余额'
// }
// },{
// path: '/OrderInvoice',
// name: 'OrderInvoice',
// component: resolve => require(['@/components/PersonalCenter/OrderInvoice'], resolve),
// meta: {
// title: '发票信息'
// }
// }]
// }
// ]
// }
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment