一、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 < 5 ? nodeUrl : nodeUrl.substring(0, 4);
},
methods: {
initMqttClient () {
const connectUrl = `ws://${window.location.hostname}:10883`;
const client = MQTT.connect(connectUrl); // connect to MQTT server
client.on('connect', () => {
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 < 5 ? nodeUrl : nodeUrl.substring(0, 4);
},
methods: {
initMqttClient () {
const connectUrl = `ws://${window.location.hostname}:10883`;
const client = MQTT.connect(connectUrl); // connect to MQTT server
client.on('connect', () => {
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的代码和逻辑，需要开发者掌握并熟练使用。
