在写后台管理系统时首页部分有时需要引入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 }; } };
