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

'use strict';
const chartsMixin = function () {// 通知消息
    return {
        data(){
            return {
                dataTime: '',
                yearMonth: []
            }
        },
        computed:{
            pickerOptionsH5(){
                const _self = this
                return {
                    disabledDate(time) {
                        // 获取时间选择器的年份信息
                        const timeYear = time.getFullYear(); // 获取时间选择器的年份
                        // 获取时间选择器的月份信息
                        let timeMonth = time.getMonth() + 1; // 获取时间选择器的月份
                        if (timeMonth >= 1 && timeMonth <= 9) {
                            timeMonth = "0" + timeMonth; // 如果月份小于10，前面补0
                        }
                        const elTimeData = timeYear.toString() + timeMonth.toString(); // 组合年份和月份字符串
                        // 根据需要禁用多个月份，这里禁用了2021年的10月和11月作为选择范围
                        return _self.yearMonth.includes(elTimeData)
                    }
                }
            },
            pickerOptions(){
                const _self = this
                return {
                    disabledDate(time) {
                        // 获取时间选择器的年份信息
                        const timeYear = time.getFullYear(); // 获取时间选择器的年份
                        // 获取时间选择器的月份信息
                        let timeMonth = time.getMonth() + 1; // 获取时间选择器的月份
                        if (timeMonth >= 1 && timeMonth <= 9) {
                            timeMonth = "0" + timeMonth; // 如果月份小于10，前面补0
                        }
                        const elTimeData = timeYear.toString() + timeMonth.toString(); // 组合年份和月份字符串
                        // 根据需要禁用多个月份，这里禁用了2021年的10月和11月作为选择范围
                        return _self.yearMonth.includes(elTimeData)
                    },
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        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: `推文数据`
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                    },
                    series: [
                        {
                            name: '点击量',
                            type: 'line',
                            color:['#A294FF'],
                            data: data.values
                        },
                        {
                            name: '展现量',
                            type: 'line',
                            color:['#45CCF8'],
                            data: data.backupsValues
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartIntention(data,shopName){ // 采美全渠道展现量
                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,
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'55%',
                            barCategoryGap:'55%',
                            data: data.values,
                            itemStyle: {
                                color: function(params) {
                                    // params 是当前柱状图的数据点信息对象
                                    const colorList = ['#07c160','#d48265','#fa5151','#1890ff'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            // 采美全渠道点击量
            chartAllVisits(data,shopName){
                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,
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'55%',
                            barCategoryGap:'55%',
                            data: data.values,
                            itemStyle: {
                                color: function(params) {
                                    // params 是当前柱状图的数据点信息对象
                                    const colorList = ['#07c160','#d48265','#fa5151','#1890ff'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartProportion(data,shopName){ // 渠道来源占比
                let myChart = echarts.init(document.getElementById('myChart4'))
                let option = {
                    title: {
                        text: ` 访问用户渠道来源占比`
                    },
                    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
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            // 采美站内访问量
            chartStationVisits(data,shopName){
                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,
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.names
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'80%',
                            barCategoryGap:'80%',
                            data: data.values,
                            itemStyle: {
                                color: function(params) {
                                    // params 是当前柱状图的数据点信息对象
                                    const colorList = ['#07c160','#1890ff'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartVisitTimes(data,shopName){ // 页面平均访问时长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: data.names
                    },
                    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.values,
                            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: ` 咨询用户月度数量(单位：个)`
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow' //
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        right: '0%',
                        top:'0%',
                        show:false,
                        itemGap: 10, // 这里可以设置图例每项之间的间隔
                        itemWidth: 20, // 这里可以设置图例标记的宽度
                        itemHeight: 14, // 这里可以设置图例标记的高度
                        textStyle: {
                            fontSize: 12,
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        type: 'category',
                        data: data.names
                    },
                    series: [
                        {
                            name: '咨询用户月度数量:',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            barGap:'80%',
                            barCategoryGap:'80%',
                            color:'#4880FF',
                            data: data.values
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartChannels(data,shopName){// 咨询用户地狱分布
                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,
                                // formatter(param) {
                                //     // correct the percentage
                                //     return param.name + ' (' + param.value + '%)';
                                // }
                            },
                            data: data,
                            itemStyle:{
                                fontSize: 14,
                                color:'#FE8645'
                            }
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartUrbanize(data,shopName){ // 用户类型分布
                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: data
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartUserIdentity(data,shopName){ // 用户身份分布
                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: data
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            },
            chartIntentions(data,shopName){ // 用户意向分布
                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:data.series
                        }
                    ]
                };
                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
            }
        },
    };
}();