上传文件至 'src/js'

src/js/BA_phone.js

@@ -0,0 +1,296 @@
+$(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);
+}