一、uniapp使用echarts兼容微信小程序
uniapp使用echarts的過程中能兼容微信小程序。在uniapp中使用echarts時，需要同時引入公共的echarts和小程序獨有的echarts。引入方式如下：
import echarts from 'echarts/core';
import 'echarts';
import 'echarts-gl';
import 'echarts-liquidfill';
import 'echarts-wordcloud';
import 'echarts-liquidfill';
import 'echarts-visual-map';
import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts';
import { LegendComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([LineChart, BarChart, LegendComponent, GridComponent, CanvasRenderer]);
在這個基礎上，還需要修改uniapp的小程序配置，使小程序支持引入本地的資源。修改方法如下：
"mp": {
"appid": "wx******", /* 微信小程序原有的appid */
"miniprogramRoot": "./dist/mp/",
"enableSourceMap": true,
"compileType": "miniprogram",
"native": false,
"plugins": {
"imagemin": {
"enable": true
},
"sass": {
"version": "1.8.0",
"provider": "node-sass"
}
}
},
獲得echarts兼容微信小程序的經驗方法如下：
1.需要先下載echarts的代碼庫，找到JS部分的代碼（通常在/dist文件夾中），並將該文件夾存儲到uniapp目錄下的/static文件夾中。
2.在代碼中引入這些資源，同時修改uni-app的小程序配置文件來允許本地引用。
3.在vue文件中引入 echarts和ec-canvas。
綜上所述，uniapp使用echarts能兼容微信小程序，需要先下載echarts的代碼庫，引入資源，修改小程序配置，最後在vue文件中引入。
二、uniapp使用echarts兼容app
uniapp使用echarts還能兼容app。在uniapp中使用echarts時，需要先配置app可使用成熟的echarts。
可以使用普通的echarts在web端，如果是uiwebview或wkwebview，首先要允許跨域請求（在iOS 9.0以後，需要配置允許訪問http的開關），在index.html文件中添加meta。
如果是使用WebView組件集成到app中，服務端應該支持ht以及https協議。在WebView的init方法中需要處理一些事情想到，需要監聽網路變化，並支持重新載入。
在app的路由config中定義一個$echarts選項，啟用渲染。
{
"globalStyle": {
"navigationBarTitleText": "uni-app"
},
"pages": [
{
"path": "pages/index/index",
"style": {},
"navigationBarTitleText": "uni-app",
"$echarts": true
}
]
}
通過以上操作，可以讓uniapp在app中使用echarts兼容性加強。
三、uniapp使用echart
uni-app使用ECharts與Vue.js橋接的方案：
ECharts對於Vue.js的支持主要基於ECharts腳本（echarts.min.js或echarts.common.js）和vue-echarts組件。其中，腳本可以在網頁中直接引入，也可以按npm包的方式安裝到node_modules文件夾中，以module形式導入。
vue-echarts組件是一個vue.js的封裝庫，封裝了常用的圖表類型，如條狀圖、折線圖等。通過引用該組件，我們可以非常簡單快速地加入圖表。不過，vue-echarts對於圖表定製和增加事件的需求不太友好，對數據的響應也不夠完善。
事實上，我們可以使用Vue.js和emit自己手動構建圖表。以上兩種方案均需要引用ECharts腳本文件，並按照Vue.js的官方教程（https://vuejs.org/v2/guide）構建組件。
在created中通過this.$echarts.init()方法創建圖表；在mounted鉤子函數中調用this.echart.setToolTip()和this.chart.setSeries()方法繪製圖表即可。
// MyEcharts的template部分
``<div class="echarts" ref="echarts" :style="{height: '400px'}"></div>``
// MyEcharts的script部分
import * as echarts from 'echarts';
export default {
name: 'MyEcharts',
data () {
return {
chart: null
}
},
mounted () {
this.initEchart();
this.setOption();
},
methods: {
initEchart () {
this.chart = echarts.init(this.$refs.echarts);
this.chart.on('click', this.handleClick);// 該處為圖表增加事件
},
setOption () {
this.chart.setOption(options)
},
handleClick (params, event) {
if (params.componentType === 'series') {
this.$emit('click', params, event);
}
}
}
}
四、uniapp使用socket
uniapp使用echarts就需要使用到websocket服務，可以使用uni-socket.io庫和vue-native-websocket（uni-app推薦）實現。下面展示vue-native-websocket的使用方法。
首先，安裝依賴包。
npm install vue-native-websocket -S
然後，將websocket集成進Vuex的中。
import VueNativeSock from 'vue-native-websocket';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
needSubscribe: [], // 需要發送訂閱的信息
ws: null, // websocket實例
isConnected: false // 連接狀態
},
mutations: {
SOCKET_ONOPEN (state, event) {
Vue.prototype.$socket = event.currentTarget;
state.isConnected = true
},
SOCKET_ONCLOSE (state, event) {
state.isConnected = false
},
SOCKET_ONERROR (state, event) {
console.error(state, event)
},
SOCKET_ONMESSAGE (state, message) {
// {
// channel: string, // 該數據的數據源（統一使用冒號分割）
// data: {} // 數據獲取來源
// }
state.needSubscribe.push(message)
},
connect (state, callback) {
if (!state.ws) {
state.ws = VueNativeSock('ws://api.xxxx.com/ws', { // websocket 地址
store: store,
format: 'json',
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 2000,
passToStoreHandler: function (eventName, event) {
if (!eventName.startsWith('SOCKET_')) {
return
}
let stateName = `INTERNET_SOCKET_${eventName.toUpperCase()}`;
let nextState = {...state};
nextState[stateName] = event;
callback(Object.keys(nextState), nextState);
}
});
} else {
state.ws.reconnect();
}
}
}
});
無論是哪種方法，都需要通過訂閱器和發布器將echart與websocket通信。websocket返回的數據需要整理下方能給echart正確展示的數據。在echart中定義好需要接收數據的series，這些series的data定義為[]。接收到websocket返回的數據後，需要調用echart的setOption方法重新賦值series的data以及相應的其他參數即可。
五、uniapp使用mqtt教程
MQTT是一個輕量級的消息協議，主要用於物聯網領域，通過發布/訂閱模式完成消息推送。MQTT與WebSocket的最大相似之處在於：它們都可以在tcp/ip網路上馴服。因此，我們既可以使用WebSocket也可以使用MQTT來實現類似的功能。這裡介紹uni-app集成MQTT的方法。
1.首先，安裝mqtt.js。
npm install mqtt
2.在components文件夾下建立mqtt文件夾，然後建立mqtt.vue。
3.使用mqtt自帶的client作為監聽器，當收到數據後使用vue中的$emit方法觸發事件即可。完整代碼如下：
// Mqtt.vue的template寫法，需要定義接收到伺服器的數據的格式。`messageCallback`是一個自定義的方法，用於處理接收得到的信息。
<template>
<div>
<button @click="initMqttClient">鏈接mqtt</button>
</div>
</template>
// Mqtt.vue的script寫法，需要求出本地節點的ID，但如果您已經知道自己的節點ID了，就不必做這一步了。
import MQTT from 'mqtt';
import Vue from 'vue';
export default {
name: 'MQTT',
data () {
return {}
},
created () {
this.initMqttClient = this.initMqttClient.bind(this);
const nodeUrl = window.location.search.split('=')[1];
this.nodeId = nodeUrl.length {
console.log('MQTT connected');
client.subscribe(this.nodeId + '/#', err => err && console.error(err));
});
client.on('message', (topic, payload) => {
const data = JSON.parse(payload.toString());
Vue.prototype.$emit('mqttData', data);
});
this.client = client;
}
},
destroyed () {
this.client.end();
}
};
// Mqtt.vue的js代碼
<script>
import MQTT from 'mqtt';
import Vue from 'vue';
export default {
name: 'MQTT',
data () {
return {}
},
created () {
this.initMqttClient = this.initMqttClient.bind(this);
const nodeUrl = window.location.search.split('=')[1];
this.nodeId = nodeUrl.length {
client.subscribe(this.nodeId + '/#', err => err && console.error(err));
});
client.on('message', (topic, payload) => {
const data = JSON.parse(payload.toString());
Vue.prototype.$emit('mqttData', data);
});
this.client = client;
}
},
destroyed () {
this.client.end();
}
};
</script>
六、uniapp使用nvue
nvue是uni-app中一種使用了新的編譯技術的組件類型，其在性能和兼容性方面均有較大的提升。因此，我們建議在uni-app中使用nvue來載入echarts。
在echarts的安裝目錄中找到`dist/extension/NV`，並將其中的js代碼和`NV`文件夾複製到uniapp的根目錄下的static/echarts文件夾中。
在vue文件中定義標籤，例如：<nv-echarts-platform>
在vue文件中引入nvue模板代碼，並將剛剛定義的標籤作為target參數進行渲染。
nvue支持部分vue.js的代碼和邏輯，需要開發者掌握並熟練使用。
原創文章，作者：MBVG，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/148667.html
微信掃一掃 
支付寶掃一掃 