Echarts显示行政区域图并上色

最新推荐文章于 2024-09-05 10:30:15 发布

不要葱花

最新推荐文章于 2024-09-05 10:30:15 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：数据可视化 javascript

本文链接：https://blog.csdn.net/moqiuqin/article/details/116530013

版权

本文介绍如何利用Echarts结合geojson数据在网页中显示行政区域图，并详细说明如何设置属性来实现特定区域的颜色显示。通过示例展示了两种效果：一种是根据属性值自动生成颜色渐变，另一种是为每个行政区域单独指定颜色。

摘要由CSDN通过智能技术生成

Echarts要显示行政区域图有几种方式，这里使用type: 'map'的方式，前提是有geojson数据，这个数据的获取可以从阿里云获取，高德提供的数据

http://datav.aliyun.com/tools/atlas/

选好要展示的行政区域后下载到本地，然后按照官网的demo写就好了，官网默认的方式是根据数值行政区域的颜色自动渐变变化，但有时我们需要对每个行政区域分别显示区域，那么就得依赖dataRange属性了，如下

  async initChart1() {
   
    const dom = document.getElementById('GXChart');
    const myChart = echarts.init(dom);
    const result = await this.http.get('assets/GX.json').toPromise();
    const geoJSON: any = result;
    echarts.registerMap('GX', geoJSON);
    myChart.setOption({
   
      title: {
   
        text: 'XXXX标题',
        textAlign: 'center',
        left: '50%',
      },
      dataRange: {
   
        x: 'right&#