|
|
@@ -3,927 +3,47 @@
|
|
|
*/
|
|
|
const chartContent = new Vue({
|
|
|
el:"#chartContent",
|
|
|
+ mixins: [jsonMixin,chartMixin],
|
|
|
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
|
|
|
- }
|
|
|
- ]
|
|
|
+ shopId:0,
|
|
|
+ volumeList:[],
|
|
|
+ bannerList:[],
|
|
|
+ summarize:'',
|
|
|
+ summarize1:'',
|
|
|
+ summarize2:''
|
|
|
+
|
|
|
},
|
|
|
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)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
+ chartInit(shopId){
|
|
|
+ console.log('shopId',shopId)
|
|
|
+ this.volumeList = this.chartData[shopId].volumeList
|
|
|
+ this.bannerList = this.chartData[shopId].bannerList
|
|
|
+ this.summarize = this.chartData[shopId].summarize
|
|
|
+ this.summarize1 = this.chartData[shopId].summarize1
|
|
|
+ this.summarize2 = this.chartData[shopId].summarize2
|
|
|
+ this.chartWordCloud(this.chartData[shopId].keywords)
|
|
|
+ this.chartWechats(this.chartData[shopId].wechats)
|
|
|
+ this.chartIntention(this.chartData[shopId].intention)
|
|
|
+ this.chartAllVisits(this.chartData[shopId].allVisits)
|
|
|
+ this.chartProportion(this.chartData[shopId].proportion)
|
|
|
+ this.chartStationVisits(this.chartData[shopId].stationVisits)
|
|
|
+ this.chartVisitTimes(this.chartData[shopId].visitTimes)
|
|
|
+ this.chartLeadUserMonthly(this.chartData[shopId].leadUserMonthly)
|
|
|
+ this.chartChannels(this.chartData[shopId].channels)
|
|
|
+ this.chartUrbanize(this.chartData[shopId].urbanize)
|
|
|
+ this.chartUserIdentity(this.chartData[shopId].userIdentity)
|
|
|
+ this.chartIntentions(this.chartData[shopId].intentions)
|
|
|
+ }
|
|
|
},
|
|
|
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()
|
|
|
-
|
|
|
+ this.shopId = getUrlParam("shopId");
|
|
|
+ this.chartInit(this.shopId)
|
|
|
}
|
|
|
});
|
|
|
|
