1粘我、引入echarts組件
在Dcloud插件市場下載echarts插件https://ext.dcloud.net.cn/plugin?id=4899
文檔描述支持vue2、vue3，我這里使用的vue3
下載插件壓縮包解壓后會得到一下幾個文件
image.png
選擇插件components文件夾下中的所有文件復(fù)制到自己項目的components文件夾內(nèi)
image.png
選擇插件static文件夾下中的echarts.min.js和ecStat.min.js復(fù)制到自己項目的static文件夾內(nèi)
image.png
由于發(fā)布小程序的主包大小不超多1.5M,建議在echarts官網(wǎng)（https://echarts.apache.org/zh/builder.html）下載中定制自己項目所需用到的圖表類型逊抡，我的項目只用到折線圖和餅圖，所以我只定制了這兩種同辣，點擊下載就得到了echarts.min.js工坊，最后將下載的echarts.min.js替換原插件中的echarts.min.js
image.png
我的目錄結(jié)構(gòu)如下：
src文件：
image.png
components文件：
image.png
static文件：
image.png
2、封裝自定義echarts組件
image.png
在components文件夾下創(chuàng)建cusEcharts文件夾恋拷，里面創(chuàng)建一個index.vue文件同于封裝echarts組件资厉，內(nèi)容如下：
注：H5端和小程序引入echarts方式不同，小程序只支持require方式引入蔬顾，H5端使用npm安裝
npm install echarts@^5.3.3 -s
<!-- 圖表組件 -->
<template>
<view class="chart_content_item">
<LEchart ref="chartRef"></LEchart>
</view>
</template>
<script lang="ts" setup>
import LEchart from "@/components/l-echart/l-echart.vue"
import { ref, onMounted, watch } from "vue"
// #ifdef H5
import * as echarts from 'echarts'
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min.js')
// #endif
const chartRef = ref()
const props = defineProps({
option: {
type: Object
}
})
onMounted(() => {
setTimeout(() => {
if (!chartRef.value) return
chartRef.value.init(echarts, chart => {
chart.setOption(props.option)
})
}, 300)
})
watch(() => props.option, (newVal, oldVal) => {
if (chartRef.value) {
chartRef.value.init(echarts, chart => {
chart.setOption(newVal)
})
}
}, { deep: true, immediate: true })
</script>
<style lang="scss" scoped>
.chart_content_item {
width: 100%;
height: 100%;
}
</style>
在同目錄下新建一個option.ts配置文件（這里引入echarts是項目中有漸變需求宴偿，沒有可以不用引入）
我這里數(shù)據(jù)配置用的是數(shù)據(jù)集的格式湘捎，可以根據(jù)自己喜歡配置
// #ifdef H5
import * as echarts from 'echarts'
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min')
// #endif
//折線圖配置
export const lineOption = {
legend: {
show: true,
data: [] as any[],
},
tooltip: {
show: true,
trigger: 'axis',
confine: true,
axisPointer: {
type: 'line',
snap: true
},
textStyle: {
textShadowColor: "transparent",
textShadowBlur: 5,
}
},
grid: {
left: '3%',
right: '5%',
top: '20%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: true,
inside: true
},
axisLine: {
show: true,
lineStyle: {
color: '#707070'
}
},
axisLabel: {
textStyle: {
color: "#A8ADCF"
}
}
},
yAxis: {
type: 'value',
name: "",
nameTextStyle: {
color: "#A8ADCF"
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#707070'
}
},
axisLabel: {
textStyle: {
color: "#A8ADCF"
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(112, 112, 112, 0.2)'
}
}
},
dataset: {
source: [] as any[],
},
series: [
{
type: "line",
smooth: true,
symbol: 'none',
lineStyle: {
color: "#35ADFD",
width: 1.5,
},
areaStyle: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(31, 215, 236, 0.1)'
},
{
offset: 0.5,
color: 'rgba(83, 169, 255, 0.1)'
},
{
offset: 1,
color: 'rgba(208, 222, 255, 0.1)'
}
])
},
}
],
color: ['#83bff6']
}
// 餅圖配置
export const pieOption = {
color: ['#009DFF', "#22E4FF", "#3BFFD0", "#04e38a", "#9dff86"],
tooltip: {
trigger: 'item',
show: true
},
legend: {
type: "scroll",
top: "bottom",
bottom: 0,
itemWidth: 6,
itemHeight: 6,
icon: "circle", // 圖例圖形
itemGap: 20,
},
dataset: {
source: [] as any[]
},
series: [
{
type: 'pie',
radius: ['40%', '63%'],
center: ['50%', '48%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: 'ieeppvb%',
},
}
]
}
3、組件引用
在所需文件引入組件（vue3引入就行窄刘，不需要注冊）
image.png
定義圖表數(shù)據(jù)伶棒，以及拷貝圖表配置
image.png
圖表數(shù)據(jù)賦值
image.png
圖表使用：
image.png
4疯汁、最終效果
H5端：
image.png
小程序：
image.png
