uniapp基于u-grid-item九宫格实现uCharts秋云图表展示

uniapp基于uView的UI组件u-grid-item九宫格实现uCharts秋云可视化图表展示

这里使用uView的u-grid-item九宫格组件去显示图标排列

九宫格可以做成多列，移动设备上可以通过左右滑动进行展示

<template>
	<div>
		<div style="text-align: center;font-size: 20px;padding: 40px 0px;">可视化图表</div>
		<swiper class="swiper">
			<swiper-item>
				<u-grid :col="3" @click="toEchartsInfo()" hover-class="hover-class">
					<u-grid-item v-for="(item, index) in listIcon" :index="index" :key="index">
						<img :src="item.img" class="iconImg"></img>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :col="3" @click="toEchartsItem()">
					<u-grid-item v-for="(item, index) in listList" :index="index" :key="index">
						<img :src="item.img"  class="iconImg"></img>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				listIcon: [
					{name:'进度条',img:'../../static/echartsicon/arcbar.jpeg'},
					{name:'区域图',img:'../../static/echartsicon/area.jpeg'},
					{name:'条状图',img:'../../static/echartsicon/bar.jpeg'},
					{name:'气泡图',img:'../../static/echartsicon/bubble.jpeg'},
					{name:'K线图',img:'../../static/echartsicon/candle.jpeg'},
					{name:'柱状图',img:'../../static/echartsicon/column.jpeg'},
					{name:'漏斗图',img:'../../static/echartsicon/funnel.jpeg'},
					{name:'仪表盘',img:'../../static/echartsicon/gauge.jpeg'},
					{name:'折线图',img:'../../static/echartsicon/line.jpeg'},
				],
				listList: [
					{name:'地图',img:'../../static/echartsicon/map.jpeg'},
				    {name:'混合图',img:'../../static/echartsicon/mix.jpeg'},
				    {name:'山峰图',img:'../../static/echartsicon/mount.jpeg'},
					{name:'饼状图',img:'../../static/echartsicon/pie.jpeg'},
					{name:'雷达图',img:'../../static/echartsicon/radar.jpeg'},
					{name:'圆环图',img:'../../static/echartsicon/ring.jpeg'},
					{name:'玫瑰图',img:'../../static/echartsicon/rose.jpeg'},
					{name:'散点图',img:'../../static/echartsicon/scatter.jpeg'},
					{name:'云词图',img:'../../static/echartsicon/word.jpeg'},
				],
			};
		},
		methods: {
			toEchartsInfo(index){
				if(index==0){
					this.$u.route('/pages/echartsShow/echartsArcbar')
				}else if(index==1){
					this.$u.route('/pages/echartsShow/echartsArea')
				}else if(index==2){
					this.$u.route('/pages/echartsShow/echartsBar')
				}else if(index==3){
					this.$u.route('/pages/echartsShow/echartsBubble')
				}else if(index==4){
					this.$u.route('/pages/echartsShow/echartsCandle')
				}else if(index==5){
					this.$u.route('/pages/echartsShow/echartsColumn')
				}else if(index==6){
					this.$u.route('/pages/echartsShow/echartsFunnel')
				}else if(index==7){
					this.$u.route('/pages/echartsShow/echartsGauge')
				}else if(index==8){
					this.$u.route('/pages/echartsShow/echartsLine')
				}
			},
			toEchartsItem(index){
				if(index==0){
					this.$u.route('/pages/echartsShow/echartsMap')
				}else if(index==1){
					this.$u.route('/pages/echartsShow/echartsMix')
				}else if(index==2){
					this.$u.route('/pages/echartsShow/echartsMount')
				}else if(index==3){
					this.$u.route('/pages/echartsShow/echartsPie')
				}else if(index==4){
					this.$u.route('/pages/echartsShow/echartsRadar')
				}else if(index==5){
					this.$u.route('/pages/echartsShow/echartsRing')
				}else if(index==6){
					this.$u.route('/pages/echartsShow/echartsRose')
				}else if(index==7){
					this.$u.route('/pages/echartsShow/echartsScatter')
				}else if(index==8){
					this.$u.route('/pages/echartsShow/echartsWord')
				}
			}
		}
	};
</script>

<style>
	/* 下方这些scss变量为uView内置变量，详见开发  组件-指南-内置样式 */

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	
	.swiper {
		height: 100vh;
	}
	
	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}
	
	.indicator-dots-active {
		background-color: $u-type-primary;
	}
	.iconImg{
		width: 90px;
		height: 80px;
	}
</style>

进度条详情展示

这里需要注意一下uCharts的组件使用，需要先安装组件插件或者自己去插件社区下载一个插件包，然后放到这个目录下就可以使用了，在页面里面使用标签通过设置type属性值区分图表类别，opts设置图表基本设置属性，chartData设置图表数据。

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

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: undefined,
        title: {
          name: "指标",
          fontSize: 35,
          color: "#1890ff"
        },
        subtitle: {
          name: "默认标题",
          fontSize: 15,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "circle",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 1.5,
            endAngle: 0.25,
            gap: 2
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                name: "一班",
                data: 0.8
              },
              {
                name: "二班",
                data: 0.6
              },
              {
                name: "三班",
                data: 0.45
              },
              {
                name: "四班",
                data: 0.3
              },
              {
                name: "五班",
                data: 0.15
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
	margin-top: 25%;
    width: 100%;
    height: 300px;
  }
</style>

柱状图详情展示

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

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,30,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 40
        },
        yAxis: {},
        extra: {
          bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            barBorderCircle: true,
            seriesGap: 2,
            categoryGap: 2
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
	margin-top: 25%;
    width: 100%;
    height: 300px;
  }
</style>

下面就是选取几种图形展示详情效果就不一一介绍代码了，详细的用法大家可以去秋云uCharts官网https://www.ucharts.cn/v2/#/demo/index