### Quick Start for unibest Project Setup
Source: https://github.com/unibest-tech/hello-unibest/blob/main/README.md
These commands guide you through the initial setup of a unibest project. First, create a new project using the unibest template, then install all necessary dependencies, and finally, start the development server for H5.
```Shell
pnpm create unibest
pnpm i
pnpm dev
```
--------------------------------
### Uvue ECharts Setup and Initialization
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Explains how to integrate ECharts in Uvue/Nvue environments, which do not require explicit ECharts imports due to their webview-based implementation. It shows the HTML template and the JavaScript logic for conditional initialization based on the platform (APP vs. H5).
```html
```
```js
// @ts-nocheck
// #ifdef H5
import * as echarts from 'echarts/dist/echarts.esm.js'
// #endif
const chartRef = ref(null);
const init = async () => {
if(chartRef.value== null) return
// #ifdef APP
const chart = await chartRef.value!.init(null)
// #endif
// #ifdef H5
const chart = await chartRef.value!.init(echarts, null)
// #endif
chart.setOption(option)
}
```
--------------------------------
### Vue3 ECharts Basic Setup and Initialization
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Demonstrates how to set up and initialize an ECharts instance in a Vue3 UniApp project. It covers importing ECharts for both Mini Programs (using `require`) and non-Mini Programs (using `npm` and `import`), defining chart options, and initializing the chart within the `onMounted` lifecycle hook.
```html
```
```js
// Mini program (choose one)
// Plugin internal (choose one)
const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
// Custom (choose one), put into project path after download
const echarts = require('xxx/xxx/echarts');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Non-mini program
// Need to enter command in console: npm install echarts
import * as echarts from 'echarts'
```
```js
const chartRef = ref(null)
const 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]
}
]
};
onMounted( ()=>{
// The component can only be called after its node has been rendered to the page.
setTimeout(async()=>{
if(!chartRef.value) return
const myChart = await chartRef.value.init(echarts)
myChart.setOption(option)
},300)
})
```
--------------------------------
### ECharts Chart Resizing
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Provides examples for resizing an ECharts chart. It shows how to automatically adjust the chart size to its container or specify exact dimensions using the `resize()` method.
```js
// Get container size by default
this.$refs.chart.resize()
// Specify size
this.$refs.chart.resize({width: 375, height: 375})
```
--------------------------------
### Build unibest Project for Production
Source: https://github.com/unibest-tech/hello-unibest/blob/main/README.md
These commands compile the unibest project for production deployment on different platforms. The output files are generated in specific 'dist/build' directories for web (H5), WeChat mini-program, and native App (requiring HBuilderX for cloud packaging).
```Shell
pnpm build:h5
pnpm build:mp-weixin
pnpm build:app
```
--------------------------------
### Run unibest Project in Development Mode
Source: https://github.com/unibest-tech/hello-unibest/blob/main/README.md
These commands allow you to run the unibest project in development mode for various platforms. This includes web (H5), WeChat mini-program (requiring WeChat DevTools), and native App (requiring HBuilderX for import and running on simulator/device).
```Shell
pnpm dev:h5
pnpm dev:mp-weixin
pnpm dev:app
```
--------------------------------
### Plugin Tag Usage
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Shows the basic usage of the `` plugin tag, which serves as a demo component.
```html
// Use anywhere to view demo, code located at /uni_modules/lime-echart/component/lime-echart
```
--------------------------------
### ECharts Initialization and Dynamic Option Setting
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Provides functions to initialize an ECharts instance on a specified DOM element and set its initial options. The `parse` function attempts to extract an option name from a callback string, which is then used by `setChart` to dynamically evaluate and apply chart options, potentially allowing for complex configurations passed as functions.
```javascript
function parse(name, callback, options) {
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
if (optionNameReg.test(callback)) {
const optionNames = callback.match(optionNameReg)
if (optionNames[1]) {
const _this = optionNames[1].split('.')[0]
window[_this] = {}
window[_this][optionNames[2]] = options
return optionNames[2]
} else {
return null
}
}
return null
}
function init(callback, options, opts, theme) {
if (!chart) {
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
if (options) {
chart.setOption(options)
}
}
}
function setChart(callback, options) {
if (!callback) return
if (chart && callback && options) {
var r = null
const name = parse('r', callback, options)
if (name) this[name] = options
eval(`r = ${callback};`)
if (r) {
r(chart)
}
}
}
function setOption(data) {
if (chart) chart.setOption(data[0], data[1])
}
```
--------------------------------
### Dynamically Configure Viewport Meta Tag with CSS Feature Detection
Source: https://github.com/unibest-tech/hello-unibest/blob/main/index.html
This JavaScript snippet detects support for CSS `env()` or `constant()` functions (often used for safe area insets) and dynamically adds a `` tag to the document. It includes `viewport-fit=cover` if `env()` or `constant()` support is detected, ensuring proper display on devices with notches or rounded corners. This is crucial for modern mobile web development to utilize the full screen area.
```JavaScript
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( '' )
```
--------------------------------
### Global State and WebView Communication Utilities
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Initializes global variables for the chart instance and a cache. It overrides `console.log` to emit log messages to the UniApp environment and provides utility functions (`emit`, `postMessage`) for sending data back to the native application. The `stringify` function is a helper for JSON serialization, potentially to handle circular references, though its usage is limited in the provided context.
```javascript
let chart = null; let cache = [];
console.log = function() {
emit('log', {
log: arguments,
})
}
function emit(event, data) {
postMessage({
event,
data
})
cache = []
}
function postMessage(data) {
uni.webView.postMessage({
data
})
// window.__uniapp_x__.postMessage(JSON.stringify(data))
};
function stringify(key, value) {
if (typeof value === 'object' && value !== null) {
if (cache.indexOf(value) !== -1) {
return;
}
cache.push(value);
}
return value;
}
```
--------------------------------
### Vue 2 ECharts Bar Chart Configuration and Initialization
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
This JavaScript snippet provides a complete Vue 2 component demonstrating how to define a bar chart's ECharts options, including tooltip, legend, grid, axes, and series data. The `init` method, called after the component's DOM is ready, asynchronously obtains the chart instance and applies the defined options for rendering.
```JavaScript
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]
}
]
},
};
},
// 组件能被调用必须是组件的节点已经被渲染到页面上
methods: {
async init() {
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts);
chart.setOption(this.option)
}
}
}
```
--------------------------------
### ECharts Lifecycle and Utility Functions
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Includes functions for managing the ECharts instance's lifecycle (clearing, disposing) and adapting its size. It also provides a utility to convert the chart canvas to a temporary file path (data URL) and send it back to the UniApp environment.
```javascript
function clear() {
if (chart) chart.clear()
}
function dispose() {
if (chart) chart.dispose()
}
function resize(size) {
if (chart) chart.resize(size)
}
function canvasToTempFilePath(opt) {
if (chart) {
delete opt.success
const src = chart.getDataURL(opt)
postMessage({
// event: 'file',
file: src
})
}
}
```
--------------------------------
### Vite + Vue3 ECharts Environment Configuration
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Offers two methods to address ECharts issues (missing `wx` judgment, missing tooltip) when using Vite + Vue3 for non-WeChat Mini Programs. Method one involves adding `global` and `wx` definitions to `echarts.min.js`, and method two configures the `define` option in `vite.config.js`.
```js
let global = null
let wx = uni
```
```js
// Or set the environment in `vite.config.js`'s `define`
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
const define = {}
if(!["mp-weixin", "h5", "web"].includes(process.env.UNI_PLATFORM)) {
define['global'] = null
define['wx'] = 'uni'
}
export default defineConfig({
plugins: [uni()],
define
});
```
--------------------------------
### Vue 2 ECharts Library Import Options
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
This JavaScript snippet presents three common methods for importing the ECharts library into a Vue 2 project: using a bundled plugin version, a custom downloaded file, or an npm package. Developers should select the import path that aligns with their project's dependency management strategy.
```JavaScript
// 插件内的 三选一
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// 自定义的 三选一 下载后放入项目的路径
import * as echarts from 'xxx/echarts.min'
// npm包 三选一 需要在控制台 输入命令：npm install echarts
import * as echarts from 'echarts'
```
--------------------------------
### ECharts Data Update Methods
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Illustrates two common methods for updating ECharts data: using a `ref` to directly call `setOption` on the component, and using the chart instance itself to call `setOption`.
```js
// ref
this.$refs.chart.setOption(data)
// Chart instance
myChart.setOption(data)
```
--------------------------------
### Basic HTML/Body/Canvas Styling
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Defines basic CSS styles for the HTML, body, and a canvas element to ensure full-page coverage and transparent background, typically used for a chart container.
```css
html, body, .canvas { padding: 0; margin: 0; overflow-y: hidden; background-color: transparent; width: 100%; height: 100%; }
```
--------------------------------
### Vue 2 Uni-App ECharts Component Template
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
This HTML snippet illustrates the basic template for embedding an ECharts component (`l-echart`) within a Vue 2 uni-app view. It defines the chart container's dimensions and includes a reference (`ref`) and an event listener (`@finished`) for chart initialization.
```HTML
```
--------------------------------
### ECharts Loading State Management
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Provides functions to control the loading animation state of the ECharts instance, allowing developers to show or hide a loading indicator based on data fetching or rendering processes.
```javascript
function showLoading(data) {
if (chart) chart.showLoading(data[0], data[1])
}
function hideLoading() {
if (chart) chart.hideLoading()
}
```
--------------------------------
### ECharts Event Handling
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Registers event listeners on the ECharts instance. It supports both general event types and specific queries, emitting a structured event object back to the UniApp environment via `emit` after filtering out the 'event' key from the ECharts options object.
```javascript
function on(data) {
if (chart && data.length > 0) {
const [type, query] = data
const key = `${type}${JSON.stringify(query||'')}`
if (query) {
chart.on(type, query, function(options) {
var obj = {};
Object.keys(options).forEach(function(key) {
if (key != 'event') {
obj[key] = options[key];
}
});
emit(key, {
event: key,
options: obj,
});
});
} else {
chart.on(type, function(options) {
var obj = {};
Object.keys(options).forEach(function(key) {
if (key != 'event') {
obj[key] = options[key];
}
});
emit(key, {
event: key,
options: obj,
});
});
}
}
}
```
--------------------------------
### Fix for DingTalk Mini Program Uint8Clamped Issue
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/readme.md
Provides a JavaScript code modification to resolve a `Uint8Clamped` security warning encountered during upload to DingTalk Mini Programs. It involves replacing `Uint8Clamped` with `Uint8_Clamped` and then removing the underscore.
```js
// Find this code and change `Uint8Clamped` to `Uint8_Clamped`, then remove the underscore. However, directly removing `Uint8Clamped` is also feasible.
// ["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]
// Change to the following
["Int8","Uint8","Uint8_Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e.replace('_','')+"Array]"]
```
--------------------------------
### Prevent Default Touchmove Behavior
Source: https://github.com/unibest-tech/hello-unibest/blob/main/src/uni_modules/lime-echart/static/uvue.html
Adds an event listener to the document to prevent the default touchmove behavior, which can be useful in webview contexts to prevent unwanted scrolling or gestures that interfere with chart interactions.
```javascript
document.addEventListener('touchmove', () => { })
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.