高兼容性echats unipapp组件，支持app，小程序

众所周知uni-app是一套代码可以应用多个平台的移动端前端框架

用起来确实爽，小编也爱不释手

但需要做一些复杂的图表时，引入echarts，却失去了uni-app最牛逼的特性

看一下官方提供的

当然也有其他方式引入echarts，但是都不能做到app,小程序，h5都支持的

这还用个吊毛呀，不知道你们有没有遇到跟我一样的问题

小编研究数日，总结了一套方案，只为解决一个问题：

把以上所有的叉叉变成勾勾

当然官方也有一个高兼容性库uChart,但是uChart在echarts面前就跟婴儿一样，有很多复杂的功能实现不来

本着共享开源的原则，小编已经把源码分享到GitHub，欢迎各位大佬们添花

github demo地址：https://github.com/1879153421/buouyu-echarts

当然也有很多不足之处，也请大佬们多多指教，小编闲暇之余会不断更新的

直接通过npm安装即可

npm 模块地址：https://www.npmjs.com/package/buouyu-echarts

npm i buouyu-echarts

若项目根目录下没有package.json 文件，可以先执行 npm init

安装失败可能的原因：

大部分开发者可能都设置了淘宝镜像源，这里需要设置成原来的地址

// 查询当前配置的镜像 npm get registry //https://registry.npmjs.org/ // 设置成淘宝镜像 npm config set registry http://registry.npm.taobao.org/ // 换成原来的 npm config set registry https://registry.npmjs.org/

也有可能之前的版本不见了，可以把package.json中的buouyu-echarts依赖删掉，再执行npm i buouyu-echarts安装最新的

安装成功之后直接在需要用的页面引入

import buouyuEcharts from 'buouyu-echarts'

components挂载一下

components: { buouyuEcharts },

配置option

data() { return { option: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [{ data: [820, 932, 901, 934, 1290, 774, 660], type: 'line', smooth: true, }], visualMap: { min: 0, max: 1300, calculable: false, show: false, realtime: false, inRange: { color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026" ] } } }, } },

引入DOM结构

<buouyuEcharts :option="option" canvasId="buouyu" />

这样就你能在app，小程序，h5都能看到同样的效果啦

当然也可以全局挂载

在根目录的main.js

import Vue from 'vue' import App from './App' import buouyuEcharts from 'buouyu-echarts' //引入buouyu-echarts Vue.component('buouyuEcharts',buouyuEcharts) //挂载到全局 Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount()

然后就可以在任意页面直接用啦

<buouyuEcharts :option="option" canvasId="buouyu" />

跟以上类似，效果一样

github项目地址:https://github.com/1879153421/buouyu-echarts

由于本组件依赖echarts，所以要安装echarts

npm i echarts

然后就可以直接在项目中使用buouyu-echarts啦 使用操作跟上面类似

参考echarts官网：https://echarts.apache.org/zh/index.html

<buouyuEcharts height="12rem" width="80%" :option="option" canvasId="buouyu" />

添加个ref

<buouyuEcharts :option="option" ref="buouyu" canvasId="buouyu" />

data() { return { option: null } }, mounted() { this.initBuouyuEcharts() }, methods: { getRandom(min, max) { return Math.floor(Math.random() * (max - min)) + min }, initBuouyuEcharts() { const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', min: 0, max: 1000, axisLabel: { margin: 3, } }, series: [{ data: [300, 400, 800, 900, 700, 774, 400], type: 'line', smooth: true, }], visualMap: { min: 0, max: 1300, calculable: false, show: false, realtime: false, inRange: { color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026" ] } } } this.option = option //绑定数据组件就会初始化渲染 const data = [300, 400, 800, 950, 700, 774, 400] const buouyuCharts = this.$refs.buouyu //里面有个setOption方法 setInterval(() => { data.push(this.getRandom(0, 1000)) data.shift() buouyuCharts.setOption({ series: [{ data, }] }) }, 1000) }, }

效果

有兴趣的可以一起学习交流

小编微信：buouyupro