官網(wǎng)地址
uni-app插件市場地址
導(dǎo)入插件
image.png
引入使用：
柱圖折線圖：
image.png
<template>
<view class='analysis-container'>
<view class='title'>
<text>標(biāo)題</text>
</view>
<!-- 圖表容器：設(shè)置寬度和高度 -->
<view style="width:600rpx;height:550px;margin-top:20rpx">
<view style="width:100%;height:180px">
<l-echart ref="salesChartRef"></l-echart>
</view>
<view style="width:100%;height:180px;margin-top:10px">
<l-echart ref="collectionChartRef"></l-echart>
</view>
<view style="width:100%;height:180px;margin-top:10px">
<l-echart ref="fundsChartRef"></l-echart>
</view>
</view>
</view>
</template>
<script setup>
// 引入 echarts 庫
import * as echarts from 'echarts'
// 引入 unibest工具庫
import { httpGet } from '@/utils/http'
// 引入數(shù)字格式化庫
import numeral from 'numeral';
// 獲取 DOM 元素的引用（用于初始化圖表）
const salesChartRef = ref(null)
const collectionChartRef = ref(null)
const fundsChartRef = ref(null)
// 存儲(chǔ) ECharts 實(shí)例
let salesChartInstance = null
let collectionChartInstance = null
let fundsChartInstance = null
let datexAxis = ref([]);//x軸會(huì)計(jì)期間的時(shí)間標(biāo)記
let saleSamountSeries = ref([]);//圖例標(biāo)點(diǎn)(銷售金額)
let collectionSamountSeries = ref([]);//圖例標(biāo)點(diǎn)(回款金額)
let fundsSamountSeries = ref([]);//圖例標(biāo)點(diǎn)(資金金額)
const colors = ['#4080FF', '#3DCBDB', '#ED1919'];
// 銷售和回款柱狀圖配置
const salesOption = {
color: [colors[0]], // 銷售金額顏色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
bottom: '10%',
right: '5%',
left: '12%'
},
xAxis: {
type: 'category',
axisTick: { show: false },
data: datexAxis.value,
axisLine: {
lineStyle: { type: [10, 20] }
}
},
yAxis: {
type: 'value',
name: '銷售金額(萬元)',
axisLine: {
show: true,
lineStyle: { color: colors[0] }
}
},
series: [{
name: '銷售金額(萬元)',
type: 'bar',
data: saleSamountSeries.value,
barWidth: 20,
label: { show: false }
}]
}
// 回款柱狀圖配置
const collectionOption = {
color: [colors[1]], // 回款金額顏色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
bottom: '15%',
right: '5%',
left: '12%'
},
xAxis: {
type: 'category',
axisTick: { show: false },
data: datexAxis.value,
axisLine: {
lineStyle: { type: [10, 20] }
}
},
yAxis: {
type: 'value',
name: '回款金額(萬元)',
axisLine: {
show: true,
lineStyle: { color: colors[1] }
}
},
series: [{
name: '回款金額(萬元)',
type: 'bar',
data: collectionSamountSeries.value,
barWidth: 20,
label: { show: false }
}]
}
// 資金折線圖配置
const fundsOption = {
color: [colors[2]], // 資金顏色
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
grid: {
top: '15%',
bottom: '15%',
right: '5%',
left: '12%'
},
xAxis: {
type: 'category',
axisTick: { show: false },
data: datexAxis.value,
axisLine: {
lineStyle: { type: [10, 20] }
}
},
yAxis: {
type: 'value',
name: '資金(萬元)',
axisLine: {
show: true,
lineStyle: { color: colors[2] }
}
},
series: [{
name: '資金(萬元)',
type: 'line',
smooth: true,
symbol: 'none',
data: fundsSamountSeries.value,
label: { show: false }
}]
}
// 窗口大小變化時(shí)調(diào)整圖表尺寸
const resizeChart = () => {
salesChartInstance?.resize()
fundsChartInstance?.resize()
}
// 組件掛載后執(zhí)行初始化
onMounted(() => {
setTimeout(async () => {
if (!salesChartRef.value || !fundsChartRef.value) return
// 初始化銷售圖表
salesChartInstance = await salesChartRef.value.init(echarts)
salesChartInstance.setOption(salesOption)
// 初始化回款圖表
collectionChartInstance = await collectionChartRef.value.init(echarts)
collectionChartInstance.setOption(collectionOption)
// 初始化資金圖表
fundsChartInstance = await fundsChartRef.value.init(echarts)
fundsChartInstance.setOption(fundsOption)
getAnalysisData();
}, 300)
})
// 獲取分析數(shù)據(jù)
const getAnalysisData = () => {
var result = httpGet('WebService/GetFunReportDataSource', { productName: "Cust_App_經(jīng)營分析" }).then((res) => {
result.value = JSON.parse(res.Data);
result.value.filter((item) => {
datexAxis.value.push(item.會(huì)計(jì)期間);
item.銷售金額 = item.銷售金額 > 0 ? numeral(item.銷售金額 / 10000).format('0,0.00') : 0;
saleSamountSeries.value.push(item.銷售金額);
item.回款金額 = item.回款金額 > 0 ? numeral(item.回款金額 / 10000).format('0,0.00') : 0;
collectionSamountSeries.value.push(item.回款金額);
item.資金 = item.資金 > 0 ? numeral(item.資金 / 10000).format('0,0.00') : 0;
fundsSamountSeries.value.push(item.資金);
})
// 更新銷售圖表數(shù)據(jù)
salesOption.xAxis.data = datexAxis.value
salesOption.series[0].data = saleSamountSeries.value
salesChartInstance?.setOption(salesOption)
// 更新回款圖表數(shù)據(jù)
collectionOption.xAxis.data = datexAxis.value
collectionOption.series[0].data = collectionSamountSeries.value
collectionChartInstance?.setOption(collectionOption)
// 更新資金圖表數(shù)據(jù)
fundsOption.xAxis.data = datexAxis.value
fundsOption.series[0].data = fundsSamountSeries.value
fundsChartInstance?.setOption(fundsOption)
})
}
</script>
<style lang="scss" scoped>
.analysis-container {
margin-top: 24rpx;
background-color: #fff;
border-radius: 18rpx;
overflow-y: auto;
padding: 26rpx 32rpx;
box-sizing: border-box;
.title {
border-radius: 5px 5px 0px 0px;
height: 30px;
text-align: left;
& text {
height: 20px;
font-weight: 600;
font-size: var(--wot-radio-label-fs, var(--wot-checkbox-label-fs, 20px));
background-image: url("@/static/images/chat/titleBJ.png");
background-repeat: no-repeat;
background-size: 100% 60%;
background-position: 10rpx 20rpx;
}
}
}
.profitan-axis {
width: 100%;
height: 100%;
}
@media(max-width: 768px) {
.profitan-axis {
width: 450;
}
}
:deep() {
.echarts-legend-icon {
width: 12px;
height: 12px;
background: none;
border: none;
}
}
</style>
餅圖：
image.png
<template>
<view class='product-container'>
<view class='title'>
<text>標(biāo)題</text>
</view>
<!-- 圖表容器：設(shè)置寬度和高度 -->
<view style="width: 600rpx; height: 350px;margin-top: 20rpx;">
<l-echart ref="chartRef"></l-echart>
</view>
</view>
</template>
<script setup>
import * as echarts from 'echarts'
import { httpGet } from '@/utils/http'
// 獲取 DOM 元素的引用（用于初始化圖表）
const chartRef = ref(null)
let chartInstance = ref(null);
const option = {
tooltip: {
trigger: 'item',
formatter: (p) => {
return '名稱:' + p.name + '\n占比:' + p.value + '%'
}
},
legend: {
top: -20,
right: 20
},
series: [
{
name: '名稱',
type: 'pie',
center: ['50%', '58%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 8
},
label: {
show: false,
position: 'center',
// format: ': u0z1t8os',
fontSize: 20,
fontWeight: 'bold',
formatter: function (params) {
const name = params.name;
// 每6個(gè)字符分割一次
const chunkSize = 6;
const lines = [];
for (let i = 0; i < name.length; i += chunkSize) {
lines.push(name.slice(i, i + chunkSize));
}
return lines.join('\n'); // 換行顯示
}
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: []
}
]
};
onMounted(() => {
// 組件能被調(diào)用必須是組件的節(jié)點(diǎn)已經(jīng)被渲染到頁面上
nextTick(async () => {
if (!chartRef.value) return
chartInstance = await chartRef.value.init(echarts)
chartInstance.setOption(option)
getProductData();
})
})
// 獲取分析數(shù)據(jù)
const getProductData = () => {
// 增加登錄邏輯，獲取到登錄用戶所用的數(shù)據(jù)庫Id
var result = httpGet('WebService/GetFunReportDataSource', { productName: "cust_app_產(chǎn)品分布" }).then((res) => {
result.value = JSON.parse(res.Data);
const seriesdata = [];//組裝圖例所用的數(shù)據(jù)
result.value.forEach(item => {
if (item.占比.endsWith('%'))
item.占比 = parseFloat(item.占比)
var data = { name: item.名稱, value: item.占比 };
seriesdata.push(data);
});
option.series[0].data = seriesdata;
chartInstance?.setOption(option);
})
}
</script>
<style lang="scss" scoped>
.product-container {
margin-top: 24rpx;
background-color: #fff;
border-radius: 18rpx;
overflow-y: auto;
padding: 26rpx 32rpx;
box-sizing: border-box;
.title {
border-radius: 5px 5px 0px 0px;
height: 30px;
text-align: left;
& text {
height: 20px;
font-weight: 600;
font-size: var(--wot-radio-label-fs, var(--wot-checkbox-label-fs, 20px));
background-image: url("@/static/images/chat/titleBJ.png");
background-repeat: no-repeat;
background-size: 100% 60%;
background-position: 10rpx 20rpx;
}
}
}
</style>
