设为首页
收藏本站
切换到宽版
登录
立即注册
找回密码
搜索
搜索
本版
帖子
用户
快捷导航
论坛
BBS
VIP用户组
官网群
无名商城论坛
»
论坛
›
资源分享区
›
学习资源专区
›
【LSP】vue-echarts在vue中的使用
返回列表
发帖
查看:
212
|
回复:
0
[其他技术]
【LSP】vue-echarts在vue中的使用
[复制链接]
无名
无名
当前离线
积分
32464
1万
主题
1万
帖子
3万
积分
管理员
积分
32464
发消息
发表于 2022-5-8 17:02:44
|
显示全部楼层
|
阅读模式
安装依赖:
【win】npm install echarts vue-echarts
【mac】sudo npm install echarts vue-echarts
Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。
修复方法是在vue.config.js中添加如下代码:
1 // For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
2 transpileDependencies: [
3 'vue-echarts',
4 'resize-detector'
5 ]
引入:
import ECharts from 'vue-echarts'
各零件按需加载,手动引入 ECharts 各模块来减小打包体积:
import "echarts/lib/chart/line"; // 线图
import "echarts/lib/chart/bar"; // 柱图
import 'echarts/lib/component/legend' // 图例
import 'echarts/lib/component/tooltip' //提示框
etc...
注册:
Vue.component('myEchart', ECharts)
使用组件:
<myEchart
ptions="echartsOptions" ref="myCharts" />
vue-echarts的options设置基本同echarts,配置文档看echarts官网即可。
echarts
,
vue
,
import
,
引入
,
component
相关帖子
•
【HC】Python 自动获取百度翻译
•
【HC】多线程循环(Java)
•
iapp之图片控件直接显示网络地址图
•
iAPP 开启悬浮窗
•
『原创梦奇』能实现短信轰炸电话轰炸的LUA程序
•
iapp之修改多选控件边框颜色
•
【FUT】 R、【关●注哥】代码分享
•
【FUT】 分享文字、图片、文件,可
回复
使用道具
举报
返回列表
发帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表