|
|
@@ -0,0 +1,929 @@
|
|
|
+/**
|
|
|
+ * Created by xw on 2023/10/31.
|
|
|
+ */
|
|
|
+const chartContent = new Vue({
|
|
|
+ el:"#chartContent",
|
|
|
+ data: {
|
|
|
+ isEfficacy:false,
|
|
|
+ form:{
|
|
|
+ shareCode:'',
|
|
|
+ shopOrderId:''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ shareCode: [{required: true,message: '请输入分享码',trigger: 'blur'}]
|
|
|
+ },
|
|
|
+ dataList:[
|
|
|
+ {
|
|
|
+ title:"首页",
|
|
|
+ image:'https://img.caimei365.com/group1/M00/04/99/rB-lGGUuN0eAcDtxAADrNCU9O4U716.jpg',
|
|
|
+ number:500
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:"信息中心",
|
|
|
+ image:'https://img.caimei365.com/group1/M00/04/99/rB-lGGUvPuWAfzMPAAGWyta6MgU076.jpg',
|
|
|
+ number:800
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ disabled() {
|
|
|
+ // 分享码长度是否符合要求
|
|
|
+ return this.form.shareCode.trim().length < 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chartWordCloud(){// 词云
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart0'));
|
|
|
+ let keywords = [
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ {name:"西班牙ROSS",value:121},
|
|
|
+ {name:"ROSS肌肉抗衰",value:2},
|
|
|
+ {name:"ROSS发烧疗法",value:13},
|
|
|
+ {name:"ROSS智能体疗",value:8},
|
|
|
+ {name:"ROSS发烧之星",value:5},
|
|
|
+ {name:"ROSS BODY",value:25},
|
|
|
+ ]
|
|
|
+ let option = {
|
|
|
+ title: {text: '关键词云图'},
|
|
|
+ tooltip: {trigger: 'item'},
|
|
|
+ series: [{
|
|
|
+ type: 'wordCloud',
|
|
|
+ shape: 'circle',
|
|
|
+ keepAspect: false,
|
|
|
+ maskImage: '',
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ width: '90%',
|
|
|
+ height: '85%',
|
|
|
+ right: null,
|
|
|
+ bottom: null,
|
|
|
+ sizeRange: [12, 60],
|
|
|
+ rotationRange: [-90, 90],
|
|
|
+ rotationStep: 45,
|
|
|
+ gridSize: 10,
|
|
|
+ drawOutOfBound: false,
|
|
|
+ shrinkToFit: false,
|
|
|
+ layoutAnimation: true,
|
|
|
+ textStyle: {
|
|
|
+ fontFamily: 'sans-serif',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: function () {
|
|
|
+ // Random color
|
|
|
+ return 'rgb(' + [
|
|
|
+ Math.round(Math.random() * 160),
|
|
|
+ Math.round(Math.random() * 160),
|
|
|
+ Math.round(Math.random() * 160)
|
|
|
+ ].join(',') + ')';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'self',
|
|
|
+ textStyle: {
|
|
|
+ textShadowBlur: 10,
|
|
|
+ textShadowColor: '#333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:keywords
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //公众号推文
|
|
|
+ chartWechats(){
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart1'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '公众号推文数据'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['供应商动态','供应商动态','科普推荐','科普推荐','专题报道','品牌推荐','美业动态','优惠活动','新品推荐']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '阅读量',
|
|
|
+ type: 'line',
|
|
|
+ color:['#A294FF'],
|
|
|
+ data: [480, 610, 1139, 1513, 987, 1516,592,355,564]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '触达量',
|
|
|
+ type: 'line',
|
|
|
+ color:['#45CCF8'],
|
|
|
+ data: [12663, 12677, 12587, 12766, 12806, 12823,13020,13046,13115]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartIntention(){ // 采美全渠道展现量
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart2'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '采美全渠道展现量'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: '0%',
|
|
|
+ top:'0%',
|
|
|
+ itemGap: 10, // 这里可以设置图例每项之间的间隔
|
|
|
+ itemWidth: 20, // 这里可以设置图例标记的宽度
|
|
|
+ itemHeight: 14, // 这里可以设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: ['官网', '公众号', '微博', '小红书','其他渠道']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '官网',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [21032, 21362, 21726, 22204]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公众号',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [25340, 25572, 25739, 26066]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '微博',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [13482, 26996, 27016, 60975]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '小红书',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [1425, 998, 2665, 6968]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他渠道',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [11649, 6546, 37160, 58557]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ // 全渠道访问用户数量
|
|
|
+ chartAllVisits(){
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart3'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '采美全渠道访问量'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: '0%',
|
|
|
+ top:'0%',
|
|
|
+ itemGap: 10, // 这里可以设置图例每项之间的间隔
|
|
|
+ itemWidth: 20, // 这里可以设置图例标记的宽度
|
|
|
+ itemHeight: 14, // 这里可以设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: ['信息中心', '公众号', '微博', '小红书','其他渠道']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '信息中心',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [1163, 1167, 1112, 719]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公众号',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [1086, 2485, 2155, 941]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '微博',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [3472, 6814, 8909, 11106]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '小红书',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [393, 336, 754, 798]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他渠道',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [655, 399, 1362, 1634]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartProportion(){ // 渠道来源占比
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart4'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '访问用户渠道来源占比'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: '0%',
|
|
|
+ top:'0%',
|
|
|
+ itemGap: 10, // 这里可以设置图例每项之间的间隔
|
|
|
+ itemWidth: 20, // 这里可以设置图例标记的宽度
|
|
|
+ itemHeight: 14, // 这里可以设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: ['商城', '公众号', '小红书']
|
|
|
+
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '商城',
|
|
|
+ type: 'line',
|
|
|
+ data: [ { value:61},{ value:50},{ value:33},{ value:35}],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.value + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公众号',
|
|
|
+ type: 'line',
|
|
|
+ data: [ { value:25},{ value:41},{ value:46},{ value:43}],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.value + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '小红书',
|
|
|
+ type: 'line',
|
|
|
+ data: [ { value:14},{ value:9},{ value:21},{ value:22}],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.value + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ // 采美站内访问量
|
|
|
+ chartStationVisits(){
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart5'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '品牌整体访问量'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: '0%',
|
|
|
+ top:'0%',
|
|
|
+ itemGap: 10, // 这里可以设置图例每项之间的间隔
|
|
|
+ itemWidth: 20, // 这里可以设置图例标记的宽度
|
|
|
+ itemHeight: 14, // 这里可以设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: ['游客访问量', '机构访问量']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '游客访问量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [164, 172, 206, 168]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机构访问量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ data: [27, 43, 31, 43]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartVisitTimes(){ // 页面平均访问时长top5
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart6'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '访问页面平均时长top5（单位：秒）',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ color:'#FE8645',
|
|
|
+ formatter: function(params) { // 格式化 tooltip 内容
|
|
|
+ return '访问时长：'+ params[0].value + 's'
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['采美推荐','品牌介绍','品牌活动','品牌动态','采美科普','品牌新品','ROSS店铺页','商品3.0详情页','商品4.0详情页']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine:{
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ opacity:0.8,
|
|
|
+ color:'#E1E1E1',
|
|
|
+ type:'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ axisLabel:{
|
|
|
+ show: true,
|
|
|
+ textStyle:{
|
|
|
+ color: '#999999', //更改坐标轴文字颜色
|
|
|
+ fontSize : 14, //更改坐标轴文字大小
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {//轴网格,在xAxis或yAxis根下
|
|
|
+ lineStyle:{
|
|
|
+ width:1,
|
|
|
+ color:'#E1E1E1',
|
|
|
+ type:'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ name: '访问时长',
|
|
|
+ data: [156,348,28,203,113,148,167,33,79],
|
|
|
+ color:'#FF5B00',
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(255, 158, 68)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(255, 70, 131)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ // 线索用户月度分布
|
|
|
+ chartLeadUserMonthly(){
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart7'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '线索用户月度分布(单位：个)'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: '0%',
|
|
|
+ top:'0%',
|
|
|
+ itemGap: 10, // 这里可以设置图例每项之间的间隔
|
|
|
+ itemWidth: 20, // 这里可以设置图例标记的宽度
|
|
|
+ itemHeight: 14, // 这里可以设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['6月', '7月', '8月', '9月']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '线索用户月度分布',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ barGap:'60%',
|
|
|
+ barCategoryGap:'60%',
|
|
|
+ color:'#07c160',
|
|
|
+ data: [19,31,22,26]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartChannels(){// 线索用户地狱分布
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart8'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '线索用户地域分布'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ min: 0,
|
|
|
+ max: 1000,
|
|
|
+ left: 'left',
|
|
|
+ top: 'bottom',
|
|
|
+ text: ['高', '低'], // 文本，默认为数值文本
|
|
|
+ calculable: true,
|
|
|
+ inRange: {
|
|
|
+ color: ['#e0ffff', '#006edd']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '中国',
|
|
|
+ type: 'map',
|
|
|
+ mapType: 'china', // 设置地图类型为中国省份地图
|
|
|
+ roam: false, // 禁止缩放和平移操作
|
|
|
+ label: {
|
|
|
+ show: true // 显示省份标签
|
|
|
+ },
|
|
|
+ data: [ // 设置地图数据，可以根据需要自定义数据
|
|
|
+ {name: '北京', value: 176},
|
|
|
+ {name: '山东', value: 33},
|
|
|
+ {name: '福建', value: 15},
|
|
|
+ {name: '台湾', value: 2},
|
|
|
+ {name: '河南', value: 16},
|
|
|
+ {name: '河北', value: 16},
|
|
|
+ {name: '重庆', value: 10},
|
|
|
+ {name: '湖北', value: 25},
|
|
|
+ {name: '湖南', value: 12},
|
|
|
+ {name: '江西', value: 16},
|
|
|
+ {name: '海南', value: 5},
|
|
|
+ {name: '天津', value: 8},
|
|
|
+ {name: '贵州', value: 11},
|
|
|
+ {name: '陕西', value: 15},
|
|
|
+ {name: '新疆', value: 11},
|
|
|
+ {name: '澳门', value: 1},
|
|
|
+ {name: '江苏', value: 37},
|
|
|
+ {name: '安徽', value: 9},
|
|
|
+ {name: '西藏', value: 3},
|
|
|
+ {name: '上海', value: 37},
|
|
|
+ {name: '吉林', value: 6},
|
|
|
+ {name: '宁夏', value: 6},
|
|
|
+ {name: '山西', value: 10},
|
|
|
+ {name: '香港', value: 3},
|
|
|
+ {name: '甘肃', value: 3},
|
|
|
+ {name: '四川', value: 41},
|
|
|
+ {name: '浙江', value: 53},
|
|
|
+ {name: '广西', value: 7},
|
|
|
+ {name: '云南', value: 10},
|
|
|
+ {name: '辽宁', value: 13},
|
|
|
+ {name: '广东', value: 210},
|
|
|
+ {name: '青海', value: 2},
|
|
|
+ {name: '黑龙江', value: 18},
|
|
|
+ {name: '内蒙古', value: 9}
|
|
|
+ ],
|
|
|
+ itemStyle:{
|
|
|
+ fontSize: 14,
|
|
|
+ color:'#FE8645'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartUrbanize(){ // 用户类型分布
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart9'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '用户类型分布',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ top:'bottom'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ color:['#45CCF8','#4880FF','#FE8645'],
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['35%', '25%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.name + ' (' + param.value + '%)';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 30, name: '生美机构' },
|
|
|
+ { value: 56, name: '双美机构' },
|
|
|
+ { value: 14, name: '项目公司' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartUserIdentity(){ // 用户身份分布
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart10'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '用户身份分布',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ top:'bottom'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ color:['#45CCF8','#4880FF','#1CC170'],
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['35%', '25%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.name + ' (' + param.value + '%)';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 70, name: '老板' },
|
|
|
+ { value: 24, name: '采购' },
|
|
|
+ { value: 6, name: '运营' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ chartIntentions(){ // 用户意向分布
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart11'))
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '用户意向分布',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ top:'bottom'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ color:['#45CCF8','#4880FF','#1CC170','#FF726E'],
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['35%', '25%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.name + ' (' + param.value + '%)';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 46, name: '意向普通' },
|
|
|
+ { value: 43, name: '意向强烈' },
|
|
|
+ { value: 9, name: '已报备' },
|
|
|
+ { value: 5, name: '已购机' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option); // 将选项应用到图表实例上，生成图表
|
|
|
+ },
|
|
|
+ // 订单分享码校验
|
|
|
+ handleCheckOrderShareCode(params){
|
|
|
+ const _self = this;
|
|
|
+ SupplierApi.checkShopOrderShareCode(params,function (response) {
|
|
|
+ if(response.code===0){
|
|
|
+ window.location.href = '/order-share-details.html?shopOrderId='+response.data
|
|
|
+ }else{
|
|
|
+ _self.$message.error(response.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ // this.form.shopOrderId = getUrlParam("shopOrderId");
|
|
|
+ this.chartWordCloud()
|
|
|
+ this.chartWechats()
|
|
|
+ this.chartAllVisits()
|
|
|
+ this.chartProportion()
|
|
|
+ this.chartStationVisits()
|
|
|
+ this.chartIntention()
|
|
|
+ this.chartUrbanize()
|
|
|
+ this.chartVisitTimes()
|
|
|
+ this.chartLeadUserMonthly()
|
|
|
+ this.chartIntentions()
|
|
|
+ this.chartUserIdentity()
|
|
|
+ this.chartChannels()
|
|
|
+
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
