vue3从零搭建项目，搭配echarts

weixin_54938190

已于 2022-10-19 17:51:42 修改

阅读量694

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-10-19 16:06:00 首次发布

本文链接：https://blog.csdn.net/weixin_54938190/article/details/127407636

版权

本文介绍了如何在Windows环境下使用Vue CLI创建项目，并详细展示了Vue3.0中引入Echarts进行图表绘制的过程，包括线条图和中国地图的实现。同时，文章提供了详细的代码示例，涵盖了项目初始化、Echarts配置以及地图数据的处理。

摘要由CSDN通过智能技术生成

1.创建项目

windows+R快捷键打开终端

如果之前已经全局安装（我猜想的是全局安装一次就可以，不用每次create之前在install一次，不过还没有验证，电脑太卡）

接下来进入你想创建项目的文件位置，使用npm install -g @vue/cli安装脚手架，使用命令vue create 项目名来创建项目

（按键盘上面的上下箭头选择，以及回车键选中，这里选择第三个手动配置）

（上下箭头选择，空白键选中，选完之后，按回车键进行下一步，下面步骤中选择，选中，下一步时，仍然使用这些按键）

（选择vue3版本，回车键继续）

（选择n用hash,选择history用yes,这里试试history吧，之前一直用hash）

(这一步是让我们选择什么时候进行语法校验，个人选择保存时就检测)

(这一步是问，把babel,eslint这些配置文件配置在哪里，看个人习惯，我单独放在一个文件里)

2.vscode打开项目运行

3.引入echarts,写页面

（只要在需要echarts渲染的页面引入即可使用，如果想要优化，可以在app.vue页面使用provide,inject统一管理，再在子页面使用）

（这里使用的是vue3.0写法，vue3.2写法会报错，之后有时间再试在试一下）

页面效果如下

代码如下

<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view /> -->
  <div class="echarts" ref="myChart" id="myChart"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
// import echarts from "echarts";
import * as echarts from "echarts";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  // components: {
  //   HelloWorld,
  // },
  setup() {
    let myChart: any = ref(null);
    function drawEcharts(): void {
      let echart = document.getElementById("myChart");
      console.log("echart", echart);

      let myChart: any = echarts.init(echart);
      // 绘制图表
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    }
    onMounted(() => {
      drawEcharts();
    });
    return {
      myChart,
      drawEcharts,
    };
  },
});
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.echarts {
  width: 500px;
  height: 500px;
  background: skyblue;
}
</style>

制作中国地图（世界地图类型）

1.下载引入china.js

地址：GitHub - liangrumeng2015/China.js: echarts里面的地图文件China.js

2. 使用方法和折线图等echarts图表一致

地图代码如下

<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view /> -->
  <div class="echarts" ref="myChart" id="myChart"></div>
  <div id="china" class="echarts"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
// import echarts from "echarts";
import * as echarts from "echarts";
import "./js/china";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  // components: {
  //   HelloWorld,
  // },
  setup() {
    let myChart: any = ref(null);
    function drawEcharts(): void {
      let echart = document.getElementById("myChart");
      console.log("echart", echart);

      let myChart: any = echarts.init(echart);
      // 绘制图表
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    }
    // 获取中国地图
    function getChinaMap(): void {
      var myEcharts = echarts.init(document.getElementById("china"));
      var option = {
        // title: {
        //   //标题样式
        //   text: "中国地图",
        //   x: "center",
        //   textStyle: {
        //     fontSize: 18,
        //     color: "black"
        //   }
        // },
        tooltip: {
          trigger: "item",
          // formatter: function (params:any) {
          //   console.log(params);
          //   if (params.name) {
          //     return (
          //       params.name +
          //       " : " +
          //       (isNaN(params.value) ? 0 : parseInt(params.value))
          //     );
          //   }
          // },
        },
        visualMap: {
          show: false,
          //视觉映射组件
          top: "bottom",
          left: "left",
          min: 10,
          max: 500000,
          //text: ['High', 'Low'],
          realtime: false, //拖拽时，是否实时更新
          calculable: true, //是否显示拖拽用的手柄
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "模拟数据",
            type: "map",
            mapType: "china",
            roam: false, //是否开启鼠标缩放和平移漫游
            itemStyle: {
              //地图区域的多边形 图形样式
              normal: {
                //是图形在默认状态下的样式
                label: {
                  show: true, //是否显示标签
                  textStyle: {
                    color: "black",
                  },
                },
              },
              zoom: 1.5, //地图缩放比例,默认为1
              emphasis: {
                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: { show: true },
              },
            },
            top: "0%",
            bottom: "0%", //组件距离容器的距离
            data: [
              { name: "北京", value: 350000 },
              { name: "天津", value: 120000 },
              { name: "上海", value: 300000 },
              { name: "重庆", value: 92000 },
              { name: "河北", value: 25000 },
              { name: "河南", value: 20000 },
              { name: "云南", value: 500 },
              { name: "辽宁", value: 3050 },
              { name: "黑龙江", value: 80000 },
              { name: "湖南", value: 2000 },
              { name: "安徽", value: 24580 },
              { name: "山东", value: 40629 },
              { name: "新疆", value: 36981 },
              { name: "江苏", value: 13569 },
              { name: "浙江", value: 24956 },
              { name: "江西", value: 15194 },
              { name: "湖北", value: 41398 },
              { name: "广西", value: 41150 },
              { name: "甘肃", value: 17630 },
              { name: "山西", value: 27370 },
              { name: "内蒙古", value: 27370 },
              { name: "陕西", value: 97208 },
              { name: "吉林", value: 88290 },
              { name: "福建", value: 19978 },
              { name: "贵州", value: 94485 },
              { name: "广东", value: 89426 },
              { name: "青海", value: 35484 },
              { name: "西藏", value: 97413 },
              { name: "四川", value: 54161 },
              { name: "宁夏", value: 56515 },
              { name: "海南", value: 54871 },
              { name: "台湾", value: 48544 },
              { name: "香港", value: 49474 },
              { name: "澳门", value: 34594 },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(option);
      window.onresize = function () {
        myEcharts.resize();
      };
      // window.onresize = myEcharts.resize;
    }
    onMounted(() => {
      drawEcharts();
      getChinaMap();
    });
    return {
      myChart,
      drawEcharts,
      getChinaMap,
    };
  },
});
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.echarts {
  width: 500px;
  height: 500px;
  background: skyblue;
}
</style>