html
<view class="charts-box">
<qiun-data-charts
type="column"
:opts="opts"
:chartData="chartData"
/>
</view>
js
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
opts: {
color: ["#1890FF","#91CB74"], //,"#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"
padding: [15,15,0,5],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true
},
yAxis: {
data: [
{
min: 0
}
]
},
extra: {
column: {
type: "group",
width: 20,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
}
}
方法
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
categories: [2018,2019,2020,2021,2022,2023,2024],
series: [
{
name: "目标值",
data: [100,200,300,400,100,200,800]
},
{
name: "完成量",
data: [18,27,5,24,6,28,0.01]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
标签:name,res,默认,视图,引用,uni,100,data,opts
From: https://blog.51cto.com/u_16248220/7604616