效果图
显示效果和echarts官方demo一样，运行速度尚可。
第一次写博客，排版很渣以后慢慢改进。
基础知识
以EchartsGeoMap为例，讲一下怎么制作一个基础的QlikView Extensions。
1.前置技能： 基础dom知识， 基础js知识。能做官方下载的demo到能够在本地运行。能看懂并理解下面的代码就可以了。
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
//维度 //表达式
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(' There was an issue creating the map. Did you forget to set the MapFile? '); } }); } catch (err) { $(mapchart).html(' There was an issue creating the map. Did you forget to set the Extensions? '); } 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(' There was an issue creating the map. Did you forget to set the Expressions? Error Message: ' + err.message + ' '); } } });};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地址：