# echarts 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
> 一个基于 JavaScript 的开源可视化图表库 [查看更多 站点1](https://limeui.qcoon.cn/#/echart) | [查看更多 站点2](http://liangei.gitee.io/limeui/#/echart) <br>
> 基于 echarts 做了兼容处理,更多示例请访问 [uni示例 站点1](https://limeui.qcoon.cn/#/echart-example) | [uni示例 站点2](http://liangei.gitee.io/limeui/#/echart-example) | [官方示例](https://echarts.apache.org/examples/zh/index.html) <br>
> Q群:1046793420 <br>
## 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
| √ | √ | √ | √ | √ | √ | √ |
## 安装
- 第一步、在uniapp 插件市场 找到 [百度图表](https://ext.dcloud.net.cn/plugin?id=4899) 导入
- 第二步、安装 echarts 或者直接使用插件内的echarts.min文件
```cmd
pnpm add echarts
-or-
npm install echarts
```
**注意**
* 🔔 必须使用hbuilderx 3.4.8-alpha及以上
* 🔔 echarts 5.3.0及以上
* 🔔 如果是 `cli` 项目需要主动 `import` 插件
```js
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {LEchart}
}
```
## 代码演示
### 基础用法
```html
<view><l-echart ref="chart" @finished="init"></l-echart></view>
```
```js
// 方式一:自定义包
// 使用插件内提供的echarts.min
// 或在官网自定义包:https://echarts.apache.org/zh/builder.html
// 注意 插件内的包是umd格式的,如果你是vue3请使用esm格式的包 https://github.com/apache/echarts/tree/master/dist
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// 方式二:全量包
// 如果你使用 npm 安装了 echarts
import * as echarts from 'echarts'
// 方式三:按需引入
// 按需引入 开始
import * as echarts from 'echarts/core';
import {LineChart, BarChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局,全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';
// 按需引入 注册必须的组件
echarts.use([
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LineChart,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
//-------------按需引入结束------------------------
export default {
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110]
}
]
},
};
},
// 组件能被调用必须是组件的节点已经被渲染到页面上
// 1、在页面mounted里调用,有时候mounted 组件也未必渲染完成
mounted() {
// init(echarts, theme?:string, opts?:{}, chart => {})
// echarts 必填, 非nvue必填,nvue不用填
// theme 可选,应用的主题,目前只支持名称,如:'dark'
// opts = { // 可选
// locale?: string // 从 `5.0.0` 开始支持
// }
// chart => {} , callback 返回图表实例
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
},
// 2、或者使用组件的finished事件里调用
methods: {
async init() {
// chart 图表实例不能存在data里
const chart = await this.$refs.chart.init(echarts);
chart.setOption(this.option)
}
}
}
```
## 数据更新
- 使用 `ref` 可获取`setOption`设置更新
```js
this.$refs.chart.setOption(data)
```
## 图表大小
- 在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
```js
// 默认获取容器尺寸
this.$refs.chart.resize()
// 指定尺寸
this.$refs.chart.resize({width: 375, height: 375})
```
## 自定义Tooltips
- nvue 不支持
由于除H5之外都不存在dom,但又有tooltips个性化的需求,代码就不贴了,看示例吧
```
代码位于/uni_modules/lime-echart/component/lime-echart
```
## 插件标签
- 默认 l-echart 为 component
- 默认 lime-echart 为 demo
```html
// 在任意地方使用可查看domo, 代码位于/uni_modules/lime-echart/component/lime-echart
<lime-echart></lime-echart>
```
## 常见问题
- 钉钉小程序 由于没有`measureText`,模拟的`measureText`又无法得到当前字体的`fontWeight`,故可能存在估计不精细的问题
- 微信小程序 `2d` 只支持 真机调试2.0
- 微信开发工具会出现 `canvas` 不跟随页面的情况,真机不影响
- 微信开发工具会出现 `canvas` 层级过高的问题,真机一般不受影响,可以先测只有两个元素的页面看是否会有层级问题。
- toolbox 不支持 `saveImage`
- echarts 5.3.0 的 lines 不支持 trailLength,故需设置为 `0`
- dataZoom H5不要设置 `showDetail`
- 如果微信小程序的`tooltip`文字有阴影,可能是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
- 如果钉钉小程序上传时报安全问题`Uint8Clamped`,可以向钉钉反馈是安全代码扫描把Uint8Clamped数组错误识别了,也可以在 echarts 文件修改`Uint8Clamped`
```js
// 找到这段代码把代码中`Uint8Clamped`改成`Uint8_Clamped`,再把下划线去掉,不过直接去掉`Uint8Clamped`也是可行的
// ["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]
// 改成如下
["Int8","Uint8","Uint8_Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e.replace('_','')+"Array]"]
```
- 注意 如果您是使用 **vite + vue3** 非wx平台可能会遇到`echarts`文件缺少`wx`判断导致无法使用,您可以在`echarts.min.js`文件开头增加以下内容,参考插件内的echart.min.js的做法
```js
var prefix = () => {
var UNDEFINED = 'undefined'
if(typeof wx !== UNDEFINED) return wx // 微信
if(typeof tt !== UNDEFINED) return tt // 字节 飞书
if(typeof swan !== UNDEF
没有合适的资源?快使用搜索试试~ 我知道了~
记账本前端资源(uniapp版本)
共378个文件
vue:115个
js:107个
png:76个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 126 浏览量
2023-10-07
10:47:18
上传
评论
收藏 4.76MB ZIP 举报
温馨提示
本项目为高仿微信记账本 H5 项目(微信记账本是小程序),使用 uniapp 当前主流技术栈开发,兼容 Android,iOS,H5,微信小程序,等其它小程序平台。项目页面虽然不多,但是涉及了很多前端开发知识。后端用node.js来进行开发,框架用了egg框架。前后端都是用JavaScript来进行开发,不涉及其它复杂的开发语言,通过此项目可以独立完成记账本的全栈开发。
资源推荐
资源详情
资源评论
收起资源包目录
记账本前端资源(uniapp版本) (378个子文件)
index.css 94KB
iconfont.css 79KB
view.css 59KB
demo.css 8KB
demo.css 8KB
demo.css 8KB
iconfont.css 2KB
iconfont.css 2KB
iconfont.css 2KB
mescroll-down.css 1KB
mescroll-up.css 964B
mescroll-body.css 812B
mescroll-uni.css 748B
.gitignore 109B
demo_index.html 26KB
demo_index.html 26KB
demo_index.html 26KB
index.html 3KB
index.html 3KB
index.html 3KB
h5.html 2KB
index.html 1KB
index.html 1KB
index.html 1KB
index.html 1KB
__uniappview.html 811B
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 2KB
favicon.ico 2KB
favicon.ico 2KB
app-service.js 7.84MB
pages-statistics-statistics.2d272c98.js 1.26MB
echarts.min.js 1000KB
echarts.min.js 1000KB
echarts.min.js 1000KB
chunk-vendors.c32f2916.js 767KB
view.umd.min.js 390KB
pages-home-home.25422732.js 236KB
__uniappquill.js 211KB
pages-home-details~pages-statistics-statistics.f7a1d87b.js 150KB
area.js 122KB
app-view.js 97KB
index.98cfa85f.js 94KB
pages-login-login~pages-user-account.a4eb782a.js 61KB
iconfont.js 54KB
iconfont.js 54KB
iconfont.js 54KB
pages-home-details~pages-home-home~pages-login-login~pages-statistics-statistics~pages-type-type~pag~e6e9564c.5442d452.js 54KB
__uniappes6.js 51KB
pages-user-userInfo.a311827e.js 44KB
pages-home-details.6b19da9d.js 42KB
__uniappchooselocation.js 38KB
pages-type-typeDetail.3edd099b.js 34KB
async-validator.js 33KB
mescroll-uni.js 33KB
weCropper.js 31KB
pages-login-login~pages-type-typeDetail~pages-user-account.cb846f45.js 28KB
__uniappopenlocation.js 28KB
__uniappquillimageresize.js 24KB
pages-user-user.e9cca601.js 22KB
__uniapppicker.js 20KB
__uniappscan.js 20KB
pages-home-details~pages-home-home~pages-login-login~pages-type-typeDetail~pages-user-account.e8767882.js 19KB
MpHtmlParser.js 18KB
pages-login-login.8a40ba7b.js 16KB
ecStat.min.js 16KB
ecStat.min.js 16KB
ecStat.min.js 16KB
city.js 14KB
pages-home-details~pages-home-home~pages-statistics-statistics~pages-type-typeDetail~pages-user-user.17c98377.js 12KB
md5.js 12KB
touch-emulator.js 11KB
touch-emulator.js 11KB
touch-emulator.js 11KB
pages-type-type.22de99c1.js 11KB
pages-user-account.ef766ce8.js 10KB
canvas.js 9KB
pages-home-home~pages-type-type~pages-user-user~pages-user-userInfo.f910ed60.js 8KB
app-config.js 6KB
index.js 6KB
uni.webview.1.5.3.js 5KB
uni.webview.1.5.3.js 5KB
uni.webview.1.5.3.js 5KB
index.js 4KB
mixins.js 4KB
test.js 4KB
app-config-service.js 4KB
colorGradient.js 4KB
route.js 3KB
utils.js 3KB
CssHandler.js 3KB
renderjs.js 3KB
mescroll-uni-option.js 3KB
config.js 2KB
index.js 2KB
http.api.js 2KB
mixin.js 2KB
useMescroll.js 2KB
共 378 条
- 1
- 2
- 3
- 4
资源评论
- gf0023562024-01-03非常有用的资源,有一定的参考价值,受益匪浅,值得下载。
Huang_xianlong
- 粉丝: 488
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功