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