vue按需引入echarts

　　下载安装echarts包：npm install echarts -D

一、全局引入

　　main.js中配置

import echarts from ‘echarts‘ //引入echarts
Vue.prototype.$echarts = echarts //引入组件

　　缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验

二、按需引入

　　如果是在许多页面中都有用到，就写在main.js中

//引入基本模板
let echarts = require(‘echarts/lib/echarts‘)

// 引入折线图等组件
require(‘echarts/lib/chart/line‘)
require(‘echarts/lib/chart/bar‘)
require(‘echarts/lib/chart/radar‘)

// 引入提示框和title组件，图例
require(‘echarts/lib/component/tooltip‘)
require(‘echarts/lib/component/title‘)
require(‘echarts/lib/component/legend‘)
require(‘echarts/lib/component/legendScroll‘)//图例翻译滚动

Vue.prototype.$echarts = echarts

　　在组建中使用都是一样的，如果只在一个地方使用就直接写在.vue文件中就好啦

　　注：这里用 require 不用 import 引入是因为 import 需要详细的路径

　　然后打包，，比全部导入1.69M，少了差不多400K。

原文地址：https://www.cnblogs.com/goloving/p/9302213.html

时间： 2024-07-30 11:06:28

vue按需引入echarts的相关文章

vue按需引入/全局引入echarts

npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 import echarts from 'echarts/lib/echarts' // 再引入你需要使用的图表类型,标题,提示信息等 import 'echarts/lib/chart/bar' import 'echarts/lib/component/legend' import 'echar

VUE项目中按需引入ECharts.js

安装ECharts包 npm install echarts --save 引入 ECharts 在main.js中引入 1 // 引入 ECharts 主模块 2 let echarts = require('echarts/lib/echarts'); 3 // 引入折线图/柱状图等组件 4 require('echarts/lib/chart/line') 5 require('echarts/lib/chart/bar') 6 require('echarts/lib/chart/rad

vue按需引入Element UI的方法

在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们的项目是这样的 此时我们在终端输入 vue add element 可以看到让我们选择全部引入还是按需引入,此时我们选择按需引入,Import on demand 然后选择zh-CN,这时候我们可以看到此处多了一个plugins的文件夹,里面有一个element.js的文件,并且main.js中多了

vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem

偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.Vant作为一款优秀的移动端vue组件库,自然也是支持的.由于当下手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做才能更好地适配不同屏幕宽度的移动设备?因而,在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)

Vue 实现 Element 的按需引入

使用 Vue-Cli 脚手架创建 Vue 项目实现 Element 的按需引入 安装 element-ui 和 babel-plugin-component 和 babel-preset-es2015 依赖 npm intall element-ui --save npm install babel-plugin-component -D npm install babel-preset-es2015 -D 修改 .babelrc 文件 { "presets": [["es2

Vue系列——在vue项目中使用echarts

安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue <div id="myChart" :style="{width: '300px', height: '300px'}"></div> export default {

import 和组件库按需引入

概述 今天查资料查到了一些有趣的东西,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: import.require.export.module.exports 混合使用详解 从 import 讲起 import { button, Select } from 'element-ui'这段代码到底发生了什么? babel 会将这段代码进行转码,转码之后是这个样子: var a = require('element-ui'); var Button = a.Button; var Se

在Vue框架中引入Element

文章会讲到如何在Vue框架中引入Element 那我们先来说一下Vue框架:Vue是渐进式,JavaScript框架.很多人不理解什么是渐进式,简单点讲就是易用.灵活.高效(没有太多限制) 这里介绍npm安装方式: 打开cmd,找到你Vue项目的路径 运行 npm i element-ui -S 然后在main.js里写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo 以下仅是个人在开发中逐步摸索出来的.demo目前没出问题.如果有错误地方请留言指出  (若转载请标注出处) 直接上效果图,对应代码在效果图下面 安装: 1. npm install echarts --save2. npm install --save @typ