效果图
显示效果和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=" 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地址：