vue3+vite+ts+echarts项目问题汇总

一：引入echarts

安装依赖npm install echarts --save 。
在main.ts中引入并挂载到实例上

import * as ECharts from 'echarts'const app = createApp(App)app.config.globalProperties.$ECharts = EChartsapp.mount('#app')

使用echarts

<template><div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
</template><script lang="ts">
import { defineComponent, onMounted, getCurrentInstance } from 'vue'
export default defineComponent({setup() {const { proxy } = getCurrentInstance() as anyconst option = {tooltip: {trigger: 'item'},color: ['#ffd666', '#ffa39e', '#409EFF', '#69cbc2', '#d3adf7'],series: [{name: '访问来源',type: 'pie',radius: '70%',data: [{ value: 1048, name: '金区' },{ value: 735, name: '木区' },{ value: 580, name: '水区' },{ value: 484, name: '火区' },{ value: 300, name: '土区' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}onMounted(() => {// 获取挂载的组件实例const echarts = proxy.$ECharts//初始化挂载const echarts1 = echarts.init(document.getElementById('myChart'))//添加配置echarts1.setOption(option)// 自适应window.onresize = function () {echarts1.resize()}})return {}}
})
</script>

二：引入postcss-pxtorem（rem单位适配各种分辨率的PC）

安装依赖：

yarn add postcss-loader postcss-pxtorem -D
yarn add autoprefixer -D

新建postcss.config.js文件跟tsConfig.json 同级目录下，并写入如下代码：

module.exports = {'plugins': {'autoprefixer': {overrideBrowserslist: ['Android 4.1','iOS 7.1','Chrome > 31','not ie <= 11',  //不考虑IE浏览器'ff >= 30', //仅新版本用“ff>=30'> 1%',//  全球统计有超过1%的使用率使用“>1%”;'last 2 versions', // 所有主流浏览器最近2个版本],grid: true ,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid，可以关闭开启)},'postcss-pxtorem': {rootValue: 37.5, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不转换，需要 / 75 转成 remunitPrecision: 6, // 计算结果保留 6 位小数selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性mediaQuery: true, // 允许在媒体查询中转换px。minPixelValue: 2, // 设置要替换的最小像素值。exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)}}
}

新建flexble.js,并在main.ts中引入

;(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {console.warn('将根据已有的meta标签来设置缩放比例');var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {// width = 540 * dpr;//变更width = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));

重启项目

三：设置父元素样式zoom之后echarts图表中鼠标焦点错位

将echars还原回去即可，比如一开始zoom是0.5，那么就1/0.5。

:style="{zoom:zoom,transform:scale(1/zoom)}"

四：main.ts怎么引入js文件

在tsconfig.json文件中加入一个参数：allowJS

"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","experimentalDecorators": true,"skipLibCheck": true,"esModuleInterop": true,"allowJs": true,  //编译时允许有js"allowSyntheticDefaultImports": true,  //允许引入没有默认导出的模块}

vue3+vite+ts+echarts项目问题汇总相关推荐

vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app & ...
Vue3+Vite+TS后台项目 ~ 4. axios请求封装
一.axios封装 1. request 请求封装新建 src / utils / request.ts 文件: import axios from 'axios'const request = a ...
vue3+vite+TS配置项目别名“@/“
安装依赖 npm i -D @types/node 一.在tsconfig.json里添加 "baseUrl": "./","paths": ...
Vue3+Vite+TS后台项目 ~ 10.商品管理
唯有热爱,可抵岁月长河一.商品列表 ⒈ 接口封装新建 src / api / product.ts 文件 import request from '@/utils/request' import ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...

vue3+vite+ts+echarts项目问题汇总

vue3+vite+ts+echarts项目问题汇总相关推荐

最新文章

热门文章