echarts+vue2实战(一)

一、项目准备

二、(横向分页)柱状图

2.1、动态刷新

2.2、UI调整

2.3、分辨率适配

三、(竖向平移)柱状图

3.1、平移动画

3.2、不同数值显示不同颜色

四、(下拉切换)折线图

4.1、切换图表和分辨率适配

4.2、UI调整

五、(三级分类)饼图

5.1、数据切换

六、圆环饼图

6.1、切换动画

七、地图+散点图

7.1、地图上显示散点

7.2、点击出现单个省份，双击复原

一、项目准备

服务器数据获取链接：电商: 电商数据可视化配套素材

B站链接：57_前端项目_销量趋势图表_通用代码结构_哔哩哔哩_bilibili

下载下来的文件里面用‘第三天=>代码’项目启动：cmd进入文件夹下npm init -y,然后npm i koa（koa是基于node.js的另一个框架，和Express差不多），直接node app.js即可，终端没有响应就代表启动正常了，在浏览器上输入"http://127.0.0.1:8888/api/seller"可以看到数据.

vue2项目的main.js里：

import './assets/less/global.less';//引入全局的样式文件
import './assets/font/iconfont.css';//引入字体的样式文件
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/';
Vue.prototype.$http = axios;
import echarts from "echarts";
Vue.prototype.$echarts = echarts;//挂载到原型，可以在全局使用

核心功能：屏幕适配【screenAdapter()】、全屏切换、实时监测【WebSocket】

二、(横向分页)柱状图

代码如下：

<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json";//自己下载
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      currentPage: 1,
      totalPage: 0, //一共多少页
      timeId: null, //定时器标识
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter(); //得先主动适配屏幕
    //最原始的Option现在被拆分为initOption、dataOption、adapterOption三部分，各司其职
  },
  destroyed() {
    clearInterval(this.timeId);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartsInstance对象
    initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.seller_ref, "chalk");//主题
      //   对图表初始化配置的控制
      const initOption = {
        //' ▎'这个标记在搜狗输入法上右键，里面的“符号大全”里有
        title: {
          text: "▎商家销售统计",
          left: 20,
          top: 20,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, //距离是包含坐标轴上的文字
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        tooltip: {
          //划过提示
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#314055",
            },
          },
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "white",
              },
            },
            itemStyle: {
            //   barBorderRadius: [0, 33, 33, 0],
              // 指明颜色渐变的方向和不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052EE",
                },
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      //   鼠标移入图表中停止更新，移出则继续更新
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    // 获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get("seller");//axios调接口
      this.allData = ret;
      this.allData.sort((a, b) => {
        return a.value - b.value; //从小到大进行排序
      });
      this.totalPage =
        this.allData.length % 5 == 0
          ? this.allData.length / 5
          : this.allData.length / 5 + 1; //5个元素一页
      this.updateChart();
      this.startInterval();
    },
    // 更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      const showData = this.allData.slice(start, end);
      const sellerNames = showData.map((item) => {
        return item.name;
      });
      const sellerValues = showData.map((item) => {
        return item.value;
      });
      const dataOption = {
        yAxis: {
          data: sellerNames,
        },
        series: [
          {
            data: sellerValues,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 动态刷新
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          //边界值判断
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize(); //手动调用图表对象的resize()才能生效
    },
  },
};
</script>

代码讲解：

2.1、动态刷新

(1)、处理数据：接口返回的数据共15条，每5个元素为一页，通过定时器让currentPage++来实现数据的变化；

(2)、触发时机：echarts自带的事件mouseover、mouseout来开启/停止定时器；

(3)、边界值处理：当currentPage > totalPage时就是边界了，此时currentPage = 1;

2.2、UI调整

柱子宽度：barWidth、柱子上的文字：label、柱子圆角：itemStyle.barBorderRadius；颜色渐变：itemStyle.color加LinearGradient、柱子划过提示：tooltip；

横向渐变原理图：

2.3、分辨率适配

(1)、监听浏览器窗口变化 window.addEventListener("resize", this.screenAdapter);

(2)、根据原始窗口宽度计算一个变化值this.$refs.seller_ref.offsetWidth，将配置(fontSize、width、barWidth、barBorderRadius等)里的具体数字改为适配值

(3)、手动调用图表对象的resize()就OK了

三、(竖向平移)柱状图

代码如下：

<template>
  <div class="com-container">
    <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      startValue: 0, //区域缩放的起点值
      endValue: 9, //区域缩放的终点值
      timeId: null,
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    clearInterval(this.timeId);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartsInstance对象
    initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.rank_ref, "chalk");
      const initOption = {
        title: {
          text: "▎地区销售排行",
          left: 20,
          top: 20,
        },
        grid: {
          top: "40%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true, //文字在位置范围内
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      //   鼠标移入图表中动画停止，移出则动画继续
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    // 获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get("rank");
      this.allData = ret;
      this.allData.sort((a, b) => {
        return b.value - a.value; //从大到小进行排序
      });
      this.updateChart();
      this.startInterval();
    },
    // 更新图表
    updateChart() {
      const colorArr = [
        ["#0BA82C", "#4FF778"],
        ["#2E72BF", "#23E5E5"],
        ["#5052EE", "#AB6EE5"],
      ];
      const provinceArr = this.allData.map((item) => {
        return item.name;
      });
      const valueArr = this.allData.map((item) => {
        return item.value;
      });
      const dataOption = {
        xAxis: {
          data: provinceArr,
        },
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue,
        },
        series: [
          {
            data: valueArr,
            itemStyle: {
              color: (arg) => {
                //不同数值显示不同颜色
                let targetColorArr = null;
                if (arg.value > 230) {
                  targetColorArr = colorArr[0];
                } else if (arg.value > 200) {
                  targetColorArr = colorArr[1];
                } else {
                  targetColorArr = colorArr[2];
                }
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: targetColorArr[0],
                  },
                  {
                    offset: 1,
                    color: targetColorArr[1],
                  },
                ]);
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 平移动画效果
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }
      this.timeId = setInterval(() => {
        this.startValue++;
        this.endValue++;
        if (this.endValue > this.allData.length - 1) {
          this.startValue = 0;
          this.endValue = 9;
        }
        this.updateChart();
      }, 2000);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      const titleFontSize = (this.$refs.rank_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

3.1、平移动画

共21条数据，一次性展示10条数据，借助定时器，每间隔一段时间向左移动一天数据，本质就是控制dataZoom的startValue和endValue

3.2、不同数值显示不同颜色

在itemStyle.color的回调函数里可以依次拿到所有结果，根据自己的需求返回不同颜色即可，渐变色就自定义二维数组即可

四、(下拉切换)折线图

代码如下：

<template>
  <div class="com-container">
    <div
      class="title"
      :style="{
        fontSize: `${titleFontSize}px`,
      }"
    >
      <span>{{ "▎" + showTitle }}</span>
      <!-- 下拉箭头 -->
      <span
        class="iconfont title-icon"
        :style="{
          fontSize: `${titleFontSize}px`,
        }"
        @click="showChoice = !showChoice"
        >&#xe6eb;</span
      >
      <div class="select-con" v-show="showChoice" :style="marginStyle">
        <div
          class="select-item"
          v-for="item in selectType"
          :key="item.key"
          @click="handleSelect(item.key)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json";
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      showChoice: false, //是否显示可选项
      choiceType: "map", //显示的后台数据类型(map、seller、commodity等)
      titleFontSize: 0, //指明标题的字体大小
    };
  },
  computed: {
    selectType() {
      if (!this.allData) {
        return [];
      } else {
        return this.allData.type.filter((item) => {
          return item.key != this.choiceType;
        });
      }
    },
    showTitle() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.choiceType].title;
      }
    },
    marginStyle() {
      return {
        marginLeft: this.titleFontSize / 2 + "px",
      };
    },
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    clearInterval(this.timeId);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartsInstance对象
    initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.trend_ref, "chalk");
      const initOption = {
        grid: {
          left: "3%",
          top: "35%",
          right: "4%",
          bottom: "1%",
          containLabel: true, //文字在位置范围内
        },
        tooltip: {
          trigger: "axis", //工具提示
        },
        legend: { right: 20, top: "15%", icon: "circle" }, //图例位置和形状
        xAxis: {
          type: "category",
          boundaryGap: false, //紧挨边缘
        },
        yAxis: {
          type: "value",
        },
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get("trend");
      this.allData = ret;
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      const colorArr1 = [
        "rgba(255,151,175,0.5)",
        "rgba(126,248,209,0.5)",
        "rgba(244,247,157,0.5)",
        "rgba(116,201,251,0.5)",
        "rgba(247,199,164,0.5)",
      ]; //半透明颜色值
      const colorArr2 = [
        "rgba(255,151,175,0)",
        "rgba(126,248,209,0)",
        "rgba(244,247,157,0)",
        "rgba(116,201,251,0)",
        "rgba(247,199,164,0)",
      ]; //全透明颜色值
      const timeArr = this.allData.common.month; //类目轴数据
      const valueArr = this.allData[this.choiceType].data;
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          stack: this.choiceType, //堆叠图
          areaStyle: {
            //区域面积、颜色渐变
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[index],
              },
              {
                offset: 1,
                color: colorArr2[index],
              },
            ]),
          },
        };
      }); //y轴数据
      const legendArr = valueArr.map((item) => {
        return item.name;
      }); //图例数据
      const dataOption = {
        xAxis: {
          data: timeArr,
        },
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        legend: {
          //图例和文字大小适配
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemFap: this.titleFontSize,
          textStyle: {
            fontSize: this.titleFontSize / 2,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    handleSelect(currentType) {
      this.choiceType = currentType;
      this.updateChart();
      this.showChoice = false;
    },
  },
};
</script>
<style lang='less' scoped>
.title {
  position: absolute;
  left: 240px;
  top: 20px;
  z-index: 10;
  color: white;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-on {
    background-color: #222733;
  }
}
</style>

代码讲解：

4.1、切换图表和分辨率适配

(1)、可选项：下拉出现列表，列表过滤掉已选择数据，选中后更新数据，列表消失；

(2)、通过全局变量this.titleFontSize给图例、标题、下拉选择项的字体大小进行设置，视图里的样式适配：fontSize: `${titleFontSize}px`

4.2、UI调整

坐标轴设置：grid、紧挨边缘：xAxis.boundaryGap、图例位置和形状：legend、区域面积和颜色渐变：itemStyle.color加LinearGradient、工具提示：tooltip；

区域面积颜色渐变原理图：

图例注意事项：

五、(三级分类)饼图

代码如下：

<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <!-- 左右箭头 -->
    <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <!-- 一级标题 -->
    <span class="cat-name" :style="comStyle">{{ catName }}系列</span>
  </div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      currentIndex: 0, //一级分类的下标
      titleFontSize: 0,
    };
  },
  computed: {
    catName() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.currentIndex].name;
      }
    },
    comStyle() {
      return {
        fontSize: `${this.titleFontSize}px`,
      };
    },
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartsInstance对象
    initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.hot_ref, "chalk");
      const initOption = {
        title: {
          text: "▎热销商品销售金额占比统计",
          left: 20,
          top: 20,
        },
        legend: {
          //图例位置和文字
          top: "10%",
          right: "5%",
          icon: "cicle",
        },
        tooltip: {
          show: true,
          formatter: (arg) => {
            const thirdCategory = arg.data.children;
            let total = 0;
            thirdCategory.forEach((item) => {
              total += item.value;
            });
            let retSrt = "";
            thirdCategory.forEach((item) => {
              retSrt += `${item.name}:${
                parseInt((item.value / total) * 100) + "%"
              }<br/>`;
            });
            return retSrt;
          },
        }, //划过显示该二级模块对应的三级类别
        series: [
          {
            type: "pie",
            label: {
              show: false,
            },
            emphasis: {
              //默认不显示文字，高亮状态下才显示文字
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get("hotproduct");
      this.allData = ret;
      this.allData.sort((a, b) => {
        return b.value - a.value;
      });
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      const legendData = this.allData[this.currentIndex].children.map(
        (item) => {
          return item.name;
        }
      );
      const seriesData = this.allData[this.currentIndex].children.map(
        (item) => {
          return {
            name: item.name,
            value: item.value,
            children: item.children, //为了在tooltip中的回调函数中拿到对应的三级类别
          };
        }
      );
      const dataOption = {
        legend: {
          data: legendData,
        },
        series: [
          {
            data: seriesData,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize,
          },
        },
        legend: {
          itemWidth: this.titleFontSize / 2,
          itemHeight: this.titleFontSize / 2,
          itemGap: this.titleFontSize / 2,
          textStyle: {
            fontSize: this.titleFontSize / 2,
          },
        },
        series: [
          {
            radius: this.titleFontSize * 4.5,
            center: ["50%", "50%"],
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    toLeft() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        this.currentIndex = this.allData.length - 1;
      }
      this.updateChart();
    },
    toRight() {
      this.currentIndex++;
      if (this.currentIndex > this.allData.length - 1) {
        this.currentIndex = 0;
      }
      this.updateChart();
    },
  },
};
</script>
<style lang='less' scoped>
.arr-left {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.arr-right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.cat-name {
  position: absolute;
  right: 10%;
  bottom: 10%;
  color: white;
}
</style>

5.1、数据切换

左右箭头类似轮播图，依靠currentIndex的变化展示一级类别数据，饼图模块对应二级数据，鼠标划到该模块，会展示三级类别的占比，这个需要在组装数据时将三级数据追加进去

六、圆环饼图

代码如下：

<template>
  <div class="com-container">
    <div class="com-chart" ref="stock_ref"></div>
  </div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      currentIndex: 0, //当前显示的数据
      timerId: null, //定时器标识
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    clearInterval(this.timerId);
  },
  methods: {
    // 初始化echartsInstance对象
    initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.stock_ref, "chalk");
      const initOption = {
        title: {
          text: "▎库存和销量分析",
          left: 20,
          top: 20,
        },
        series: [
          {
            type: "pie",
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    // 获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get("stock");
      this.allData = ret;
      this.updateChart();
      this.startInterval();
    },
    // 更新图表
    updateChart() {
      const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      const colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];
      const start = this.currentIndex * 5;
      const end = (this.currentIndex + 1) * 5;
      const showData = this.allData.slice(start, end);
      const seriesArr = showData.map((item, index) => {
        return {
          type: "pie",
          radius: [110, 100],
          center: centerArr[index],
          hoverAnimation: false, //关闭鼠标移入到饼图时的动画效果
          labelLine: {
            show: false, //隐藏模块指示线
          },
          label: {
            position: "center",
            color: colorArr[index][0],
          },
          data: [
            {
              name: item.name + "\n" + item.sales, //圆环内文字
              value: item.sales,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArr[index][0],
                  },
                  {
                    offset: 1,
                    color: colorArr[index][1],
                  },
                ]),
              },
            }, //圆环渐变颜色
            {
              value: item.stock,
              itemStyle: {
                color: "#313743",
              },
            },
          ],
        };
      });
      const dataOption = {
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      let titleFontSize = (this.$refs.stock_ref.offsetWidth / 100) * 3.6;
      const innerRadius = titleFontSize * 2;
      const outterRadius = innerRadius * 1.125;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > 1) {
          this.currentIndex = 0;
        }
        this.updateChart(); //currentIndex更改后，刷新界面
      }, 5000);
    },
  },
};
</script>

6.1、切换动画

currentIndex标识当前页数，每一页显示5个圆，每5秒更新一次start和end，达到动态切换

UI调整：

hoverAnimation: false, //关闭鼠标移入到饼图时的动画效果

labelLine: {show: false, },//隐藏模块指示线

七、地图+散点图

<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>
<script>
import * as ets from "echarts";
import axios from "axios";
import { getProvinceMapInfo } from "@/utils/map_utils";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      mapData: {}, //所获取的省份的地图矢量数据
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter(); //得先主动适配屏幕
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartsInstance对象
    async initChart() {
      ets.registerTheme("chalk", chalk);
      this.chartInstance = ets.init(this.$refs.map_ref, "chalk");
      // 使用axios获取本地json数据
      const res = await axios.get(
        "http://10.52.12.xx:8080/static/map/china.json"
      );
      this.$echarts.registerMap("china", res.data);
      const initOption = {
        title: {
          text: "▎商家分布",
          left: 20,
          top: 20,
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            areaColor: "#2E72BF", //地图颜色
            borderColor: "#333", //地图分界线颜色
          },
        },
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical", //图例垂直摆放
        },
      };
      this.chartInstance.setOption(initOption);
      // 监听点击事件、获取所点击省份的矢量地图数据、显示省份、回到中国地图
      this.chartInstance.on("click", async (arg) => {
        const provinceInfo = getProvinceMapInfo(arg.name);
        // 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
        if (!this.mapData[provinceInfo.key]) {
          const ret = await axios.get(
            "http://10.52.12.xx:8080" + provinceInfo.path
          );
          this.mapData[provinceInfo.key] = ret.data;
          this.$echarts.registerMap(provinceInfo.key, ret.data);
        }
        const changeOption = {
          geo: {
            map: provinceInfo.key,
          },
        };
        this.chartInstance.setOption(changeOption);
      });
    },
    // 回到中国地图
    revertMap() {
      const revertOption = {
        geo: {
          map: "china",
        },
      };
      this.chartInstance.setOption(revertOption);
    },
    async getData() {
      const { data: ret } = await this.$http.get("map");
      this.allData = ret;
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      // 图例数据
      const legendArr = this.allData.map((item) => {
        return item.name;
      });
      const seriesArr = this.allData.map((item) => {
        // 如果想在地图中显示散点数据，需要给散点的图表增加 coordinateSystem: "geo"  配置
        return {
          type: "effectScatter",
          rippleEffect: {
            scale: 5,
            brushType: "stroke", //空心涟漪效果
          },
          name: item.name,
          data: item.children,
          coordinateSystem: "geo",
        };
      });
      const dataOption = {
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器大小发生变化时，会进行分辨率适配
    screenAdapter() {
      const titleFontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2, //图例间隔
          textStyle: {
            fontSize: titleFontSize / 2,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize(); //手动调用图表对象的resize()才能生效
    },
  },
};
</script>

7.1、地图上显示散点

在地图上给散点图表增加 coordinateSystem: "geo" 配置

7.2、点击出现单个省份，双击复原

备注：getProvinceMapInfo是将汉字转为省份拼音，以便获取对应的本地省份数据

(1)、监听各个省份的点击事件，获取对应的arg.name(汉字)；

(2)、根据getProvinceMapInfo()获取所点击省份的矢量地图数据，用mapData存下以获取数据，减少请求的二次发送；

(3)、根据this.$echarts.registerMap(“省份名”, "省份数据”)显示省份和对应的数据

(4)、双击页面，通过重新注册"china",回到中国地图。

下篇将分享全屏切换、实时监测【WebSocket】等功能。