效果圖
顯示效果和echarts官方demo一樣，運行速度尚可。
第一次寫博客，排版很渣以后慢慢改進。
基礎知識
以EchartsGeoMap為例，講一下怎么制作一個基礎的QlikView Extensions。
1.前置技能： 基礎dom知識， 基礎js知識。能做官方下載的demo到能夠在本地運行。能看懂並理解下面的代碼就可以了。
<html> <head> <script src="./lib/js/jquery.min.js"></script> <script src="./lib/js/echarts.js"></script> <script type="text/javascript"> $(function () { var myChart = echarts.init(document.getElementById('container')); myChart.showLoading(); $.get('./lib/maps/HK_geo.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('HK', geoJson); myChart.setOption(option = { tooltip: { trigger: 'item', formatter: '{b}<br/>{c} (p / km2)' }, toolbox: { show: true, left: 'left', top: 'top', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, visualMap: { min: 800, max: 50000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: '香港18區人口密度', type: 'map', mapType: 'HK', // 自定義擴展圖表類型 selectedMode: 'multiple', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: [ { name: '中西區', value: 20057.34 }, { name: '灣仔', value: 15477.48 }, { name: '東區', value: 31686.1 }, { name: '南區', value: 6992.6 }, { name: '油尖旺', value: 44045.49 }, { name: '深水埗', value: 40689.64 }, { name: '九龍城', value: 37659.78 }, { name: '黃大仙', value: 45180.97 }, { name: '觀塘', value: 55204.26 }, { name: '葵青', value: 21900.9 }, { name: '荃灣', value: 4918.26 }, { name: '屯門', value: 5881.84 }, { name: '元朗', value: 4178.01 }, { name: '北區', value: 2227.92 }, { name: '大埔', value: 2180.98 }, { name: '沙田', value: 9172.94 }, { name: '西貢', value: 3368 }, { name: '離島', value: 806.98 } ], // 自定義名稱映射 date→nameMap→geoJson nameMap: { 'Central and Western': '中西區', 'Eastern': '東區', 'Islands': '離島', 'Kowloon City': '九龍城', 'Kwai Tsing': '葵青', 'Kwun Tong': '觀塘', 'North': '北區', 'Sai Kung': '西貢', 'Sha Tin': '沙田', 'Sham Shui Po': '深水埗', 'Southern': '南區', 'Tai Po': '大埔', 'Tsuen Wan': '荃灣', 'Tuen Mun': '屯門', 'Wan Chai': '灣仔', 'Wong Tai Sin': '黃大仙', 'Yau Tsim Mong': '油尖旺', 'Yuen Long': '元朗' } } ] }); }); myChart.on('click', function (params) { alert(params.seriesName); alert(params.name); alert(params.value); }); }) </script> </head> <body> <div id="container" style="width: 600px; height: 600px; margin: 0 auto"></div> </body> </html>
2.QlikView Extensions基礎知識
目錄結構
lib/js //引用的js文件 ( jquery3，echarts3 )
lib/maps //地圖數據 ( 省份地圖數據來自dataV.js項目 )
Definition.xml //qv中右鍵配置；文件名不能改
Icon.png //插件圖標；文件名不能改
Script.js //自定義腳本；文件名不能改
1.以上文件最后要打包在qar中，以后在用戶機器上安裝。目前還沒找到官方的方法，我是用winrar打開官方的qar包，把文件替換掉。
2.webview模式會使用ie瀏覽器內核。
開始
1.Definition.xml
<?xml version="1.0" encoding="gb2312"?> <ExtensionObject Path="EChartsGeoMap" //插件路徑 Label="EChartsGeoMap" //插件名稱 Description="EChartsGeoMap" //插件描述 Type="object"> <Dimension Label="Dimension" Initial=""/> //維度 <Measurement Label="Expression" Initial="" /> //表達式
<!--設置參數；Expression="" 設置默認值--> <Text Label="MapFile" Type="text" Initial="" Expression="china"/> <Text Label="Color(L;N;U)" Type="text" Initial="" Expression="lightskyblue;yellow;orangered"/> <Text Label="Color Piecewise" Type="text" Expression="0"/> <Text Label="Color Piecewise(L;U)" Type="text" Initial="" Expression="80;100"/> </ExtensionObject>
DynProperties.qvpp會在啟動qv時根據以上xml自動生成。
2.Script.js
/*! echartsGeoMap v1.0 | MyronJi | */ function EChartsGeoMap_Init() { if (document.charset) { document.charset = 'utf-8'; //更改頁面編碼 } Qva.AddExtension("EChartsGeoMap", function () { //注冊插件，這里的名字要和xml中的name相同 var _this = this; _this.ExtSettings = {}; _this.ExtSettings.ExtensionName = 'EChartsGeoMap'; _this.ExtSettings.LoadUrl = Qva.Remote + (Qva.Remote.indexOf('?') >= 0 ? '&' : '?') + 'public=only' + '&name='; //獲取插件目錄路徑 var mapPath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/maps'; var imagePath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/images'; //Array to hold the js libraries to load up. var jsFiles = []; //pushing the js files to the jsFiles array jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/jquery.min.js'); jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/echarts.min.js'); //get qv value var mapData = []; var maxValue = 0; var minValue = 50; var colorParameter = []; try { d = _this.Data //_this.Data.Rows[i][j].text,這是獲取xml中維度和表達式的方法。 for (var i = 0; i < d.Rows.length; i++) { var r = d.Rows[i]; obj = { name: r[0].text, value: parseFloat(r[1].text) }; if (maxValue < obj.value) { maxValue = obj.value }; if (minValue > obj.value) { minValue = obj.value }; mapData.push(obj); } var mapFile = _this.Layout.Text0.text.toString(); //這是獲取xml中設置參數的方法。 var colors = _this.Layout.Text1.text.split(';'); var colorType = _this.Layout.Text2.text.toString(); var Piecewise_Lower = parseFloat(_this.Layout.Text3.text.split(';')[0]); var Piecewise_Upper = parseFloat(_this.Layout.Text3.text.split(';')[1]); //set default value if ('' == maxValue) maxValue = 100; if ('' == minValue) minValue = 0; if ('' == colors) colors = ['lightskyblue', 'yellow', 'orangered']; if ('' == colorType) colorType = 0; //set colorParameter if (colorType == 0) { colorParameter = { type: 'continuous', min: minValue, max: maxValue, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: colors,//['lightskyblue','yellow', 'orangered'], symbolSize: [30, 100] } } } else { colorParameter = { type: 'piecewise', pieces: [ { min: Piecewise_Upper, color: colors[2] }, { min: Piecewise_Lower, max: Piecewise_Upper, color: colors[1] }, { max: Piecewise_Lower, color: colors[0] } ], left: 'left', top: 'bottom' } } //Loading up the js files via the QlikView api that allows an array to be passed. //After we load them up successfully, initialize the chart settings and append the chart Qv.LoadExtensionScripts(jsFiles, function () { //載入jsFiles array中的文件 InitSettings(); Init(); if ('' != mapFile) { //空值判斷，以免報錯 InitChart(mapFile, mapData, maxValue, minValue); } else { $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the MapFile?</div> '); } }); } catch (err) { $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the Extensions?</div> '); } function InitSettings() { _this.ExtSettings.UniqueId = _this.Layout.ObjectId.replace('\\', '_'); //獲取qv對象id } function Init() { $(_this.Element).empty(); mapchart = document.createElement("div"); //創建地圖容器 $(mapchart).attr('id', 'Chart_' + _this.ExtSettings.UniqueId); $(mapchart).height('100%'); $(mapchart).width('100%'); $(_this.Element).append(mapchart); } function InitChart(mapFile, mapData, maxValue, minValue) { try { var myChart = echarts.init(document.getElementById('Chart_' + _this.ExtSettings.UniqueId)); myChart.showLoading(); $.ajaxSetup({ async: false }); $.get(_this.ExtSettings.LoadUrl + 'Extensions/EChartsGeoMap/lib/maps/' + mapFile + '.json').done(function (geoJson) { myChart.hideLoading(); echarts.registerMap(mapFile, geoJson); option = { tooltip: { trigger: 'item' }, toolbox: { show: true, left: 'left', top: 'top', feature: { dataView: { readOnly: false } } }, visualMap: colorParameter, series: [ { name: 'data', type: 'map', mapType: mapFile, selectedMode: 'multiple', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: mapData } ] }; myChart.setOption(option); }); //ckick myChart.on('click', function (params) { _this.Data.SelectRow(params.dataIndex); //單擊地圖會選中當前維度中值。 }); } catch (err) { if (typeof map != 'undefined') { map.remove(); } $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the Expressions?<br/><br/><b>Error Message:</b><br />' + err.message + '</div> '); } } }); }; EChartsGeoMap_Init();
qv向插件傳值的時候會把維度和表達式的值組合成一個數組傳到js中。
this.Data.Rows對應xml中的維度和表達式。[i][j].text，i代表行號，j 代表列號。
設置值會打包成另一個數組傳進來。
_this.Layout.Text0.text.toString()中的Text0對應xml中的 <Text Label="MapFile" Type="text" Initial="" Expression="china"/>
源代碼
最后附上github地址：