cmy efb59431fd 2024-04-17 | 7 months ago | |
---|---|---|
.. | ||
components | 7 months ago | |
static | 7 months ago | |
changelog.md | 7 months ago | |
package.json | 7 months ago | |
pnpm-lock.yaml | 7 months ago | |
readme.md | 7 months ago |
一个基于 JavaScript 的开源可视化图表库 查看更多 站点1 | 查看更多 站点2
基于 echarts 做了兼容处理,更多示例请访问 uni示例 站点1 | uni示例 站点2 | 官方示例
Q群:1046793420
H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
第二步、安装 echarts 或者直接使用插件内的echarts.min文件
pnpm add echarts
-or-
npm install echarts
注意
cli
项目需要主动 import
插件
js
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {LEchart}
}
<view><l-echart ref="chart" @finished="init"></l-echart></view>
// 方式一:自定义包
// 使用插件内提供的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
设置更新this.$refs.chart.setOption(data)
// 默认获取容器尺寸
this.$refs.chart.resize()
// 指定尺寸
this.$refs.chart.resize({width: 375, height: 375})
nvue 不支持 由于除H5之外都不存在dom,但又有tooltips个性化的需求,代码就不贴了,看示例吧
代码位于/uni_modules/lime-echart/component/lime-echart
默认 lime-echart 为 demo
// 在任意地方使用可查看domo, 代码位于/uni_modules/lime-echart/component/lime-echart
<lime-echart></lime-echart>
measureText
,模拟的measureText
又无法得到当前字体的fontWeight
,故可能存在估计不精细的问题2d
只支持 真机调试2.0canvas
不跟随页面的情况,真机不影响canvas
层级过高的问题,真机一般不受影响,可以先测只有两个元素的页面看是否会有层级问题。saveImage
0
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 非微信小程序可能会遇到echarts
文件缺少wx
判断导致无法使用或缺少tooltip
方式一:可以在echarts.min.js
文件开头增加以下内容,参考插件内的echart.min.js的做法
var prefix = () => {
var UNDEFINED = 'undefined'
if(typeof wx !== UNDEFINED) return wx // 微信
if(typeof tt !== UNDEFINED) return tt // 字节 飞书
if(typeof swan !== UNDEFINED) return swan // 百度
if(typeof my !== UNDEFINED) return my // 支付宝
if(typeof dd !== UNDEFINED) return dd // 钉钉
if(typeof ks !== UNDEFINED) return ks // 快手
if(typeof jd !== UNDEFINED) return jd // 京东
if(typeof qa !== UNDEFINED) return qa // 快应用
if(typeof qq !== UNDEFINED) return qq // qq
if(typeof qh !== UNDEFINED) return qh // 360
if(typeof uni !== UNDEFINED) return uni
return null
}
//在 !function(t,e){"object"==typeof 下面加入 可能是第36行
var wx = prefix();
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
方式二:在vite.config.js
的define
设置环境
// 或者在`vite.config.js`的`define`设置环境
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
const UNI_PLATFORM = {
"app": "uni",
"web": "uni",
"mp-weixin": "wx",
"mp-baidu": "swan",
"mp-alipay": "my",
"mp-toutiao": "tt",
"mp-lark": "tt",
"mp-qq": "qq",
"mp-kuaishou": "ks",
"mp-jd": "jd",
"mp-360": "qh",
"quickapp-webview-union": "qa",
"quickapp-webview-huawei": "qa",
"quickapp-webview": "qa",
}
export default defineConfig({
plugins: [uni()],
define: {
global: UNI_PLATFORM[process.env.UNI_PLATFORM],
wx: UNI_PLATFORM[process.env.UNI_PLATFORM]
}
});
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
custom-style | 自定义样式 | string |
- | - |
type | 指定 canvas 类型 | string |
2d |
|
is-disable-scroll | 触摸图表时是否禁止页面滚动 | boolean |
false |
|
beforeDelay | 延迟初始化 (毫秒) | number |
30 |
|
enableHover | PC端使用鼠标悬浮 | boolean |
false |
参数 | 说明 |
---|---|
init(echarts, chart => {}) | 初始化调用函数,第一个参数是传入echarts ,第二个参数是回调函数,回调函数的参数是 chart 实例 |
setChart(chart => {}) | 已经初始化后,请使用这个方法,是个回调函数,参数是 chart 实例 |
setOption(data) | 图表配置项,用于更新 ,传递是数据 option |
clear() | 清空当前实例,会移除实例中所有的组件和图表。 |
dispose() | 销毁实例 |
showLoading() | 显示加载 |
hideLoading() | 隐藏加载 |
canvasToTempFilePath(opt) | 用于生成图片,与官方使用方法一致,但不需要传canvasId |