文章目录
- 需求
- 分析
- 1. 秋云 uchars
- 2. Echarts
需求
在 uni-app 中使用图表功能，两种推荐的图表工具
分析
在 Dcloud市场 搜索Echarts关键词，会出现几款图表工具，通过大家的下载量，可以看到秋云这个库是比较受欢迎的，其次是Echarts
1. 秋云 uchars
我们先来说说 秋云 这个工具库，我们点击下载进行导入项目中，接下来我们看一下平台的兼容性
-
效果
-
封装
<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、line
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: 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>
- 使用
<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 的平台兼容性
-
效果
-
导入：
main.js文件中全局导入或大家觉得局部导入好就用局部导入
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
- 封装
<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.option
setTimeout(async()=>{
if(!chartRef.value) return
const myChart = await chartRef.value.init(echarts)
myChart.setOption(option)
},300)
})
onLoad( ()=>{
})
</script>
<style lang="scss" scoped>
.charts-box {
width: 100%;
height: 100%;
}
</style>
- 使用
<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>
