参考资料:http://gallery.echartsjs.com/editor.html?c=xHJxewNZdW
angluar 封装的 Echarts,基本上是按照这个思路写的
在xx.model.ts 文件中添加依赖
import {NgxEchartsModule, NgxEchartsService} from 'ngx-echarts'; @NgModule({ providers: [NgxEchartsService], imports: [ /*echars依赖*/ NgxEchartsModule ], ... })
在 main.component.ts 文件中添加
import {NgxEchartsService} from 'ngx-echarts'; export class MainComponent (){ // HttpClient from '@angular/common/http' constructor( private http: HttpClient ,private nes: NgxEchartsService) {} ngOnInit() { // 初始化对象 const echarts = this.nes.echarts; // 获取广东地图的json文件 this.http.get('assets/json/gd.json') .subscribe( geoJson => { var myChart = echarts.init(document.getElementById('gdMap')) // 注册地图 echarts.registerMap('广东', geoJson); myChart.setOption( // js中不需要加 echarts. echarts.option = this.option ); }, error1 => { console.log(error1); }, () => { console.log('初始化地图已完成。'); } ); } option = this.opt(1350, 160, '人口', '万', true, false); opt(max, min, vmp, unit, flag1, flag2) { var optn = { title: { text: '广东省', subtext: '更新时间 2018/05/29', left: 'center', textStyle: { color: '#000' } }, legend: { orient: 'vertical', left: 'left', data: ['人口'], selectedMode: 'single', selected: { '人口': flag1, } }, visualMap: { min: min, max: max, text: [vmp, '单位:' + unit], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, tooltip: { formatter: function(params) { return params.name + ": " + params.value + unit; } }, series: [{ name: '人数', type: 'map', map: '广东', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: [{ name: '广州市', value: 1350 }, { name: '深圳市', value: 1190 }, { name: '惠州市', value: 167 }, { name: '汕头市', value: 555 }, { name: '佛山市', value: 743 }, { name: '韶关市', value: 293 }, { name: '惠州', value: 500 }] }] }; return optn; } }
在 main.component.html 添加
<div style="width: 1000px; height: 1000px; " id="gdMap"></div>
也可以这样
<div echarts [options]="option" [loading]="showloading" class="demo-chart"></div>
新增:关于自定义地图上的点
http://www.echartsjs.com/gallery/editor.html?c=doc-example/scatter-visualMap-piecewise
获取经纬度
http://api.map.baidu.com/lbsapi/getpoint/index.html
扫描二维码关注公众号,回复:
1115988 查看本文章