echarts的map图怎么做设置城市的属性?

soulninu
  • 66

他现在没有值
image.png
在data中试了
安徽|合肥,安徽|合肥市,合肥,合肥市,都不管使。这是有特定的格式吗?

本页代码:

<template>
  <div class="xxx">
    <div :style="{ height: '100vh', width: '100%' }" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
//   import '../../node_modules/echarts/map/js/world.js'
// import "../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import "../../node_modules/echarts/map/js/province/anhui.js"; // 引入中国省份数据
export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      console.log(this.userJson);
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "#02AFDB",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"],
        },
        geo: {
          // 这个是重点配置区
          map: "安徽", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "安徽|合肥市",
                value: 599,
              },
              {
                name: "淮南",
                value: 142,
              },
              {
                name: "芜湖",
                value: 44,
              },
              {
                name: "阜阳",
                value: 92,
              },
              {
                name: "黄山",
                value: 810,
              },
              {
                name: "滁州",
                value: 453,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

回复
阅读 1.7k
1 个回答
tooltip: {
     trigger: 'item',
     formatter: '{b}<br/>{c} (值)'
}, // 这里写入值

// 下方data数据是合肥市。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏