扬州做阿里巴巴的公司网站,搭建网站商城,英文网站建设szjijie,做网站域名是什么意思uniapp基于uView的UI组件u-grid-item九宫格实现uCharts秋云可视化图表展示
这里使用uView的u-grid-item九宫格组件去显示图标排列 九宫格可以做成多列#xff0c;移动设备上可以通过左右滑动进行展示 templatedivdiv styletext-align: center;font…uniapp基于uView的UI组件u-grid-item九宫格实现uCharts秋云可视化图表展示
这里使用uView的u-grid-item九宫格组件去显示图标排列 九宫格可以做成多列移动设备上可以通过左右滑动进行展示 templatedivdiv styletext-align: center;font-size: 20px;padding: 40px 0px;可视化图表/divswiper classswiperswiper-itemu-grid :col3 clicktoEchartsInfo() hover-classhover-classu-grid-item v-for(item, index) in listIcon :indexindex :keyindeximg :srcitem.img classiconImg/imgtext classgrid-text{{item.name}}/text/u-grid-item/u-grid/swiper-itemswiper-itemu-grid :col3 clicktoEchartsItem()u-grid-item v-for(item, index) in listList :indexindex :keyindeximg :srcitem.img classiconImg/imgtext classgrid-text{{item.name}}/text/u-grid-item/u-grid/swiper-item/swiper/div
/templatescriptexport 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(index0){this.$u.route(/pages/echartsShow/echartsArcbar)}else if(index1){this.$u.route(/pages/echartsShow/echartsArea)}else if(index2){this.$u.route(/pages/echartsShow/echartsBar)}else if(index3){this.$u.route(/pages/echartsShow/echartsBubble)}else if(index4){this.$u.route(/pages/echartsShow/echartsCandle)}else if(index5){this.$u.route(/pages/echartsShow/echartsColumn)}else if(index6){this.$u.route(/pages/echartsShow/echartsFunnel)}else if(index7){this.$u.route(/pages/echartsShow/echartsGauge)}else if(index8){this.$u.route(/pages/echartsShow/echartsLine)}},toEchartsItem(index){if(index0){this.$u.route(/pages/echartsShow/echartsMap)}else if(index1){this.$u.route(/pages/echartsShow/echartsMix)}else if(index2){this.$u.route(/pages/echartsShow/echartsMount)}else if(index3){this.$u.route(/pages/echartsShow/echartsPie)}else if(index4){this.$u.route(/pages/echartsShow/echartsRadar)}else if(index5){this.$u.route(/pages/echartsShow/echartsRing)}else if(index6){this.$u.route(/pages/echartsShow/echartsRose)}else if(index7){this.$u.route(/pages/echartsShow/echartsScatter)}else if(index8){this.$u.route(/pages/echartsShow/echartsWord)}}}};
/scriptstyle/* 下方这些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设置图表数据。 templateview classcharts-boxqiun-data-charts typearcbar:optsopts:chartDatachartData//view
/templatescript
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);},}
};
/scriptstyle scoped/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */.charts-box {margin-top: 25%;width: 100%;height: 300px;}
/style柱状图详情展示 templateview classcharts-boxqiun-data-charts typebar:optsopts:chartDatachartData//view
/templatescript
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);},}
};
/scriptstyle scoped/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */.charts-box {margin-top: 25%;width: 100%;height: 300px;}
/style下面就是选取几种图形展示详情效果就不一一介绍代码了详细的用法大家可以去秋云uCharts官网https://www.ucharts.cn/v2/#/demo/index
