在uniapp中使用ucharts

在uniapp中使用echarts,通过document或者ref去渲染元素,打包后在手机app中echarts不会显示。所以需要使用ucharts

下载安装:npm i @qiun/ucharts
然后再组件中引用:import uCharts from '../../uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';

var uChartsInstance = {};
页面组件就使用:<canvas canvas-id="chart" id="chart" style="width: 100%;height:95%;" />

我的写法是按照ucharts中的原生的方法进行的;

官网是:uCharts官网 - 秋云uCharts跨平台图表库 可以进去看下实例;

这个是柱状图的一个数据实例;我们将接口返回的数据,也写成这种格式进行传递

setTimeout(() => {

let resp = {

categories: res.data.name,

series: [{

name: "",

data: arr

}, ]

};

console.info(resp, 'resp')

this.ungetOption('chart', resp);

}, 500);

ungetOption(id, data) {

const ctx = uni.createCanvasContext(id, this);

uChartsInstance[id] = new uCharts({

type: "column",

context: ctx,

padding: [15, 30, 0, 5],

fontSize: 12,

width: this.cWidth,

height: this.cHeight,

categories: data.categories,

series: data.series,

animation: true,

background: "#FFFFFF",

color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],

padding: [15, 15, 0, 5],

enableScroll: false,

legend: {},

dataLabel: false,

categoriesStyle: {

fontSize: '7px', // 设置X轴文字大小

},

xAxis: {

disableGrid: true,

rotateLabel: true,

},

yAxis: {

data: [{

min: 0

}]

},

extra: {

column: {

type: "group",

width: 30,

activeBgColor: "#000000",

activeBgOpacity: 0.08

}

}

});

},

相关推荐
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘18 小时前
uniapp——地图路线绘制map
uni-app
shadouqi18 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩19 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤21 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端1 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.1 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰1 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code2 天前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首2 天前
uniapp 和原生插件交互
uni-app·交互