1、引入echarts组件
在Dcloud插件市场下载echarts插件https://ext.dcloud.net.cn/plugin?id=4899
文档描述支持vue2、vue3，我这里使用的vue3
下载插件压缩包解压后会得到一下几个文件
image.png
选择插件components文件夹下中的所有文件复制到自己项目的components文件夹内
image.png
选择插件static文件夹下中的echarts.min.js和ecStat.min.js复制到自己项目的static文件夹内
image.png
由于发布小程序的主包大小不超多1.5M,建议在echarts官网（https://echarts.apache.org/zh/builder.html）下载中定制自己项目所需用到的图表类型，我的项目只用到折线图和饼图，所以我只定制了这两种，点击下载就得到了echarts.min.js，最后将下载的echarts.min.js替换原插件中的echarts.min.js
image.png
我的目录结构如下：
src文件：
image.png
components文件：
image.png
static文件：
image.png
2、封装自定义echarts组件
image.png
在components文件夹下创建cusEcharts文件夹，里面创建一个index.vue文件同于封装echarts组件，内容如下：
注：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是项目中有渐变需求，没有可以不用引入）
我这里数据配置用的是数据集的格式，可以根据自己喜欢配置
// #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: '{d}%',
},
}
]
}
3、组件引用
在所需文件引入组件（vue3引入就行，不需要注册）
image.png
定义图表数据，以及拷贝图表配置
image.png
图表数据赋值
image.png
图表使用：
image.png
4、最终效果
H5端：
image.png
小程序：
image.png
