在uniapp中使用ucharts

MYmayue2024-12-06 2:35

在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

}

}

});

},