❤ Uniapp使用Ucharts（二）（组件类型）

❤ Uniapp使用Ucharts（二）（秋云组件类型）

一、折线图

1、结构

<template><view class="charts-box"><qiun-data-charts type="area":opts="opts":chartData="chartData"/></view>
</template>

2、数据

chartData: {},

3、折线图详细配置

// 折线图表配置
opts: {animation: true, // 是否动画展示图表legend: {show: false, // 提示关闭},xAxis: {disableGrid: false, // true不绘制纵向网格 false绘制纵向网格itemCount: 8,fontColor:'#fff'},yAxis: {axisLine:false, },extra:{line:{type:'curve'},tooltip:{legendShow:true},//区域部分area: {type: "straight",opacity: 0.2,addLine: true,width: 2,gradient: false,activeType: "hollow"}},}

二、雷达图

1、结构

<template><view class="charts-box"><qiun-data-charts type="radar":opts="opts":chartData="chartData"/></view>
</template>

2、数据

 categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],series: [{name: "成交量1",data: [90,110,165,195,187,172]},{name: "成交量2",data: [190,210,105,35,27,102]}]
};

3、雷达图详细配置

<script>
export default {data() {return {chartData: {},//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。opts: {color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [5,5,5,5],dataLabel: false,enableScroll: false,legend: {show: true,position: "right",lineHeight: 25},extra: {radar: {gridType: "circle",gridColor: "#CCCCCC",gridCount: 3,opacity: 0.2,max: 200,labelShow: true}}}};},onReady() {this.getServerData();},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接let res = {categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],series: [{name: "成交量1",data: [90,110,165,195,187,172]},{name: "成交量2",data: [190,210,105,35,27,102]}]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},}
};
</script><style scoped>/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */.charts-box {width: 100%;height: 300px;}
</style>