在angular7中使用echarts的線性地圖的時候，發現出來縮成了一團，暫未找到解決方案。但是在普通的html中直接引入并使用是沒有問題的。因此，轉換了思路，使用iframe來加載外部的html，因為在外部html中是正常的。
將正常的html頁面放到angular項目的assets下面，然后在angular組件中通過iframe動態引入。這樣就可以正常顯示了。數據請求可以單獨放到頁面中。
靜態html頁面及目錄
html內容：和echarts官網案例一樣
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="china.js" type="text/javascript" charset="utf-8"></script></head><body>df<div id="map" style="width: 1000px; height: 600px; border: 1px solid red;"></div><script src="./axios.min.js"></script><script type="text/javascript">// ajax數據請求，使用的是axios， 也可以通過本地存儲進行傳遞數據console.log(axios.get('http://api.komavideo.com/news/list').then(data => {console.log(data);}));var chinaGeoCoordMap = {'黑龍江': [127.9688, 45.368],'內蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京市': [116.4551, 40.2539],"遼寧": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陜西": [109.1162, 34.2004],"甘肅": [103.5901, 36.3043],"寧夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重慶": [108.384366, 30.439702],"山東": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江蘇": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"貴州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"廣東": [113.12244, 23.009505],"廣西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891]};var chinaDatas = [[{name: '黑龍江',value: 0}],[{name: '內蒙古',value: 0}],[{name: '吉林',value: 0}],[{name: '遼寧',value: 0}],[{name: '河北',value: 0}],[{name: '天津',value: 0}],[{name: '山西',value: 0}],[{name: '陜西',value: 0}],[{name: '甘肅',value: 0}],[{name: '寧夏',value: 0}],[{name: '青海',value: 0}],[{name: '新疆',value: 0}],[{name: '西藏',value: 0}],[{name: '四川',value: 0}],[{name: '重慶',value: 0}],[{name: '山東',value: 0}],[{name: '河南',value: 0}],[{name: '江蘇',value: 0}],[{name: '安徽',value: 0}],[{name: '湖北',value: 0}],[{name: '浙江',value: 0}],[{name: '福建',value: 0}],[{name: '江西',value: 0}],[{name: '湖南',value: 0}],[{name: '貴州',value: 0}],[{name: '廣西',value: 0}],[{name: '海南',value: 0}],[{name: '上海',value: 1}]];var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = chinaGeoCoordMap[dataItem[0].name];var toCoord = [116.4551, 40.2539];if (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord,}]);}}return res;};var series = [];[['北京市', chinaDatas]].forEach(function(item, i) {series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭頭指向速度，值越小速度越快trailLength: 0.02, //特效尾跡長度[0,1]值越大，尾跡越長重symbol: 'arrow', //箭頭圖標symbolSize: 5, //圖標大小},lineStyle: {normal: {width: 1, //尾跡線條寬度opacity: 1, //尾跡線條透明度curveness: .3 //尾跡線條曲直度}},data: convertData(item[1])}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { //漣漪特效period: 4, //動畫時間，值越小速度越快brushType: 'stroke', //波紋繪制方式 stroke, fillscale: 4 //波紋圓環最大限制，值越大波紋越大},label: {normal: {show: true,position: 'right', //顯示位置offset: [5, 0], //偏移設置formatter: function(params) { //圓環顯示文字return params.data.name;},fontSize: 13},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 5 + val[2] * 5; //圓環大小},itemStyle: {normal: {show: false,color: '#f00'}},data: item[1].map(function(dataItem) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])};}),},//被攻擊點{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: true,position: 'right',//offset:[5, 0],color: '#0f0',formatter: '{b}',textStyle: {color: "#0f0"}},emphasis: {show: true,color: "#f60"}},symbol: 'pin',symbolSize: 50,data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),}],});});option = {tooltip: {trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0.82)',borderColor: '#FFFFCC',showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: 'z-index:100',formatter: function(params, ticket, callback) {//根據業務自己拓展要顯示的內容var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1];res = "<span style='color:#fff;'>" + name + "</span><br/>數據：" + value;return res;}},backgroundColor: "#013954",visualMap: { //圖例值控制min: 0,max: 1,calculable: true,show: true,color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],textStyle: {color: '#fff'}},geo: {map: 'china',zoom: 1,label: {emphasis: {show: false}},roam: true, //是否允許縮放itemStyle: {normal: {color: 'rgba(51, 69, 89, .5)', //地圖背景色borderColor: '#516a89', //省市邊界線00fcff 516a89borderWidth: 1},emphasis: {color: 'rgba(37, 43, 61, .5)' //懸浮背景}}},series: series};const dom = document.getElementById('map');const x = echarts.init(dom);setTimeout(function() {x.setOption(option);}, 1000);function childMethod(){var component = window['child'];component.check();}</script></body>
</html>
angular組件home.component.ts
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {url = 'http://localhost:4200/assets/html/index.html';// url = 'http://192.168.1.112:8888/assets/html/index.html';videoUrl: SafeResourceUrl;constructor(private sanitizer: DomSanitizer) {this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);}ngOnInit() {console.log(this.videoUrl);}}
angular組件home.component.html
<div class="map"><iframe class="ql-video" frameborder="0" allowfullscreen="true" [src]="videoUrl"width="1000" height="600"scrolling="no"></iframe>
</div>
效果
總結
以上是生活随笔為你收集整理的angular7中使用iframe来加载外部页面的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
