/**
 * Created by sff on 2018/4/2.
 */
$(function() {
    $.ajax({
        type: 'POST',
        // data: {brandclass_id:brandclass_id},
        url: '/crm/juzi/xpDetail',
        success: function (res) {
            if (res) {
                $('.xp_fz_avg_today').html(res.xp_fz_avg_today);
                $('.xp_fz_avg_month').html(res.xp_fz_avg_month);
                $('.xp_jn_avg_today').html(res.xp_jn_avg_today);
                $('.xp_jn_avg_month').html(res.xp_jn_avg_month);


                $('.xp_fz_yeji_today').html(res.xp_fz_yeji_today);
                $('.xp_fz_yeji_month').html(res.xp_fz_yeji_month);
                $('.xp_jn_yeji_today').html(res.xp_jn_yeji_today);
                $('.xp_jn_yeji_month').html(res.xp_jn_yeji_month);
                $('.xp_total_yeji_today').html(res.xp_total_yeji_today);
                $('.xp_total_yeji_month').html(res.xp_total_yeji_month);

                $('.xp_md_mh_avg_today').html(res.xp_md_mh_avg_today);
                $('.xp_md_mh_avg_month').html(res.xp_md_mh_avg_month);
                $('.xp_md_ja_avg_today').html(res.xp_md_ja_avg_today);
                $('.xp_md_ja_avg_month').html(res.xp_md_ja_avg_month);


                $('.xp_md_mh_yeji_today').html(res.xp_md_mh_yeji_today);
                $('.xp_md_mh_yeji_month').html(res.xp_md_mh_yeji_month);
                $('.xp_md_ja_yeji_today').html(res.xp_md_ja_yeji_today);
                $('.xp_md_ja_yeji_month').html(res.xp_md_ja_yeji_month);
                $('.xp_md_total_yeji_today').html(res.xp_md_total_yeji_today);
                $('.xp_md_total_yeji_month').html(res.xp_md_total_yeji_month);
                // 选片业绩 — 门店 — 本日数据
                var mdChart1 = echarts.init(document.getElementById('xp-md-chart1'));
                // 指定图表的配置项和数据
                var mdOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_md_mh_yeji_today.toString(),',',''),replace_all(res.xp_md_ja_yeji_today.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                mdChart1.setOption(mdOption1);


                // 选片业绩 — 门店 — 本月数据
                var mdChart2 = echarts.init(document.getElementById('xp-md-chart2'));
                // 指定图表的配置项和数据
                var mdOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}w'
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_md_mh_yeji_month.toString(),',',''),replace_all(res.xp_md_ja_yeji_month.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                mdChart2.setOption(mdOption2);

                // 选片业绩 — 基地 — 本日数据
                var jdChart1 = echarts.init(document.getElementById('xp-jd-chart1'));
                // 指定图表的配置项和数据
                var jdOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,

                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['蜂巢', '嘉娜'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}w'
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_fz_yeji_today.toString(),',',''),replace_all(res.xp_jn_yeji_today.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jdChart1.setOption(jdOption1);


                // 选片业绩 — 基地 — 本月数据
                var jdChart2 = echarts.init(document.getElementById('xp-jd-chart2'));
                // 指定图表的配置项和数据
                var jdOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['蜂巢', '嘉娜'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}w'
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_fz_yeji_month.toString(),',',''),replace_all(res.xp_jn_yeji_month.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jdChart2.setOption(jdOption2);

                // 选片均价 — 门店 — 本日数据
                var jjMdChart1 = echarts.init(document.getElementById('jj-md-chart1'));
                // 指定图表的配置项和数据
                var jjMdOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,

                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_md_mh_avg_today.toString(),',',''),replace_all(res.xp_md_ja_avg_today.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jjMdChart1.setOption(jjMdOption1);


                // 选片均价 — 门店 — 本月数据
                var jjMdChart2 = echarts.init(document.getElementById('jj-md-chart2'));
                // 指定图表的配置项和数据
                var jjMdOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_md_mh_avg_month.toString(),',',''),replace_all(res.xp_md_ja_avg_month.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jjMdChart2.setOption(jjMdOption2);

                // 选片均价 — 基地 — 本日数据
                var jjJdChart1 = echarts.init(document.getElementById('jj-jd-chart1'));
                // 指定图表的配置项和数据
                var jjJdOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,

                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['蜂巢', '嘉娜'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_fz_avg_today.toString(),',',''),replace_all(res.xp_jn_avg_today.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jjJdChart1.setOption(jjJdOption1);


                // 选片均价 — 门店 — 本月数据
                var jjJdChart2 = echarts.init(document.getElementById('jj-jd-chart2'));
                // 指定图表的配置项和数据
                var jjJdOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['蜂巢', '嘉娜'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.xp_fz_avg_month.toString(),',',''),replace_all(res.xp_jn_avg_month.toString(),',','')]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                jjJdChart2.setOption(jjJdOption2);

            }
        }
    })


})
function replace_all(str,tag,rep){
    var re = new RegExp(tag,"g"); //定义正则表达式
//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
    var Newstr = str.replace(re,rep);
    return Newstr;
}