uni-app charts All In One
uni-app charts All In One
uCharts 混合图 绘制不出来 bug
坑, mounted 里面执行 数据获取
ucharts & echarts
<template>
<view class="charts-box">
<qiun-data-charts
type="column"
:opts="{dataLabel:false}"
:chartData="chartsDataColumn1"
:canvas2d="true"
canvasId="components_test"
/>
</view>
</template>
<script>
// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
//下面是演示数据,您的项目不需要引用,数据需要您从服务器自行获取
import demodata from '@/mockdata/demodata.json';
export default {
// name: 'test-uCharts',
props: {
// pageScrollTop: {
// type: Number,
// default: 0
// }
},
data() {
return {
chartsDataColumn1: {},
};
},
//新手注意了,组件里没有onLoad事件!!!
mounted() {
this.getServerData()
},
methods: {
getServerData() {
setTimeout(() => {
//因部分数据格式一样,这里不同图表引用同一数据源的话,需要深拷贝一下构造不同的对象
//开发者需要自行处理服务器返回的数据,应与标准数据格式一致,注意series的data数值应为数字格式
this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column));
}, 1000);
},
}
};
</script>
<style>
.charts-box {
width: 100%;
height: 300px;
}
</style>
uCharts 混合图 绘制不出来 bug
shit bug
localdata数据渲染用法
-
使用localdata数据格式渲染图表的优势:数据结构简单,无需自行拼接chartData的categories及series,从后端拿回的数据简单处理即可生成图表。
❌ -
localdata数据的缺点:并不是所有的图表类型均可通过localdata渲染图表,例如混合图,组件并不能识别哪个series分组需要渲染成折线还是柱状图,涉及到复杂的图表,仍需要由chartData传入。
-
template代码:(建议使用在线工具生成)
<view class="charts-box">
<qiun-data-charts type="column" :localdata="localdata" />
</view>
shit 学要手动配置
1、切换【图表类型】请点击【基础配置】第一行type右侧的文字【柱状图】切换
2、通过本工具配置好符合UI规范的默认图表样式,粘贴到 uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
中,形成各个图表类型的默认配置,相同的图表类型不同的配置,可通过组件上:opts传递不同属性即可覆盖默认配置
OK (mounted 请求数据)
onReady() {
console.log('❌ onReady');
},
onLoad () {
console.log('❌ onLoad');
},
// 坑爹文档: ⚠️新手注意了,组件里没有 onReady 和 onLoad 事件!!!
mounted() {
this.options = {
yAxis:{
data:[
{position: 'left',title: '折线'},
{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},
{position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'},
],
},
};
console.log('✅ mounted');
//模拟从服务器获取数据
this.getServerData()
},
shit demos
如何使用 uni_modules 插件
// @/uni_modules/
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
https://uniapp.dcloud.io/uni_modules?id=使用-uni_modules-插件
refs
https://ext.dcloud.net.cn/plugin?id=271
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14799404.html
未经授权禁止转载,违者必究!