使用Echarts实现项目数据可视化

1、安装插件，全局引入，页面布局结构如下图。

   #  echarts 底层依赖 ZRender（ZRender基于canvas），一个轻量级的二维绘制库 

        npm install [email protected]        // 安装

main.js文件引入使用：使用1还是2由vue版本决定，vue2跟echarts现在最新的版本5字头在一起都会报错，所以可以降低版本

       ①  import echarts from 'echarts' 

       ②  import * as echarts from 'echarts';     

        Vue.prototype.$echarts = echarts

1、折线图 

 封装后端请求

//数据概览 
//数据获取
export function dataView(){
    return service({
        method: 'get',
        url: '/dataView'
    })
}

<template>
  <div class="data-view">
    <el-card>
      <div id="main1"></div>
    </el-card>
    <el-card>
      <div id="main2"></div>
    </el-card>
  </div>
</template>

<script>
import { dataView } from "@/api/api.js";
export default {
  data() {
    return {};
  },
  mounted() {
    // let myChart = this.echarts.init(document.getElementById('main1'));
    // myChart.setOption({
    //   title: {
    //     text: "数据概览",
    //   },
    //   tooltip: {},
    //   legend: {
    //     data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    //   },
    //   grid: {
    //     left: "3%",
    //     right: "4%",
    //     bottom: "3%",
    //     containLabel: true,
    //   },
    //   toolbox: {
    //     feature: {
    //       saveAsImage: {},
    //     },
    //   },
    //   xAxis: {
    //     type: "category",
    //     boundaryGap: false,
    //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //   },
    //   yAxis: {
    //     type: "value",
    //   },
    // });
  },
  methods: {
    draw(legend, xAxis, series) {
      let myChart = this.echarts.init(document.getElementById("main1"));
      let myChart1 = this.echarts.init(document.getElementById("main2"));
      let option = {
        title: {
          text: "数据概览",
        },
        tooltip: {
          trigger: "axis", //触发：鼠标悬浮于上
        },
        legend: {
          data: legend,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
        },
        yAxis: {
          type: "value",
        },
        series: series,
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        //样式
        grid: {
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
      };
      myChart1.setOption(option);
      myChart.setOption(option);
    },
  },
  created() {
    dataView()
      .then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          let { legend, xAxis, series } = res.data.data;
          this.draw(legend, xAxis, series);
        }
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>

<style lang="scss">
.data-view {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 50%;
    #main1,
    #main2 {
      height: 500px;
    }
  }
}
</style>
>

 2、地图

重点是地图注册以及数据，至于地图geo组件配置 ，参考官方

debugg：南海诸岛不显示，国家主权问题，有点危险 ，如果隐藏还可以参考博文

<template>
  <div class="map-view">
    <div id="map"></div>
  </div>
</template>

<script>
import geoJson from "@/assets/data.json";
export default {
  data() {
    return {};
  },
  mounted() {
    //地图初始化
    let myChart = this.echarts.init(document.getElementById("map"));
    //地图注册====》只有在包括 geo组件或者map图表类型的时候才可以使用
    this.echarts.registerMap("china", geoJson);
    let option = {
      backgroundColor: "rgb(121, 145, 209)",
      geo: {
        map: "china",
        aspectScale: 0.75, // scale地图长宽比
        zoom: 1.1,
        itemStyle: {
          normal: {
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c", // 0%处的颜色
                },
                {
                  offset: 1,
                  color: "#274d68", // 100%处的颜色
                },
              ],
              globalCoord: true,
            },
            shadowColor: "rgb(58, 115, 192)",
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,   //透明度
            },
          },
        ],
      },
      series: [
        {
          // 配置地图相关参数,绘制地图,这个对象是关于地图图表的相关设置
          type: "map",
          //图形上的文本标签
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {
              textStyle: {
                color: "rgb(183, 185, 14)",
              },
            },
          },
          zoom: 1.1,
          map: "china",
          itemStyle: {
            normal: {
              backgroundColor: "rgb(147, 235, 248)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(31, 54, 150)", // 0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(89, 128, 142)", // 100%处的颜色
                  },
                ],
                globalCoord: true,
              },
            },
            emphasis: {
              areaColor: "rgb(46, 229, 206)",
              borderWidth: 0.1,
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style lang="scss">
.map-view {
  width: 100%;
  #map {
    width: 100%;
    height: 500px;
  }
}
</style>