123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- $(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);
- }
|