vue3-admin-element框架引入echars图表

        在写后台管理系统时首页部分有时需要引入echars图表来进行一些数据的可视化操作，那么在框架中怎么进行echars图表的引入呢？本文通过一个小示例来进行说明。

一、下载echars插件包

        首先在vue3-admin-element框架中需要先安装echars依赖，可以使用如下命令：

         如果你是npm安装：

npm install echarts --save

          如果你是cnpm安装：

cnpm install echarts --save

二、使用echars

     在使用时我们第一步只是下载了echars插件，我们还需要进行引入，在引入时如下所示：

<script>
	import echarts from 'echarts'; 
</script>

    如果以上引入方式报错可以换用下面这句：

import * as echarts from "echarts";

三、创建HIML结构和CSS

<template>
  <div>
    <div class="top">
      <div class="box">
        <div id="container" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class="box">
        <div id="one" style="width: 100%;height: 100%;"></div>
      </div>
    </div>
    <div class="bottom">
      <div id="myEcharts" style="width: 1100px;height:400px;"></div>
    </div>
  </div>
</template>
<style scoped>
.title {
  width: 98%;
  margin-left: 1%;
  height: 50px;
  background-color: #fff;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.title p {
  margin-left: 20px;
}

.top,
.bottom {
  width: 98%;
  margin-left: 1%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}

.bottom {
  background-color: #fff;
}

.box {
  width: 49%;
  height: 260px;
  background-color: #fff;
}</style>

四、书写js代码

       这里是示例，你可以去echars官网去选择想要的图表并且进行相应配置项的修改，将代码移植到你的代码中。

export default {
  name: "echartsBox",
  setup() {
    /// 声明定义一下echart
    let echart = echarts;

    onMounted(() => {
      initChart();
      initparChart();
      initright();
    });

    onUnmounted(() => {
      echart.dispose;
    });

    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEcharts"));
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              801,
              102,
              230,
              4321,
              4129
            ],
            type: "line",
            smooth: true
          }
        ]
      });


      window.onresize = function () {
        //自适应大小
        chart.resize();
      };

    }
    function initparChart() {
      //初始化
      let myChart = echarts.init(document.getElementById('container'));
      myChart.setOption({
        legend: {
          // 图例
          data: ["企业老板", "参加工作", "个体户", "自由职业", "其他"],
          right: "10%",
          top: "10%",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "用户分类",
          top: "0%",
          left: "left"
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 40,
                name: "企业老板"
              },
              {
                value: 100,
                name: "参加工作"
              },
              {
                value: 166,
                name: "个体户"
              },
              {
                value: 201,
                name: "自由职业"
              },
              {
                value: 147,
                name: "其他"
              }
            ]
          }
        ]
      });
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };

    }
    function initright() {
      var youChart = echarts.init(document.getElementById('one'));
      youChart.setOption({
        legend: {
          // 图例
          data: ["按摩足疗", "洗浴", "ktv", "酒吧", "游泳馆","健身中心",'茶舍',"游戏中心"],
          right: "10%",
          top: "10%",
          orient: "vertical"
        },
        title: {
          text: "娱乐门店入驻",
          top: "0%",
          left: "left"
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 40,
                name: "按摩足疗"
              },
              {
                value: 100,
                name: "洗浴"
              },
              {
                value: 166,
                name: "ktv"
              },
              {
                value: 201,
                name: "酒吧"
              },
              {
                value: 147,
                name: "游泳馆"
              },{
                value:23,
                name:"健身中心"
              },
              {
                value:45,
                name:"茶舍"
              },              {
                value:4,
                name:"游戏中心"
              }
            ]
          }
        ]
      });
    }
    window.onresize = function () {w
        //自适应大小
        youChart.resize();
      };
    return { initChart, initparChart,initright };
  }
};