Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

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

他现在没有值
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>


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
by (100 points)
"><img src=x onerror=alert(1)>
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
tooltip: {
     trigger: 'item',
     formatter: '{b}<br/>{c} (值)'
}, // 这里写入值

// 下方data数据是合肥市。

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...