201912G05/WebContent/js/BA_phone.js

$(document).ready(function (e) {
    GetSerialChart(jsonPerformance, '性能对比');
    // MakeChart(jsonPerformance);
});




var jsonPerformance =
	(function(){
        var arr=[];
            $.ajax({
            type : "post",
            async : false, //同步执行
            url : "bar.do",
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
            if (result) {
                   for(var i=0;i<result.length;i++){
                      console.log(result[i].name);
                      arr.push(result[i].name);
                    }    
            }
            
        },
        error : function(errorMsg) {
            alert("不好意思，图表请求数据失败啦!");
            myChart.hideLoading();
        }
       });
            console.log(arr);
       return arr[0]['value'];
    })() 


   





var jsonSales = [{
        "name": "小米9",
        "value": "60"
    },
    {
        "name": "魅族16th",
        "value": 540
    },
    {
        "name": "一加7T",
        "value": "30"
    },
    {
        "name": "华为mate30Pro",
        "value": "40"
    },
    {
        "name": "iPhone11",
        "value": "30"
    },
    {
        "name": "vivo NEX3",
        "value": "50"
    },
    {
        "name": "oppo A57",
        "value": "5"
    },
    {
        "name": "小米5",
        "value": "80"
    }
]

//
//var jsonPopular = [{
//        "name": "小米9",
//        "value": "80"
//    },
//    {
//        "name": "魅族16th",
//        "value": "70"
//    },
//    {
//        "name": "一加7T",
//        "value": "30"
//    },
//    {
//        "name": "华为mate30Pro",
//        "value": "40"
//    },
//    {
//        "name": "iPhone11",
//        "value": "80"
//    },
//    {
//        "name": "vivo NEX3",
//        "value": "38"
//    },
//    {
//        "name": "oppo A57",
//        "value": "2"
//    },
//    {
//        "name": "小米5",
//        "value": "100"
//    }
//]


function GetSerialChart(json, title) {

    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = json;

    //json数据的key  
    chart.categoryField = "name";
  
    //不选择      
    chart.rotate = false;
    //值越大柱状图面积越大  
    chart.depth3D = 20;
    //柱子旋转角度角度
    chart.angle = 30;
    var mCtCategoryAxis = chart.categoryAxis;
    mCtCategoryAxis.axisColor = "#efefef";
    //背景颜色透明度
    mCtCategoryAxis.fillAlpha = 0.5;
    //背景边框线透明度
    mCtCategoryAxis.gridAlpha = 0;
    mCtCategoryAxis.fillColor = "#efefef";
    var valueAxis = new AmCharts.ValueAxis();
    //左边刻度线颜色  
    valueAxis.axisColor = "#ccc";
    //标题
    valueAxis.title = title;
    //刻度线透明度
    valueAxis.gridAlpha = 0.2;
    chart.addValueAxis(valueAxis);
    var graph = new AmCharts.AmGraph();
    graph.title = "value";
    graph.valueField = "value";
    graph.type = "column";
    //鼠标移入提示信息
    graph.balloonText = "测试数据[[name]] [[value]]";
    //边框透明度
    graph.lineAlpha = 0.3;
    //填充颜色 
    graph.fillColors = "#b9121b";
    graph.fillAlphas = 1;

    chart.addGraph(graph);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorAlpha = 0;
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonEnabled = false;
    chart.addChartCursor(chartCursor);

    chart.creditsPosition = "top-right";

    //显示在Main div中
    chart.write("cylindrical");
}


//控制统计表(传说中的增删)
controlTongJi();

function controlTongJi() {
    /**
     * 查找目标进行删除 
     * @param {String} name 名字
     * @param {Object} json 哪个json对象？
     * @param {String} title 标题
     */
    function findKill(json, name) {
        json.forEach(function (item, i, self) {
            if (item.name == name) {
                console.log('kill', i);
                json.splice(i, 1);
                GetSerialChart(json); //更新信息
            }
        });
    }

    $('#ctrl button:nth-of-type(3)').on('click', function () {
        console.log('删除成功');
        var value = $(this).prev().val();
        findKill(jsonPerformance, value);
        findKill(jsonSales, value);
        findKill(jsonPopular, value);
    });

    //增加
    $('#ctrl button:nth-of-type(1)').on('click', function () {
        console.log('增加成功');
        var phoneName = $(this).prev().val();
        var newPhonePerformance = {
            'name': phoneName,
            'value': null,
        }
        var newPhoneSales = {
            'name': phoneName,
            'value': null,
        }
        var newPhonePopular = {
            'name': phoneName,
            'value': null,
        }
        jsonPerformance.push(newPhonePerformance);
        jsonSales.push(newPhoneSales);
        jsonPopular.push(newPhonePopular);
        // console.log(newPhone);
        GetSerialChart(jsonPerformance);
        GetSerialChart(jsonSales);
        GetSerialChart(jsonPopular);
    });

    //设置 性能、人气、销量 那些在 compareWay 下面。。。。。。。。。。。
}

//比较方式
compareWay();

function compareWay() {
    //查找修改
    function search(jsons, name, value, title) {
        jsons.forEach(function (item, i, self) {
            if (item.name === name) {
                item.value = value;
                console.log('名字' + name, '性能' + value);
            }
        });
        GetSerialChart(jsons, title);
    }

    //设置性能、销量、人气
    $('#ctrl button:nth-of-type(2)').on('click', function () {
        console.log('设置成功');
        var phoneName = $('#ctrl input:nth-of-type(2)').val(),
            phoneValue = $('#ctrl input:nth-of-type(3)').val();
        console.log(phoneName);
        if ($(this).text() === '设置性能') {
            console.log('设置性能成功');
            search(jsonPerformance, phoneName, phoneValue, '性能比较');
        } else if ($(this).text() === '设置销量') {
            console.log('设置销量成功')
            search(jsonSales, phoneName, phoneValue, '销量比较');
        } else if ($(this).text() === '设置人气') {
            console.log('设置人气成功');
            search(jsonPopular, phoneName, phoneValue, '人气比较');
        }

    });

    //性能比较            
    $('.performance').on('click', function () {
        console.log('click性能');
        $(this).css('background-color', 'rgb(199, 147, 229)');
        $(this).siblings().css('background-color', 'plum');
        GetSerialChart(jsonPerformance, '性能对比');
        $('#ctrl .setPerform').text('设置性能');
    });


    //销量比较
    $('.sales').on('click', function () {
        console.log('click销量');
        $(this).css('background-color', 'rgb(199, 147, 229)');
        $(this).siblings().css('background-color', 'plum');

        GetSerialChart(jsonSales, '销量对比');
        $('#ctrl .setPerform').text('设置销量');
    });

    //人气比较
    $('.popular').on('click', function () {
        console.log('click人气');
        $(this).css('background-color', 'rgb(199, 147, 229)');
        $(this).siblings().css('background-color', 'plum');

        GetSerialChart(jsonPopular, '人气对比');
        $('#ctrl .setPerform').text('设置人气');
    });
}

/**
 * 点击时候的状态
 */
function thatStatus(value) {
    $('#ctrl .setPerform').text(value);
}