废话少说，直接上代码
linechart.vue
<template>
<div :class="className" :style="{ height: height, width: width }" id="linechart"/>
</template>
<script>
import echarts from "echarts";
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "linechart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
//接收后端数据
chartData: {
type: Object,
required: true
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
created() {
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "linechart");
this.setOptions(); //页面数据
},
setOptions() {
//处理后台数据部分
this.chart.setOption({
grid: {
left: 10,
right: 20,
bottom: 20,
top: 30,
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
padding: [5, 10],
},
legend: {
left: "right",
data: ['2023-05-23', '2023-05-24', '2023-05-25'],
},
xAxis: {
data: [
"盖板转接片焊接",
"合芯包Mylar",
"入壳预焊Hipot2",
"顶盖激光焊",
"前氦检",
"烘烤Hipot3",
"一次注液",
"负压化成",
"高温静置1",
"二次注液",
"密封钉焊接",
"后氦检",
"分容",
"常温静置1",
"DCR",
"高温静置2",
"常温静置2",
"OCV1",
"常温静置3",
"包膜",
"OCV2",
"分选"
],
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: "dashed",
color: "#DDD",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#333",
},
},
nameTextStyle: {
color: "#999",
},
splitArea: {
show: false,
},
},
series: [
{
"name": "2023-05-23",
"symbolSize": 6,
"itemStyle": {
"normal": {
"color": "#FF8352",
"lineStyle": {
"color": "#FF8352",
"width": 2
}
}
},
"areaStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(255,131,82,0.3)"
},
{
"offset": 1,
"color": "rgba(255,131,82,0.1)"
}
]
},
"shadowColor": "rgba(255,131,82,0.1)",
"shadowBlur": 10
}
},
"smooth": true,
"type": "line",
"data": [
13,
26,
26,
26,
52,
26,
52,
26,
52,
52,
26,
52,
26,
78,
26,
52,
78,
52,
78,
26,
52,
0
],
"animationDuration": 2800,
"animationEasing": "cubicInOut"
},
{
"name": "2023-05-24",
"symbolSize": 6,
"itemStyle": {
"normal": {
"color": "#F8456B",
"lineStyle": {
"color": "#F8456B",
"width": 2
}
}
},
"areaStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(248,69,107,0.3)"
},
{
"offset": 1,
"color": "rgba(248,69,107,0.1)"
}
]
},
"shadowColor": "rgba(248,69,107,0.1)",
"shadowBlur": 10
}
},
"smooth": true,
"type": "line",
"data": [
6,
6,
6,
6,
12,
6,
12,
6,
12,
12,
6,
12,
6,
18,
6,
12,
18,
12,
18,
6,
12,
0
],
"animationDuration": 2800,
"animationEasing": "cubicInOut"
},
{
"name": "2023-05-25",
"symbolSize": 6,
"itemStyle": {
"normal": {
"color": "#4AEAB0",
"lineStyle": {
"color": "#4AEAB0",
"width": 2
}
}
},
"areaStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(74,234,176,0.3)"
},
{
"offset": 1,
"color": "rgba(74,234,176,0.1)"
}
]
},
"shadowColor": "rgba(74,234,176,0.1)",
"shadowBlur": 10
}
},
"smooth": true,
"type": "line",
"data": [
5,
9,
9,
9,
18,
9,
18,
9,
18,
18,
9,
18,
9,
27,
9,
18,
27,
18,
27,
9,
18,
0
],
"animationDuration": 2800,
"animationEasing": "cubicInOut"
}
]
});
},
},
};
</script>
作用是自适应大小
resize.js
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}
PS：以下是补充部分仅供参考，处理后端数据需要根据实际返回数据结构不同自行调整。
let color = [ "#FF8352", "#F8456B","#4AEAB0", "#00FFFF", "#E271DE","#0E7CE2"];
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
let seriesData=[];//series数据
let legendlist=[];// ['2023-05-23', '2023-05-24', '2023-05-25']
if(this.chartData.SeqOutWorkDateReportList){
this.chartData.SeqOutWorkDateReportList.forEach((element,i) => {
legendlist.push(element.SeqName)
let dataObj={
name: "",
symbolSize: 6, // 折线点的⼤⼩
itemStyle: {
normal: {
color:color[i],
lineStyle: {
color: color[i],
width: 2, //线的宽度
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[i], 0.3),
},
{
offset: 1,
color: hexToRgba(color[i], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[i], 0.1),
shadowBlur: 10,
},
},
smooth: true, //true 平滑折线图 false基础折线图
type: "line",
data: [],
animationDuration: 2800,
animationEasing: "cubicInOut",
}
dataObj.name=element.SeqName
dataObj.data=element.TotalQty
seriesData.push(dataObj)
});
}
if(seriesData.length == 0){
return
}
8053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
