echarts 图表组件：
<template>
<div :style="{ height: '100%' }">
<div class="foldLine" ref="foldLine" :style="{ width: widths, height: heights }"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
id: {
type: String,
default: 'lineEchartNew'
},
heights: {
type: String,
default: '100%'
},
widths: {
type: String,
default: '100%'
},
tagName: {
type: String,
default: '排名'
},
indexName: {
type: String,
default: ''
},
unit: {
type: String,
default: ''
},
chartObj: {
type: Array,
default: () => {
return [];
}
},
objs: {
type: Object,
default: () => {
return {
height: '100%'
};
}
}
},
data() {
return {
chart: null
};
},
watch: {
chartObj: {
handler() {
this.initEchats();
},
deep: true
}
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
beforeDestroy() {
this.chart && this.chart.dispose();
this.chart = null;
},
methods: {
init() {
this.chart = echarts.init(this.$refs.foldLine);
this.initEchats();
},
// 整体折线图显示不通颜色
getLineColor(healthListScore) {
let arr = [];
healthListScore.forEach((v, i) => {
let obj = {
gt: i - 1,
lt: i,
// color: healthListScore[i] < 90 ? 'rgba(229,27,88,0.68)' : '#D0FB7C'
color: '#D0FB7C'
};
arr.push(obj);
});
return arr;
},
initEchats() {
let option = {
tooltip: {
trigger: 'axis'
// formatter: '{a1}<br/>{b1}：{c1}%'
},
grid: {
top: '25%',
left: '3%',
right: '8%',
bottom: '15%',
containLabel: true
},
legend: {
top: '0',
x: 'center',
textStyle: {
fontSize: 12,
color: 'rgba(101, 213, 255, 1)'
},
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度、
itemGap: 12, // 设置间距
data: ['资源容量', '实际使用量', '资源使用率']
},
xAxis: {
axisLine: {
lineStyle: {
color: '#D0DEEE' // 设置 x 轴颜色
}
},
data: ['2024/09', '2024/10', '2024/11', '2024/12', '2025/01', '2025/02']
},
color: ['#4489F0', '#0BF0FF', '#FB944F'],
yAxis: [
{
type: 'value',
name: '单位',
//坐标轴最大值、最小值、强制设置数据的步长间隔
// max: 33,
// min: 15,
// 刻度线的间距
// interval: 3.6,
axisLabel: {
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
}
//y轴上带的单位
// formatter: '{value} ℃'
},
axisLine: {
lineStyle: {
type: 'dashed' // 设置虚线类型
}
},
//坐标轴刻度相关设置。
axisTick: {
show: false
},
//分割线
splitLine: {
show: true,
lineStyle: {
color: '#a8aab0',
type: 'dashed',
//透明度
opacity: 0.3,
width: 1
}
}
},
{
type: 'value',
name: '使用率(%)',
max: 100,
min: 0,
interval: 16.4,
// axisLabel: {
// textStyle: {
// color: '#a8aab0',
// fontStyle: 'normal',
// fontFamily: '微软雅黑',
// fontSize: 12
// },
// // formatter: '{value} %'
// formatter: '{value} %'
// },
//轴线
axisLine: {
lineStyle: {
type: 'dashed' // 设置虚线类型
}
},
//坐标轴刻度相关设置。
axisTick: {
show: false
},
//分割线
splitLine: {
show: false,
lineStyle: {
color: '#a8aab0',
type: 'dashed',
//透明度
opacity: 0.3,
width: 1
}
}
}
],
series: [
{
name: '资源容量',
type: 'bar',
barWidth: 12,
z: '-1',
barGap: '-100%',
itemStyle: {
borderRadius: [10, 10, 0, 0] // 这里设置圆角的大小，数组的前两个值设置上左的圆角，后两个值设置下右的圆角
},
data: [1000, 800, 700, 1000, 600, 1000]
},
{
name: '实际使用量',
type: 'bar',
barWidth: 12,
data: [555, 750, 656, 850, 540, 750]
},
{
name: '资源使用率',
type: 'line',
// barWidth: 24,
barGap: '1%',
symbol: 'circle',
symbolSize: 5,
yAxisIndex: 1, //指定需要使用的Y轴
data: [100, 70, 50, 90, 100, 80, 90],
itemStyle: {
color: '#FB944F',
borderColor: '#D0FB7C',
borderWidth: 1,
borderType: 'solid'
}
}
]
};
if (option && typeof option === 'object') {
this.chart.clear(); //画布清空
this.chart.resize(); //自适应div的大小
this.chart.setOption(option, true);
// this.chart.setOption(
// {
// series: seriesArr
// },
// { notMerge: false, lazyUpdate: false, silent: false }
// );
}
}
}
};
</script>
<style lang="scss" scoped></style>
