<template>
<div
class="echart"
ref="mychart"
id="mychart"
:style="{ float: 'left', width: '100%', height: '400px' }"
></div>
</template>
<script>
import * as echarts from 'echarts';
export default {<!-- -->
mounted() {<!-- -->
this.$nextTick(() => {<!-- -->
this.initEcharts();
});
},
methods: {<!-- -->
initEcharts() {<!-- -->
const chartDom = this.$refs.mychart;
const myChart = echarts.init(chartDom);
const option = {<!-- -->
xAxis: {<!-- -->
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {<!-- -->
type: 'value'
},
series: [
{<!-- -->
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
},
{<!-- -->
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
}
]
};
option & amp; & amp; myChart.setOption(option);
window.addEventListener("resize", () => {<!-- -->
myChart.resize();
});
}
}
};
</script>
Just reference the above code components into any page
Advanced version
<template>
<div class="echart" ref="mychart" id="mychart" :style="{ float: 'left', width: '1550px', height: '400px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {<!-- -->
mounted() {<!-- -->
this.$nextTick(() => {<!-- -->
this.initEcharts();
});
},
methods: {<!-- -->
initEcharts() {<!-- -->
const chartDom = this.$refs.mychart;
const myChart = echarts.init(chartDom);
const option = {<!-- -->
xAxis: {<!-- -->
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 , 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48 , 49]
},
yAxis: {<!-- -->
type: 'value'
},
animation: true,
animationDuration: 200,
series: [
{<!-- -->
name: 'Series 1', // Name the first line
data: [0.146299484, 0.488812392, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.85 3700516, 0.853700516, 0.853700516, 0.905335628, 0.908777969, 0.908777969, 0.91222031, 0.91394148, 0.91394148, 0.91394148, 0.9 1394148, 0.917383821, 0.919104991, 0.919104991, 0.919104991 , 0.919104991, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.92 0826162, 0.920826162, 0.922547332, 0.922547332, 0.920826162, 0.920826162, 0.919104991, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162 , 0.920826162]
,
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 2', // Name the first line
data: [0.746837711, 0.693094299, 0.589175003, 0.472434546, 0.395390484, 0.354052018, 0.342358122, 0.33899998, 0.33765998, 0.3362 68014, 0.33450221, 0.332062047, 0.329042346, 0.325089622, 0.319565519, 0.31316877, 0.306199199, 0.300268508, 0.294847805, 0.2 91002565, 0.288495182, 0.288172036, 0.286044006, 0.285230208 , 0.28466754, 0.284258943, 0.28390811, 0.283597514, 0.28333019, 0.283045125, 0.282801505, 0.282566763, 0.282336899, 0.28214 6023, 0.281934799, 0.281753167, 0.281543406, 0.281496848, 0.281532406, 0.281580297, 0.281468421, 0.281410495, 0.281327578,0. 281245982, 0.281173373, 0.28107471, 0.281006722, 0.280915136, 0.280841162 , 0.280741451]
,
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 3', // Name the first line
data: [0.07986211480410355, 0.6517372341951067, 0.41385294524584737, 0.6163191951941506, 0.6206783655953648, 0.7636872917450339, 0.7439357975795664, 0.7203172184579634, 0.7149379703192014, 0.577405274584136, 0.8763135621581373, 0.5493885546736994, 0.515 0.8023493108394422, 0.62730962 29190577, 0.8032112404342641, 0.6025618583351057, 1.0245596846925464, 0.5718433107179994, 0.5593881362140605 , 0.22242748556854997, 0.2966127672298806, 0.8066154723839191, 0.8355420713730167, 0.6766256286403879, 0.7357071717833827, 0.959180317084166, 0.7765503280949104, 0.30346413458717814, 1.0956984226605853, 0.5055977490815643, 0.6837113787819997, 0.992 0447456822786, 0.8101537860949151, 0.46232304648783973, 0.8605478742198378, 0.6225950720145431, 0.982050565856414, 0.58663399 0.446224985208226 2 , 0.7700882514451461]
,
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 4', // Name the first line
data: [0.11575014388733451, 0.09835474099812513, 0.3558943511081638, 0.21776505746572283, 0.2208660025590413, 0.2059522981692951 , 0.29643899114232497, 0.13876593885167018, -0.014082178864677886, 0.2391107801146606, 0.0073349828246842, -0.0444498398272824, 0.15546688335767922, -0.04829340311837238, 0.005217555252402639, -0.026462688685092384, 0.031102954557168883, 0.34552410247482 97, 0.17076846430683296, 0.14809861203877853, -0.06559331147778052, 0.3548208992357448, 0.20789027780988628, 0.2357676531483298, 0.19374604840864235, 0.3760935575179239, -0.05593054544287307, 0.1707625940649708, 0.28111459242281345, 0.24119086754129268, -0.14233611329045326, 0.10418694930831524, -0.12377903426262749, 0.2446712348338192, 0.21196915017179102, 0.2897096803689686, -0.27413853986166553, -0.20811001588605205, 0.06315707603383772, 0 .253929668877274, 0.18760103956084329, 0.10130279035653036, -0.4008113432473425, 0.010279406735280439, 0.2922645069051566, 0.14597082240953174, 0.07839500134212771, 0.1179759141136523, 0.32705004299668483 , -0.1402905809930205],
type: 'line',
markPoint: {<!-- -->
data: [
{<!-- --> type: 'max', name: 'Max Value' },
{<!-- --> type: 'min', name: 'minimum value' }
]
},
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
],
//Configure tooltip
tooltip: {<!-- -->
trigger: 'axis',
}
};
option & amp; & amp; myChart.setOption(option);
window.addEventListener("resize", () => {<!-- -->
myChart.resize();
});
//Add mouse move event
myChart.on('mouseover', (params) => {<!-- -->
console.log(params)
if (params.seriesType === 'line') {<!-- -->
const currentSeriesIndex = params.seriesIndex;
myChart.dispatchAction({<!-- -->
type: 'highlight',
seriesIndex: currentSeriesIndex,
});
}
});
//Add mouse out event
myChart.on('mouseout', () => {<!-- -->
myChart.dispatchAction({<!-- -->
type: 'highlight',
clear: true,
});
});
}
}
};
</script>
Improve it some more
<template>
<div class="echart" ref="mychart" id="mychart" :style="{ float: 'left', width: '1550px', height: '400px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {<!-- -->
mounted() {<!-- -->
this.$nextTick(() => {<!-- -->
this.initEcharts();
});
},
methods: {<!-- -->
initEcharts() {<!-- -->
const chartDom = this.$refs.mychart;
const myChart = echarts.init(chartDom);
const option = {<!-- -->
xAxis: {<!-- -->
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 , 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48 , 49]
},
yAxis: {<!-- -->
type: 'value'
},
animation: true,
animationDuration: 200,
series: [
{<!-- -->
name: 'Series 1', // Name the first line
data: [0.146299484, 0.488812392, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.853700516, 0.85 3700516, 0.853700516, 0.853700516, 0.905335628, 0.908777969, 0.908777969, 0.91222031, 0.91394148, 0.91394148, 0.91394148, 0.9 1394148, 0.917383821, 0.919104991, 0.919104991, 0.919104991 , 0.919104991, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.92 0826162, 0.920826162, 0.922547332, 0.922547332, 0.920826162, 0.920826162, 0.919104991, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162, 0.920826162 , 0.920826162]
,
type: 'line',
// markPoint: {<!-- -->
// data: [
// { type: 'max', name: 'Max Value' },
// { type: 'min', name: 'minimum value' }
// ]
// },
smooth: true,
endLabel: {<!-- -->
show: true,
formatter: function (params) {<!-- -->
//Here you can customize the content of the end tag
return params.seriesName + ': ' + params.value;
}
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 2', // Name the first line
data: [0.746837711, 0.693094299, 0.589175003, 0.472434546, 0.395390484, 0.354052018, 0.342358122, 0.33899998, 0.33765998, 0.3362 68014, 0.33450221, 0.332062047, 0.329042346, 0.325089622, 0.319565519, 0.31316877, 0.306199199, 0.300268508, 0.294847805, 0.2 91002565, 0.288495182, 0.288172036, 0.286044006, 0.285230208 , 0.28466754, 0.284258943, 0.28390811, 0.283597514, 0.28333019, 0.283045125, 0.282801505, 0.282566763, 0.282336899, 0.28214 6023, 0.281934799, 0.281753167, 0.281543406, 0.281496848, 0.281532406, 0.281580297, 0.281468421, 0.281410495, 0.281327578,0. 281245982, 0.281173373, 0.28107471, 0.281006722, 0.280915136, 0.280841162 , 0.280741451]
,
type: 'line',
// markPoint: {<!-- -->
// data: [
// { type: 'max', name: 'Max Value' },
// { type: 'min', name: 'minimum value' }
// ]
// },
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 3', // Name the first line
data: [0.07986211480410355, 0.6517372341951067, 0.41385294524584737, 0.6163191951941506, 0.6206783655953648, 0.7636872917450339, 0.7439357975795664, 0.7203172184579634, 0.7149379703192014, 0.577405274584136, 0.8763135621581373, 0.5493885546736994, 0.515 0.8023493108394422, 0.62730962 29190577, 0.8032112404342641, 0.6025618583351057, 1.0245596846925464, 0.5718433107179994, 0.5593881362140605 , 0.22242748556854997, 0.2966127672298806, 0.8066154723839191, 0.8355420713730167, 0.6766256286403879, 0.7357071717833827, 0.959180317084166, 0.7765503280949104, 0.30346413458717814, 1.0956984226605853, 0.5055977490815643, 0.6837113787819997, 0.992 0447456822786, 0.8101537860949151, 0.46232304648783973, 0.8605478742198378, 0.6225950720145431, 0.982050565856414, 0.58663399 0.446224985208226 2 , 0.7700882514451461]
,
type: 'line',
// markPoint: {<!-- -->
// data: [
// { type: 'max', name: 'Max Value' },
// { type: 'min', name: 'minimum value' }
// ]
// },
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
{<!-- -->
name: 'Series 4', // Name the first line
data: [0.11575014388733451, 0.09835474099812513, 0.3558943511081638, 0.21776505746572283, 0.2208660025590413, 0.2059522981692951 , 0.29643899114232497, 0.13876593885167018, -0.014082178864677886, 0.2391107801146606, 0.0073349828246842, -0.0444498398272824, 0.15546688335767922, -0.04829340311837238, 0.005217555252402639, -0.026462688685092384, 0.031102954557168883, 0.34552410247482 97, 0.17076846430683296, 0.14809861203877853, -0.06559331147778052, 0.3548208992357448, 0.20789027780988628, 0.2357676531483298, 0.19374604840864235, 0.3760935575179239, -0.05593054544287307, 0.1707625940649708, 0.28111459242281345, 0.24119086754129268, -0.14233611329045326, 0.10418694930831524, -0.12377903426262749, 0.2446712348338192, 0.21196915017179102, 0.2897096803689686, -0.27413853986166553, -0.20811001588605205, 0.06315707603383772, 0 .253929668877274, 0.18760103956084329, 0.10130279035653036, -0.4008113432473425, 0.010279406735280439, 0.2922645069051566, 0.14597082240953174, 0.07839500134212771, 0.1179759141136523, 0.32705004299668483 , -0.1402905809930205],
type: 'line',
// markPoint: {<!-- -->
// data: [
// { type: 'max', name: 'Max Value' },
// { type: 'min', name: 'minimum value' }
// ]
// },
smooth: true,
endLabel: {<!-- -->
show: true
},
emphasis: {<!-- -->
focus: 'series'
},
},
],
//Configure tooltip
tooltip: {<!-- -->
trigger: 'axis',
},
legend: {<!-- -->
data: ['Series 1', 'Series 2', 'Series 3', 'Series 4'], // Specify the series name displayed in the legend
},
title: {<!-- -->
text: 'Picture display'
},
};
option & amp; & amp; myChart.setOption(option);
window.addEventListener("resize", () => {<!-- -->
myChart.resize();
});
//Add mouse move event
myChart.on('mouseover', (params) => {<!-- -->
console.log(params)
if (params.seriesType === 'line') {<!-- -->
const currentSeriesIndex = params.seriesIndex;
myChart.dispatchAction({<!-- -->
type: 'highlight',
seriesIndex: currentSeriesIndex,
});
}
});
//Add mouse out event
myChart.on('mouseout', () => {<!-- -->
myChart.dispatchAction({<!-- -->
type: 'highlight',
clear: true,
});
});
}
}
};
</script>