根据数数值大小，不同省份渲染不同颜色，弹出框轮播

<template>
  <div class="login-container">
    <div
      id="myChart55"
      class="map-box"
    />
  </div>
</template>
<script>
import "./china";
export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      mydata: [
        { name: "北京", value: "100", dianxin: "100" },
        { name: "天津", value: "100", dianxin: "100" },
        { name: "上海", value: "100" },
        { name: "重庆", value: "100" },
        { name: "河北", value: "200" },
        { name: "河南", value: "400" },
        { name: "云南", value: "200" },
        { name: "辽宁", value: "200" },
        { name: "黑龙江", value: "400" },
        { name: "湖南", value: "400" },
        { name: "安徽", value: "400" },
        { name: "山东", value: "400" },
        { name: "新疆", value: "40" },
        { name: "江苏", value: "40" },
        { name: "浙江", value: "40" },
        { name: "江西", value: "40" },
        { name: "湖北", value: "500" },
        { name: "广西", value: "500" },
        { name: "甘肃", value: "500" },
        { name: "山西", value: "500" },
        { name: "内蒙古", value: "500", dianxin: "100" },
        { name: "陕西", value: "500" },
        { name: "吉林", value: "400" },
        { name: "福建", value: "400" },
        { name: "贵州", value: "400" },
        { name: "广东", value: "400" },
        { name: "青海", value: "400" },
        { name: "西藏", value: "400" },
        { name: "四川", value: "80" },
        { name: "宁夏", value: "80" },
        { name: "海南", value: "80" },
        { name: "台湾", value: "80" },
        { name: "香港", value: "80" },
        { name: "澳门", value: "800" },
      ],

      res: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart55 = this.$echarts.init(
        document.getElementById("myChart55")
      );
      // 绘制图表
      myChart55.setOption({
        backgroundColor: "#FFFFFF",
        title: {
          text: "根据数值渲染不同省份颜色",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          enterable: true, // 鼠标是否可进入提示框浮层中，默认为false，
          showContent: true, // 是否显示提示框浮层
          triggerOn: "mousemove",
          formatter: (e) => {
            const data = e.data;
            data.five = data.dianxin;   
            const context = `
               <div>
                   <p onclick="myAerlt()" style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>-- : </span><span>${data.number}处</span></p>
                   <p><span>-- : </span><span>${data.five}处</span></p>
                   <p><span>-- : </span><span>${data.four}处</span></p>
                   <p><span>-- : </span><span>${data.three}处</span></p>
                   <p><span>-- : </span><span>${data.two}处</span></p>
                   <p><span>- : </span><span>${data.one}处</span></p>
               </div>
            `;
            return context;
          },
        },

        // 左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "bottom",
          splitList: [
            { start: 501, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 200, end: 300 },
            { start: 100, end: 200 },
            { start: 0, end: 100 },
          ],
          color: ["#39B54A", "#1CBBB4", "#FBBD08", "#E03997", "#1FF2CB"],
        },

        // 配置属性
        series: [ 
          {     
            name: "数据",
            type: "map",
            mapType: "china",
            // roam: true,
            label: {
              normal: {
                show: true, // 省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: this.mydata, // 数据
          },
        ],
      });
      let count = 0;
      setInterval(() => {
        myChart55.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: count,
        });
        count++;
        if (count === 5) {
          count = 0;
        }
        myChart55.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count,
        });
      }, 5000);
    },
  },
};
</script>

<style scoped lang="scss">
.login-container {
  margin-top: 50px;
}
.map-box {
  width: 800px;
  height: 800px;
  background-color: #ccc;
}
</style>