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;}}
效果图：
参考文章：uniapp引入echarts图表（兼容H5端和微信小程序）
-熔断)
