echarts geo 下的regions 单独修改地图省份界线样式与颜色

ECharts中国地图热力图教程

最新推荐文章于 2024-11-04 14:41:10 发布

原创

最新推荐文章于 2024-11-04 14:41:10 发布 · 置顶 · 1.2w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html #es6

本文详细介绍了如何使用ECharts库创建中国地图热力图，包括地图数据的加载、省份颜色定制、点击事件监听及地图样式设置等关键步骤。

废话不多说直接上图片与代码:
1593867638(1).jpg

import echarts from 'ecahrts'; // 引入echarts文件
import "./china"  // 引入中国js文件

const chartsChina = (that, el, chartData, Fun = () =>{} ) => {
    that.chart = echarts.init(document.getElementById(el);
    that.chart.on('click', function(params) { // 通过ecahrts的点击事件,将点击的信息传给函数 Fun;
        Fun(params);
    }
    chartData = [
        {
            name:"广东省",
            coord: [ 113.12244, 23.009505 ],
            value: 1
        }
    ]
    const convertData = function(data) { // 根据数据设置地图圆点的颜色
       let res = [];
       for(var i = 0; i < data.length; i++) {
          res.push({
              name: data[i].name;
              value: data[i].coord,  // 坐标
              data:  data[i].value,
              itemStyle: {
                  normal:{ color: data[i].value == "1" ? "#0090FF" : data[i].value == "2" ? "#E59800" :  "#F24949" }
              }
            });
         }
        return res;
    }

     option = {
                backgroundColor: '#000',
                title: {
                    top: 20,
                    text: '中国地图',
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#ccc'
                    }
                },
                legend: {
                    show: false