【uniapp】微信小程序使用echarts图表记录

news2024/10/23 2:44:07

1、插件引入

在Dcloud插件市场下载echarts插件：插件地址
或去相关代码库下载js：gitee地址

将static文件夹下中的echarts.min.js和ecStat.min.js复制到自己项目的static文件夹内或到echarts官方定制自己需要的图表类型下载js文件并放入相关目录。echarts定制地址
在这里插入图片描述

将如下相关目录文件复制到自己目录文件：
在这里插入图片描述
最后目录如下：

2、页面中使用：

view中：

		<LEchart style="position: relative;" ref="chartRef" @finished="init"></LEchart>
		<view class="text">设备总数
						<view style="font-size: 80rpx;font-weight: 600;line-height: 90rpx;">
							80
						</view>
		</view>
		<view style="width: 100%; height: 360rpx;position: relative;">
				<LEchart ref="chartLine" @finished="initLine"></LEchart>
			</view>

js：

import LEchart from "@/components/l-echart/l-echart.vue"
import * as echarts from "@/static/echarts.min.js"
export default {
		components: {
			LEchart
		},
		data() {
			return {
			option: {
					color: ['#71b544', "#ff6315", "#f7e920", "#d9d9d9", "#9dff86"],
					tooltip: {
						trigger: 'item',
						show: true
					},
					legend: {
						show: false,
						type: "scroll",
						top: "bottom",
						bottom: 10,
						itemWidth: 15,
						itemHeight: 15,
						icon: "circle", // 图例图形
						itemGap: 20,
					},
					dataset: {
						source: [{
								name: '在线-运行',
								value: 65
							},
							{
								name: '在线-故障',
								value: 5
							},
							{
								name: '离线-正常',
								value: 7
							},
							{
								name: '离线-故障',
								value: 3
							}
						]
					},
					series: [{
						type: 'pie',
						radius: ['70%', '95%'],
						center: ['50%', '48%'],
						avoidLabelOverlap: false,
						clockwise: false, // 设置为 false 表示逆时针
						label: {
							show: false,
							position: 'outside',
							formatter: '{d}%',
						},
					}]
				},
				lineOption:{
					legend: {
					        show: false,
					    },
					    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: [
								["8:00",21],
								["9:00",21.6],
								["10:00",22],
								["11:00",26],
								["12:00",28],
								["13:00",28],
								["14:00",27],
								["15:00",25],
								["16:00",23],
								["17:00",23],
							],
					    },
					    series: [
					        {
					            type: "line",
					            smooth: true,
					            symbol: 'none',
					            lineStyle: {
					                color: "#6ffd90",
					                width: 1.5,
					            },
					            areaStyle: {
					                show: true,
					                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
					                    {
					                        offset: 0,
					                        color: 'rgba(30, 236, 157, 0.1)'
					                    },
					                    {
					                        offset: 0.5,
					                        color: 'rgba(96, 255, 154, 0.1)'
					                    },
					                    {
					                        offset: 1,
					                        color: 'rgba(211, 255, 235, 0.1)'
					                    }
					                ])
					            },
					        }
					    ],
					    color: ['#83bff6']
				}
			
				
			}
		}，
		methods: {
			async init() {
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
				// console.log(11);
			},
			async initLine() {
				const chart = await this.$refs.chartLine.init(echarts);
				chart.setOption(this.lineOption)
				// console.log(21);
			}
	}

}

css：

	.chart_content_item {
		width: 45%;
		height: 260rpx;
		position: relative;

		.text {
			position: absolute;
			top: 20%;
			width: 100%;
			text-align: center;
		}
	}