caimei365-www/src/main/resources/static/js/supplier-center/encyclopedia/mixins/chartMixin.js

'use strict';
const chartMixin = function () {// 通知消息
    return {
        data(){
            return{

            }
        },
        methods: {
            chartWordCloud(data){// 词云
                let myChart = echarts.init(document.getElementById('myChart0'));
                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:data
                    }]
                }
                myChart.setOption(option)
                window.addEventListener("resize", function() {
                    myChart.resize()
                })
            },
            //公众号推文
            chartWechats(data,shopName){
                let myChart = echarts.init(document.getElementById('myChart1'))
                let option = {
                    title: {
                        text: `【${shopName}】公众号推文数据`
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                    },
                    series: [
                        {
                            name: '点击量',
                            type: 'line',
                            color:['#A294FF'],
                            data: data.yAxis.yuedu
                        },
                        {
                            name: '展现量',
                            type: 'line',
                            color:['#45CCF8'],
                            data: data.yAxis.chuda
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartIntention(data,shopName){ // 采美全渠道展现量
                let myChart = echarts.init(document.getElementById('myChart2'))
                let option = {
                    title: {
                        text: `【${shopName}】采美全渠道展现量`
                    },
                    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: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '公众号',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.general
                        },
                        {
                            name: '微博',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.twitter
                        },
                        {
                            name: '小红书',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.redBook
                        },
                        {
                            name: '其他渠道',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.other
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            // 全渠道访问用户数量
            chartAllVisits(data,shopName){
                let myChart = echarts.init(document.getElementById('myChart3'))
                let option = {
                    title: {
                        text: `【${shopName}】采美全渠道点击量`
                    },
                    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: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '公众号',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.general
                        },
                        {
                            name: '微博',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.twitter
                        },
                        {
                            name: '小红书',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.redBook
                        },
                        {
                            name: '其他渠道',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.other
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartProportion(data,shopName){ // 渠道来源占比
                let myChart = echarts.init(document.getElementById('myChart4'))
                let option = {
                    title: {
                        text: `【${shopName}】访问用户渠道来源占比`
                    },
                    legend: {
                        orient: 'horizontal',
                        right: '0%',
                        top:'0%',
                        itemGap: 10, // 这里可以设置图例每项之间的间隔
                        itemWidth: 20, // 这里可以设置图例标记的宽度
                        itemHeight: 14, // 这里可以设置图例标记的高度
                        textStyle: {
                            fontSize: 12,
                        },
                        data: ['商城', '公众号', '小红书']

                    },
                    xAxis: {
                        type: 'category',
                        data: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '搜索引擎',
                            type: 'line',
                            data: data.yAxis.search,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '%'
                                }
                            }
                        },
                        {
                            name: '微信平台',
                            type: 'line',
                            data: data.yAxis.general,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '%'
                                }
                            }
                        },
                        {
                            name: '微博',
                            type: 'line',
                            data: data.yAxis.redBook,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '%'
                                }
                            }
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            data: data.yAxis.mall,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '%'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            // 采美站内访问量
            chartStationVisits(data,shopName){
                let myChart = echarts.init(document.getElementById('myChart5'))
                let option = {
                    title: {
                        text: `【${shopName}】品牌整体访问量`
                    },
                    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: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '游客访问量',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.tourist
                        },
                        {
                            name: '机构访问量',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            data: data.yAxis.clubs
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartVisitTimes(data,shopName){ // 页面平均访问时长top5
                let myChart = echarts.init(document.getElementById('myChart6'))
                let option = {
                    title: {
                        text: `【${shopName}】访问页面平均时长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: data.xAxis
                    },
                    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: data.yAxis.series,
                            color:'#4880FF',
                            label: {
                                show: true
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(72,128,255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(68,92,207)'
                                    }
                                ])
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            // 咨询用户月度分布
            chartLeadUserMonthly(data,shopName){
                let myChart = echarts.init(document.getElementById('myChart7'))
                let option = {
                    title: {
                        text: `【${shopName}】咨询用户月度分布(单位：个)`
                    },
                    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月','10月']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '咨询用户月度分布',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'60%',
                            barCategoryGap:'60%',
                            color:'#4880FF',
                            data: data.yAxis.series
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartChannels(data,shopName){// 咨询用户地狱分布
                let myChart = echarts.init(document.getElementById('myChart8'))
                let option = {
                    title: {
                        text: `【${shopName}】咨询用户地域分布`
                    },
                    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: data.yAxis.series,
                            itemStyle:{
                                fontSize: 14,
                                color:'#FE8645'
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartUrbanize(data,shopName){ // 用户类型分布
                let myChart = echarts.init(document.getElementById('myChart9'))
                let option = {
                    title: {
                        text: `【${shopName}】访问用户类型分布`,
                        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: data.series
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartUserIdentity(data,shopName){ // 用户身份分布
                let myChart = echarts.init(document.getElementById('myChart10'))
                let option = {
                    title: {
                        text: `【${shopName}】访问用户身份分布`,
                        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: data.series
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartIntentions(data,shopName){ // 用户意向分布
                let myChart = echarts.init(document.getElementById('myChart11'))
                let option = {
                    title: {
                        text: `【${shopName}】用户意向分布`,
                        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:data.series
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            }
        },
    };
}();