1、插件引入
在Dcloud插件市场下载echarts插件:插件地址
或去相关代码库下载js:gitee地址
将static文件夹下中的echarts.min.js和ecStat.min.js复制到自己项目的static文件夹内或到echarts官方定制自己需要的图表类型下载js文件并放入相关目录。echarts定制地址
将如下相关目录文件复制到自己目录文件:
最后目录如下:
2、页面中使用:
view中:
bash
<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:
bash
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:
bash
.chart_content_item {
width: 45%;
height: 260rpx;
position: relative;
.text {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
}
}
效果图: