k線圖部分 · 代碼梳理

加載屬性對象 ~~~ { name: "", type: "kline", coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/zh_line.png", coverImageWidth: a, tip: "K線圖" } ~~~ 添加k線圖模板 ~~~ // K線圖初始化數據 var k = [["LG",5499.0,6499.0,5499.0,6499.0,5999.0,2,72.0],["TCL",769.0,2499.0,769.0,2499.0,1694.71,7,8461.0],["七星",638.0,638.0,638.0,638.0,638.0,1,55.0],["萬寶",558.0,1049.0,558.0,1049.0,790.8,5,1447.0],["三星",2399.0,6499.0,2399.0,6499.0,4161.5,8,1291.0],["上菱",759.0,1699.0,759.0,1699.0,1131.5,4,241.0],["先科",399.0,549.0,399.0,549.0,482.0,3,532.0],["創維",849.0,2299.0,849.0,2299.0,1540.0,9,3887.0],["華日電器",769.0,999.0,769.0,999.0,884.0,2,120.0],["博世",2490.0,12830.0,2490.0,12830.0,5995.0,6,388.0],["卡薩帝",6999.0,8999.0,6999.0,8999.0,7999.0,2,126.0],["雙鹿",599.0,1029.0,599.0,1029.0,796.5,4,1169.0],["哈士奇",996.0,8799.0,996.0,8799.0,2254.22,9,758.0],["奧克斯",699.0,2599.0,699.0,2599.0,1649.0,2,309.0],["奧馬",499.0,2999.0,499.0,2999.0,1913.29,7,2679.0],["容聲",958.0,5699.0,958.0,5699.0,2649.9,20,21814.0],["富信",339.0,439.0,339.0,439.0,382.333,3,810.0],["尊貴",2299.0,2988.0,2299.0,2988.0,2695.33,3,323.0],["小天鵝",1099.0,1099.0,1099.0,1099.0,1099.0,1,114.0],["康佳",698.0,2598.0,698.0,2598.0,1486.38,16,13779.0],["德努希",1698.0,3799.0,1698.0,3799.0,2965.33,3,125.0],["志高",438.0,639.0,438.0,639.0,538.5,2,119.0],["扎努西?伊萊克斯",1149.0,1149.0,1149.0,1149.0,1149.0,1,71.0],["揚佳",518.0,638.0,518.0,638.0,558.0,3,467.0],["新飛",799.0,2999.0,799.0,2999.0,1726.18,11,2014.0],["晶弘",749.0,3999.0,749.0,3999.0,2365.67,9,1648.0],["松下",3490.0,7590.0,3490.0,7590.0,4710.0,5,830.0],["櫻花",538.0,699.0,538.0,699.0,598.143,7,2595.0],["歐立",419.0,599.0,419.0,599.0,509.0,2,290.0],["海信",559.0,4299.0,559.0,4299.0,2380.18,17,6639.0],["海爾",649.0,7399.0,649.0,7399.0,2816.61,38,41402.0],["海浪",508.0,658.0,508.0,658.0,583.0,2,209.0],["熊貓",538.0,1180.0,538.0,1180.0,766.833,6,6301.0],["索伊",589.0,589.0,589.0,589.0,589.0,1,285.0],["統帥",719.0,3399.0,719.0,3399.0,2001.5,8,4989.0],["美的",699.0,3999.0,699.0,3999.0,1974.44,18,23296.0],["美菱",799.0,4299.0,799.0,4299.0,2227.57,14,8440.0],["榮事達",1299.0,1299.0,1299.0,1299.0,1299.0,1,77.0],["西門子",2398.0,16030.0,2398.0,16030.0,5372.11,28,6388.0],["長虹",749.0,1149.0,749.0,1149.0,949.0,2,443.0],["韓上",488.0,999.0,488.0,999.0,816.8,5,6730.0],["韓電",638.0,1999.0,638.0,1999.0,1094.0,9,918.0]]; // 處理數組對象 function splitData(rawData) { var categoryData = []; var values = []; var avgvalues = []; var counts = []; var solds = []; for (var i = 0; i < rawData.length; i++) { categoryData.push(rawData[i].splice(0, 1)[0]); avgvalues.push(rawData[i].splice(4, 1)[0]); counts.push(rawData[i].splice(4, 1)[0]); solds.push(rawData[i].splice(4, 1)[0]); values.push(rawData[i]) } return { categoryData: categoryData, values: values, avgvalues: avgvalues, counts: counts, solds: solds }; } var klineData = splitData(k); console.log(klineData.categoryData); // K線圖對象 var klineOptionTemplate = { title: { show: false }, tooltip: { trigger: 'axis', // axisPointer: {type: 'cross'} }, legend: { data: ['價格區間', '平均價格', '商品數', '30天總銷量'] }, dataZoom: [{ type: 'inside', start: 0, end: 50 }, { show: true, type: 'slider', y: '90%', start: 0, end: 50 } ], grid: { left: '10%', right: '10%', bottom: '15%' }, xAxis: { type: 'category', scale: true, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, splitNumber: 20, data:klineData.categoryData }, yAxis: [{ type: 'value', name: '價格', position: 'left', axisLabel: { formatter: '{value}' }, }, { type: 'value', name: '商品數', position: 'right', axisLabel: { formatter: '{value}' }, }, { type: 'value', name: '30天總銷量', position: 'right', offset: 50, axisLabel: { formatter: '{value} ' }, } ], series: [{ name: '價格區間', type: 'candlestick', data:klineData.values, barWidth: 10, markPoint: { data: [ { name: 'highest value', type: 'max', valueDim: 'highest' }, { name: 'lowest value', type: 'min', valueDim: 'lowest' }, { name: 'average value on close', type: 'average', valueDim: 'open' } ] } }, { name: '平均價格', type: 'line', smooth: true, data: klineData.avgvalues, markPoint : { data : [ {type : 'max', name : '最大值'}, {type : 'min', name : '最小值'} ] }, lineStyle: { normal: { opacity: 0.5 } } }, { name: '商品數', type: 'line', data: klineData.counts, markPoint : { data : [ {type : 'max', name : '最大值'}, {type : 'min', name : '最小值'} ] }, yAxisIndex: 1, smooth: true, lineStyle: { normal: { opacity: 0.5 } } }, { name: '30天總銷量', type: 'line', data:klineData.solds, markPoint : { data : [ {type : 'max', name : '最大值'}, {type : 'min', name : '最小值'} ] }, yAxisIndex: 2, smooth: true, lineStyle: { normal: { opacity: 0.5 } } } ] }; ~~~ buildChartOption函數里加載模板 ![](https://box.kancloud.cn/809f7cff9c1fea3ddf405d0d94b91cca_707x79.png) ~~~ case "kline": option = angular.copy(klineOptionTemplate); break; ~~~ 默認配置項 ![](https://box.kancloud.cn/33f51a266c298c46c98af66c7f8a8513_665x626.png) 處理數據的方法調用 ![](https://box.kancloud.cn/58f4e3548dfc4b1ffc2be1bdeb12a280_431x73.png) ~~~ case "kline": internalRefreshKlineModelData(); break; ~~~ 處理數據函數 ~~~ // k線圖處理數據函數 var internalRefreshKlineModelData = function(){ var option = component.config.chartConfig; var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; var data = component.context.data; if (data == null || data.length < 1 || measures.length < 1) { return } // 設置一個新度量的空數組 var newMeasures = []; // 循環遍歷選中的度量 for (var i = 0; i < measures.length; i++) { var show = component.config["show_" + i]; console.log(component.config) if (show != null && show === false) { // 結束本次循環（跳過下一步） continue } // push進新度量數組 newMeasures.push(measures[i]) } // console.log(newMeasures) // 新度量數組賦值給初始數組 measures = newMeasures; console.log(option.series.length) console.log(measures.length) } ~~~