ECharts中Map(地图)样式配置、渐变色生成

码客说

发布于 2024-03-29 13:00:28

2390

发布于 2024-03-29 13:00:28

文章被收录于专栏：码客码客

前言

ECharts是我们常用的图表控件，功能特别强大，每次使用都要查API比较繁琐，这里就记录开发中常用的配置。

官网：https://echarts.apache.org/handbook/zh/get-started

配置项：https://echarts.apache.org/zh/option.html#title

第三方示例平台：https://www.makeapie.cn/echarts

主题：https://echarts.apache.org/zh/theme-builder.html

样式

示例

配置

let option = {
    tooltip: {
      show: true,
      formatter: function (params) {
        if (params.value.length > 1) {
          return "&nbsp;&nbsp;" + params.name + "：" + params.value[2];
        } else {
          return "&nbsp;&nbsp;" + params.name + "：" + (params.value || 0);
        }
      },
    },
    geo: {
      map: "china",
      zoom: 1.2,
      show: true,
      roam: false,
      emphasis: {
        label: {
          show: false,
        },
      },
      layoutSize: "100%",
      itemStyle: {
        borderColor: "rgba(147, 235, 248, 1)",
        borderWidth: 2,
        shadowColor: "rgb(90,160,234)",
        shadowOffsetX: 0,
        shadowOffsetY: 10,
        shadowBlur: 10,
      },
    },
    visualMap: {
      show: false,
      seriesIndex: [0],
      inRange: {
        color: ["#8db1f1", "#026aa9"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.75,
        zoom: 1.2,
        label: {
          show: true,
          color: "#ffffff",
        },
        itemStyle: {
          borderColor: "rgba(147, 235, 248, 1)",
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.9,
            colorStops: [
              {
                offset: 0,
                color: "rgba(17,217,245,0.5)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(10,209,231,0.2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: false,
            color: "#ffffff",
          },
          itemStyle: {
            areaColor: "#026aa9",
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        data: allData,
      },
    ],
};

层级

地图的配置是一层盖一层，从底层到顶层的配置依次为：

geo => series => visualMap

geo 和 series 中都有两个配置项

itemStyle 未选中的样式
emphasis 选中的样式

geo隐藏掉只有series也是能正常显示整个地图的。

geo 和 series 的搭配可以实现一些阴影，偏移从而实现类似立体的效果。

visualMap

其中visualMap设置的背景颜色是动态的，会根据数值的大小在两个颜色之间变化。

visualMap: {
  show: false,
  seriesIndex: [0],
  inRange: {
    color: ["#cdcaf8", "#026aa9"],
  },
},

需要注意的是：

当区域有数据的时候会使用visualMap的颜色覆盖，如果没有数据则会使用series的itemStyle的样式。

默认最小值和最大值会根据数据自动计算，当然我们也可以指定具体的值。

visualMap: {
    min: 0,
    max: 100,
    inRange: {
        color: ['#e0ffff', '#0066ff'] // 设置颜色范围，浅色到深色
    },
    calculable: true,
    show: true
},

渐变色

线性渐变

沿着一条直线从一种颜色过渡到另一种颜色。

{
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#8db1f1", // 起始颜色
      },
      {
        offset: 1,
        color: "#026aa9", // 终止颜色
      },
    ],
}

径向渐变

从一个中心点向四周辐射的渐变色。

{
    type: 'radial',
    x: 0.5, 
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'rgba(255, 0, 0, 1)' // 起始颜色
    }, {
        offset: 1, color: 'rgba(0, 0, 255, 1)' // 终止颜色
    }]
}

你可以设置以下属性：

type：设置渐变的类型，固定值为 ‘radial’。
x、y：设置渐变的中心点坐标，取值范围为 0~1，其中 (0, 0) 表示左上角，(1, 1) 表示右下角。
r：设置渐变的半径，也是相对于整个绘图区域的半径，取值范围为 0~1，1 表示半径等于绘图区域的最短边的一半。
colorStops：设置渐变的起始颜色、终止颜色以及它们的位置。它是一个数组，每个元素包含两个属性，分别是 offset 和 color。其中 offset 表示该位置距离渐变位置的百分比，取值范围为 0~1，color 则是该位置所对应的颜色值。

覆盖散点

涟漪散点

series: [
  {
    type: "map",
    map: "china",
    aspectScale: 0.75,
    zoom: 1.2,
    label: {
      show: true,
      color: "#11688a",
    },
    itemStyle: {
      areaColor: "rgba(10,76,139,1)",
      borderColor: "#215495",
      borderWidth: 1,
    },
    emphasis: {
      label: {
        show: false,
      },
      itemStyle: { areaColor: "#061E3D" },
    },
    data: allData,
  },
  {
    type: "effectScatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.2)",
          },
          {
            offset: 0.8,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 1,
            color: "rgba(0,108,255,0.7)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
  },
],

其中

let convertData = function (outdata) {
    let res = [];
    for (let i = 0; i < outdata.length; i++) {
      let geoCoord = geoCoordMap[outdata[i].name];
      if (geoCoord) {
        res.push({
          name: outdata[i].name,
          value: geoCoord.concat(outdata[i].value),
        });
      }
    }
    return res;
};

值类似于

{
    name : "河南",
    value: [113.0668, 33.8818, 140]
}

普通散点

{
    type: "scatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 0.5,
            color: "rgba(0,108,255,0.7)",
          },
          {
            offset: 1,
            color: "rgba(5,80,151,0.2)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
},

放射线

示例

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }
      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],
      };
      let 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,
          },
        ],
      ];
      let allpoints = Object.values(chinaGeoCoordMap);

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = chinaGeoCoordMap[dataItem[0].name];
          let toCoord = allpoints[Math.floor(Math.random() * allpoints.length)];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };
      var series = [];
      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: 0.3, //尾迹线条曲直度
              color: "#17F5FF",
            },
          },
          data: convertData(chinaDatas),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              fontSize: 10,
              color: "#FFFFFF",
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#17F5FF",
            },
          },
          data: chinaDatas.map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value,
              ]),
            };
          }),
        }
      );

      let option = {
        tooltip: {
          show: false,
          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) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
                name +
                "</span><br/>数据：" +
                value || 0;
            return res;
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", //地图背景色
              borderColor: "#516a89", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
        },
        series: series,
      };
      this.chart.setOption(option);
    },
  },
};
</script>

背景变色

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }

      let dataList = [
        {
          name: "重庆",
          value: 347,
        },
        {
          name: "浙江",
          value: 59,
        },
        {
          name: "云南",
          value: 115,
        },
        {
          name: "新疆维吾尔自治区",
          value: 45,
        },
        {
          name: "香港",
          value: 81,
        },
        {
          name: "西藏自治区",
          value: 5,
        },
        {
          name: "天津",
          value: 121,
        },
        {
          name: "四川",
          value: 23,
        },
        {
          name: "上海",
          value: 1140,
        },
        {
          name: "陕西",
          value: 143,
        },
        {
          name: "山西",
          value: 77,
        },
        {
          name: "山东",
          value: 209,
        },
        {
          name: "青海",
          value: 3,
        },
        {
          name: "宁夏回族自治区",
          value: 1,
        },
        {
          name: "内蒙古自治区",
          value: 7,
        },
        {
          name: "辽宁",
          value: 386,
        },
        {
          name: "江西",
          value: 67,
        },
        {
          name: "江苏",
          value: 464,
        },
        {
          name: "湖南",
          value: 6,
        },
        {
          name: "湖北",
          value: 614,
        },
        {
          name: "黑龙江",
          value: 53,
        },
        {
          name: "河南",
          value: 140,
        },
        {
          name: "河北",
          value: 190,
        },
        {
          name: "海南",
          value: 24,
        },
        {
          name: "贵州",
          value: 2,
        },
        {
          name: "广西壮族自治区",
          value: 77,
        },
        {
          name: "广东",
          value: 449,
        },
        {
          name: "甘肃",
          value: 7,
        },
        {
          name: "福建",
          value: 23,
        },
        {
          name: "北京",
          value: 603,
        },
        {
          name: "安徽",
          value: 29,
        },
      ];

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return "&nbsp;&nbsp;" + params.name + "：" + params.value[2];
            } else {
              return "&nbsp;&nbsp;" + params.name + "：" + (params.value || 0);
            }
          },
        },
        visualMap: {
          show: false,

          seriesIndex: [0],
          inRange: {
            color: ["#A5DCF4", "#006edd"],
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutSize: "100%",
          itemStyle: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 2,
              shadowColor: "rgba(10,76,139,1)",
              shadowOffsetY: 0,
              shadowBlur: 60,
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                color: "#4dccff",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#073684", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#061E3D", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#215495",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#061E3D",
              },
            },
            data: dataList,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-07，如有侵权请联系 cloudcommunity@tencent.com 删除

地图