uni-app 封装图表功能

需求

在 uni-app 中使用图表功能，两种推荐的图表工具

分析

在 Dcloud市场 搜索Echarts关键词，会出现几款图表工具，通过大家的下载量，可以看到秋云这个库是比较受欢迎的，其次是Echarts

1. 秋云 uchars

我们先来说说 秋云 这个工具库，我们点击下载进行导入项目中，接下来我们看一下平台的兼容性

1. 效果
   

2. 封装

<template><view class="charts-box"><qiun-data-charts :type="option.type" :opts="option.opts" :chartData="option.chartData" /></view>
</template><script setup>import {ref} from 'vue'import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"defineProps({option: {type: Object,default () {return {type:'column',//column、lineopts:{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: 70},yAxis: {},extra: {bar: {type: "stack",width: 30,meterBorde: 1,meterFillColor: "#FFFFFF",activeBgColor: "#000000",activeBgOpacity: 0.08,categoryGap: 2}}},chartData:{categories: ["2016","2017","2018","2019","2020","2021"],series: [{name: "目标值",data: [35,36,31,33,13,34]},{name: "完成量",data: [18,27,21,24,6,28]}]},}}}})const chartData = ref([])const opts = ref()onLoad((e) => {let res = {};chartData.value = JSON.parse(JSON.stringify(res));})
</script><style lang="scss" scoped>.charts-box {width: 100%;height: 100%;}
</style>

3. 使用

<template><view class="homeLayout pageBg"><!-- #ifndef MP-TOUTIAO --><custom-nav-bar title="图表"></custom-nav-bar><!-- #endif --><view class="select"><common-title><template #name>折线图</template><template #custom><view class="date"><uni-icons type="calendar" size="18"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></view></template></common-title><view class="content"><echarts></echarts></view></view></view>
</template><script setup>import echarts from '@/components/echarts/qiuyun-echarts.vue'import {ref} from 'vue'function echartsClick(params) {console.log('点击数据', params)}
</script><style lang="scss" scoped>.homeLayout {background:linear-gradient(to bottom, transparent, #fff 400rpx),linear-gradient(to right, #beecd8 20%, #F4E2D8);min-height: 80vh;.banner {width: 750rpx;padding: 30rpx 0;swiper {width: 690rpx;height: 340rpx;margin: 0 auto;&-item {// width: 100%;height: 100%;padding: 0;.like {width: 100%;height: 100%;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}}.notice {width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left {width: 140rpx;display: flex;align-items: center;justify-content: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {color: $brand-theme-color;font-weight: 600;font-size: 28rpx;}}.center {flex: 1;swiper {height: 100%;&-item {height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right {width: 70rpx;display: flex;align-items: center;justify-content: center;}}.select {padding-top: 50rpx;.date {color: $brand-theme-color;display: flex;align-items: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {margin-left: 5rpx;}}.content {width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view {white-space: nowrap;.box {width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child {margin-right: 30rpx;}}}}.theme {padding: 50rpx 0;.more {font-size: 32rpx;color: #888;}.content {margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;grid-template-columns: repeat(3, 1fr);}}}
</style>

2. Echarts

接下来看看 Echarts，随着图表的功能使用日渐普遍。接下来我们看一下 Echarts 的平台兼容性

1. 效果
   

2. 导入：main.js文件中全局导入或大家觉得局部导入好就用局部导入

import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

3. 封装

<template><view class="charts-box"><view style="width:700rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view></view>
</template><script setup>import {ref,watch,watchEffect} from 'vue'import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"const props = defineProps({option: {type: Object,default () {return {}}}})const chartRef = ref(null)watchEffect(()=>{// 组件能被调用必须是组件的节点已经被渲染到页面上const option = props.optionsetTimeout(async()=>{if(!chartRef.value) returnconst myChart = await chartRef.value.init(echarts)myChart.setOption(option)},300)})onLoad( ()=>{})</script><style lang="scss" scoped>.charts-box {width: 100%;height: 100%;}
</style>

4. 使用

<template><view class="homeLayout pageBg"><!-- #ifndef MP-TOUTIAO --><custom-nav-bar title="图表"></custom-nav-bar><!-- #endif --><view class="select"><common-title><template #name>折线图</template><template #custom><view class="date"><uni-icons type="calendar" size="18"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></view></template></common-title><view class="content"><echarts :option="option"></echarts></view></view></view>
</template><script setup>import echarts from '@/components/echarts/chart-echarts.vue'import {ref} from 'vue'const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},confine: true},legend: {data: ['热度', '正面', '负面']},grid: {left: 8,right: 20,bottom: 15,top: 40,containLabel: true},xAxis: [{type: 'value',axisLine: {lineStyle: {color: '#999999'}},axisLabel: {color: '#666666'}}],yAxis: [{type: 'category',axisTick: {show: false},data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],axisLine: {lineStyle: {color: '#999999'}},axisLabel: {color: '#666666'}}],series: [{name: '热度',type: 'bar',label: {normal: {show: true,position: 'inside'}},data: [300, 270, 340, 344, 300, 320, 310],},{name: '正面',type: 'bar',stack: '总量',label: {normal: {show: true}},data: [120, 102, 141, 174, 190, 250, 220]},{name: '负面',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'left'}},data: [-20, -32, -21, -34, -90, -130, -110]}]};function echartsClick(params) {console.log('点击数据', params)}
</script><style lang="scss" scoped>.homeLayout {background:linear-gradient(to bottom, transparent, #fff 400rpx),linear-gradient(to right, #beecd8 20%, #F4E2D8);min-height: 80vh;.banner {width: 750rpx;padding: 30rpx 0;swiper {width: 690rpx;height: 340rpx;margin: 0 auto;&-item {// width: 100%;height: 100%;padding: 0;.like {width: 100%;height: 100%;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}}.notice {width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left {width: 140rpx;display: flex;align-items: center;justify-content: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {color: $brand-theme-color;font-weight: 600;font-size: 28rpx;}}.center {flex: 1;swiper {height: 100%;&-item {height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right {width: 70rpx;display: flex;align-items: center;justify-content: center;}}.select {padding-top: 50rpx;.date {color: $brand-theme-color;display: flex;align-items: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {margin-left: 5rpx;}}.content {width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view {white-space: nowrap;.box {width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child {margin-right: 30rpx;}}}}.theme {padding: 50rpx 0;.more {font-size: 32rpx;color: #888;}.content {margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;grid-template-columns: repeat(3, 1fr);}}}
</style>