HT for web 中使用echarts生成地图

295 阅读1分钟

最近刚接触HT编辑器,新手小白,有什么问题请各位大佬指导。

首先给大家上一个echarts示例库,比官网上面的示例多一些,相互补充吧 www.max-logistics.com/tpl/home/de…

在HT编辑器中使用echarts时,如果是柱状图折线图扇形图等,一般只要直接将option对象配置给echarts.option就可以了,但是如果是地图的话,直接配置option却不能正常显示(我也不知道为什么,推测是因为地图需要注册,直接配置option没有完成注册所以不能显示)

所以这是在项目中新建html文件,与需要地图的图纸相关联,即图纸右侧预览地址处填写html文件名称,并在html文件中写如下代码:

        //注册地图,china.json 是全国地图的json文件,文件应该可以再官网上下载
        $.get('utils/china.json', function (china) {
            echarts.registerMap('china', china)
        })
        //ht图纸的初始化代码,必写的
        function init() {
            dataModel = new ht.DataModel();
            graphView = new ht.graph.GraphView(dataModel);
            graphView.addToDOM();

            ht.Default.xhrLoad('displays/图纸名称.json', function (text) {
                var json = ht.Default.parse(text);
                if (json.title) document.title = json.title;
                dataModel.deserialize(json);
                graphView.fitContent(true);
            });
        }

然后再html文件中写下地图的配置项option并

dataModel.getDataByTag('图纸中echarts标签名').a('echarts.option', myChartsOption);

myChartsOption是地图的配置项。

以上,echarts就可以在ht图纸中正常显示啦。