1.uCharts
简介
高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台,支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。
效果展示
2.uCharts使用以及相关的配置
1.快速上手
2.相关配置
在线生成工具
修改一些默认的内容
<qiun-data-charts id="echart" type="arcbar" :opts="options" :chartData="chartData" style="width: 180rpx;height: 180rpx" />
export default {
data() {
return {
options: {
"title": {
"name": "",
"fontSize": 25,
"color": "#00FF00"
},
"subtitle": {
"name": "",
"fontSize": 15,
"color": "#666666"
},
fontSize: 10,
extra: {
arcbar: {
type: 'circle',
width: 4,
startAngle: 1.5,
endAngle: 1.5
}
}
}
}
}
}
上面的数字样式定位在圆弧图表会产生一个问题:在手机和真机测试的时候,canvas会穿透,canvas会在最顶层,将需要定位在canvas上的内容使用cover-view进行包裹
当横坐标的文字过长,将文字进行倾斜
options: {
xAxis: {
rotateLabel: true,
axisLabel: {
interval:0,
rotate:30
}
}
}
很多配置直接在在线生成工具的左侧配置中勾选,右侧会有对应的效果,可自行查看对应的效果