创建项目

一开始创建项目使用的指令是

npm init vite-app <project-name>

后面在跨域的时候出现了问题，后面发现是版本的问题，建议使用这个指令创建项目

npm init @vitejs/app

跨域

在config文件中配置

server: {cors: true,open: true,proxy: {'/api': {target: 'xxx',   //代理接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}
}

在request文件中配置

import axios from "axios"const instance = axios.create({baseURL: "/api",timeout: 5000,
});

最后在api文件中配置

import { get } from "../utils/request";export const getLength = () => get("/getLength");

引入EChars

安装

npm install echarts --save

官网中引入的方法是

import * as echarts from 'echarts';// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({/* 略 */
});

这里使用provide和inject引入

// app.vue
setup(){provide('echarts',echarts)
}// 需要使用ECarts的组件
let $echarts = inject("echarts");var myChart = $echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({/* 略 */
});

需要注意的是，放置图表的盒子height不为0

vue3+vite+EChars LPL数据可视化项目总结相关推荐

Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
数据可视化项目落地复盘
近期落地了工作中的数据可视化项目,今天原创复盘下这中间的历程. 在复盘前,首先一个问题:数据可视化到底是不是一个需求? 提出这个问题的原因: 数据可视化只是让数据更直观,是数据的另一种展现形式.这种形 ...
基于java web和echarts的数据可视化项目
EchartDemo 项目介绍基于java web和echarts的数据可视化项目主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
数据可视化项目【三】数据切换效果模块
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录监控区域-效果切换功能: 动画功能: 销售 ...
echarts数据可视化项目经验积累
echarts数据可视化项目经验积累 echarts图表在初始化时可以在mounted中. // An highlighted block mounted() {this.myChart = this ...
数据可视化项目【一】基础配置
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录项目介绍: 项目展示: 技术分析: 基础布局 ...
数据可视化项目---订单分类占比图
效果如下订单分类占比图-组件代码  <template><div class="com-container">&l ...
丽水数据可视化设计价格_大数据可视化项目报价模板
项目系统需求需求内容单价数量单位合计 1 系统方案设计 1. 整合分析项目需求和特性,制作需求文档: 进行软件产品界面(信息架构.操作逻辑.功能.用户体验等) 的交互策划,并输出产 ...

vue3+vite+EChars LPL数据可视化项目总结

创建项目

跨域

引入EChars

vue3+vite+EChars LPL数据可视化项目总结相关推荐

最新文章

热门文章