【前端】基于后端数据的echart中国地图和柱状图

• 做项目用到了 简单记录一下

下载

npm install echarts -S

下载的是5.4.0版本
这个版本没有china.js 所以需要自己添加

"echarts": "^5.4.0",

全局引入

// 图表【已封装】
import Echarts from "./plugins/echarts";
// 中国地图的js文件
import "./assets/js/china";

封装

这个版本是这样引入
新版本根据官方文档走

import * as echarts from "echarts";

// 插件封装
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get() {
        return {
			//地图
			chinaMap: function(id,data){}
			//柱状图
			pieceMap: function(id,data){}
        };
      },
    },
  });
};

export default install;

• HTML中

// id取封装的图表名字 一定要设置宽度和高度
<div id="chinaMap" style="width: 580px; height: 520px"></div>
<div id="pieceMap" style="width: 660px; height: 250px"></div>

• 初始化data数据

      provinceList: [],
      provinceDataList: [],
      chart: null, // 因为echart封装了 所以一个chart就可

• 初始化调用方法

  created() {
    this.getProvince();
    this.getColumn();
  },

建立

• 后台接口封装

// 省份疫情数据
export function getProvince() {
  return axios({
    url: moc + "/virus/china_area",
    method: "get",
  });
}

// 柱状图
export function getColumn() {
  return axios({
    url: moc + "/virus/china_area/Bar",
    method: "get",
  });
}

• 各省份
  

省份地图

getProvince() {
      getProvince().then((res) => {
        // 获取相关数据
        this.provinceList = res.data;
        // 设置一个数组储存所需数据
        var allCitys = [];
        for (var i = 0; i < this.provinceList.length; i++) {
        // 将需要的数据通过循环保存在allCitys中
        // 先清楚所需的数据格式时怎么样的
          var temp = {
            name: this.provinceList[i].name,
            value: this.provinceList[i].nowConfirm,
          };
          allCitys.push(temp);
        }
        // 将数据传入图表
        this.$charts.chinaMap("chinaMap", allCitys);
        console.log(res);
      });
    },

• 柱状图【具有x轴数据和y轴数据】
  
  

柱状图

    getColumn() {
      getColumn().then((res) => {
        // 获取相关数据
        this.provinceDataList = res.data;
        // 将数据传入图表
        this.$charts.pieceMap("pieceMap", this.provinceDataList);
        console.log(res);
      });
    },

封装echarts的完整代码

import * as echarts from "echarts";

// 插件封装
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get() {
        return {
          // 中国地图
          chinaMap: function (id, data) {
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            var option = {
            // hover会有相应信息显示
              tooltip: {
                formatter(data) {
                  return (
                    "<div><p>" +
                    data.name +
                    "</p></div>" +
                    "<div><p>确诊数：" +
                    data.value +
                    "</p></div>"
                  );
                },
              },
              visualMap: [
                {
                  // 映射-颜色值
                  orient: "vertical", // 分段方向:horizontal水平
                  type: "piecewise", // 分段
                  pieces: [
                    // 配置颜色区间
                    { min: 0, max: 0, color: "#FFFFFF" },
                    { min: 1, max: 10, color: "#FDFDCF" },
                    { min: 10, max: 100, color: "#FE9E83" },
                    { min: 100, max: 500, color: "#E55A4E" },
                    { min: 500, max: 9000000, color: "#660000" },
                  ],
                },
              ],
              series: [
                {
                  name: "省",
                  type: "map", // 配置图表类型
                  map: "china",
                  roam: false, // 是否允许自动缩放
                  zoom: 1.2, // 地图缩放比例
                  aspectScale: 0.75,
                  label: {
                    //配置字体
                    normal: {
                      show: true,
                      textStyle: {
                        color: "#102b6a", // 字体颜色
                        fontSize: 15, // 字体大小
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      areaColor: "rgba(0,255,236,0.1)", //区域颜色
                      borderColor: "#0F0000", // 边框颜色
                    },
                    emphasis: {
                      areaColor: "#87CEEB",
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                  data: data,
                  // 要求的数据格式 所以需要name和value
                  // data:[{name:"内蒙古"，value:10,itemStyle:{normal:{areaColor:"#f00"}}}]
                },
              ],
            };
            // 注册
            myChart.setOption(option);
          },
          // 省份地图
          pieceMap: function (id, data) {
          // 动画延迟效果
            const animationDuration = 3000;
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            var option = {
              tooltip: {
                // hover会有相应信息显示
                formatter(data) {
                  return (
                    "<div><p>" +
                    data.name +
                    "</p></div>" +
                    "<div><p>确诊数：" +
                    data.value +
                    "</p></div>"
                  );
                },
              },
              backgroundColor: "#FFF",
              legend: {
                data: ["确诊人数"],
                // 字体设置
                textStyle: {
                  fontSize: 14,
                  color: "black",
                },
              },
              // 当数据过多显示不完全设置滑条
              dataZoom: [
                {
                  show: true,
                  realtime: true,
                  height: 20, //这里可以设置dataZoom的尺寸
                  bottom: 8, //滚动体距离底部的距离
                  start: 0, //初始化时，滑动条宽度开始标度
                  end: 20, //初始化时，滑动条宽度结束标度
                },
                {
                  type: "inside", //内置滑动，随鼠标滚轮展示
                  realtime: true,
                  start: 0,
                  end: 20,
                },
              ],
              // x轴
              xAxis: [
                {
                  type: "category",
                  data: data.areaNameList,
                  axisTick: {
                    alignWithLabel: true,
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      fontSize: 14,
                    },
                  },
                },
              ],
              // y轴
              yAxis: [
                {
                  type: "value",
                  axisTick: {
                    show: false,
                  },
                },
              ],
              series: [
                {
                  name: "确诊人数",
                  type: "bar",
                  stack: "Amount",
                  barWidth: 20,
                  data: data.dataList,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          color: "white",
                          fontSize: 18,
                        },
                      },
                    },
                  },
                  // 动画效果
                  animationDuration,
                },
              ],
            };
            myChart.setOption(option);
          },
        };
      },
    },
  });
};

export default install;

• 地图设置emphasis效果
  

结束

详细可跳转官方页面 查看更多功能
ECharts