直接上代码，些案例为折线拐点发光效果
<template>
<div class="warp">
<div :id="chartId" style="width: 100%;height: 100%;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
let myChart = null // 1.在这时声明
export default {
props:{
chartId:String,
xData:Array,
yData:Array
},
data(){
return {
timer:null,
option:{
xAxis: {
type: 'category',
axisTick: { // 坐标轴 刻度
show: false, // 是否显示
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
data: this.xData,
boundaryGap:true
},
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
backgroundColor: 'rgba(0, 10, 26, 0.8)',
borderRadius: 8,
borderWidth: 0,
shadowColor:'rgba(13, 148, 255, 0.8)',
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow' | 'none',
},
textStyle: {
color: '#fff'
},
formatter:function(params){
// console.log(params);
let date = params[0].axisValue
let data = params[0].data
return `<div style="text-align:center;transform:scale(0.8);line-height:35rem;"> ${date} <br />减排量：${data}kg`
}
},
yAxis: {
show:true, //是否显示y轴
type: 'value',
splitLine: {
lineStyle:{
type:'dashed',
color:'rgba(255, 255, 255, 0.3)'
}
},
axisLine: {
show: false,//不显示坐标轴线
},
// 隐藏y轴数据
axisLabel: {
formatter: function () {
return "";
}
},
},
series: [
{
data: this.yData,
type: 'line',
smooth:true,
symbol: 'circle',
symbolSize:8,
areaStyle:true,
animation:true,
itemStyle: {
normal: {
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: "#00FFFF" //折线的颜色
} ,
color: 'rgba(255, 255, 255, 0)', //拐点颜色
},
emphasis:{
color:'#00FFFF',
borderWidth:2,
borderColor:'#fff',
shadowColor:'#00FFFF',
shadowBlur:10
},
},
areaStyle:{
normal: {
color:new echarts.graphic.LinearGradient(0,0,0,1,[
{
offset:0,
color:'rgba(13, 148, 255, 0.5)'
},
{
offset:1,
color:'rgba(13, 148, 255, 0)'
},
])
}
},
},
],
grid: {
left: "0%",
right: "3%",
bottom: "0%",
top: "5%",
containLabel: true,
},
}
}
},
mounted(){
this.linechartInit()
// 3.监听屏幕大小变化
window.addEventListener('resize',this.chartResize)
// 4.监听更新事件
window.addEventListener('beforeunload', this.clearChart);
},
methods:{
// 初始化图表
linechartInit(){
// 2.先获取该dom上的实例，如果有就使用，不存在就初始化
myChart = echarts.getInstanceByDom(document.getElementById(this.chartId));
if(myChart == null){
myChart = echarts.init(document.getElementById(this.chartId));
}
this.option && myChart.setOption(this.option);
},
clearChart(){
// 手动触发 destroy 相关的生命周期，
this.$destroy();
},
chartResize(){
//防抖
if(this.timer)
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
myChart.resize();
},500)
}
},
beforeDestroy(){
window.removeEventListener('resize', this.chartResize);
window.removeEventListener('beforeunload', this.clearChart);
if(!myChart) return
myChart.clear()
myChart = null; // 5. 解除引用，释放内存
}
}
</script>
<style lang="less" scoped>
.warp{
width: 100%;
height: 100%;
}
</style>
使用组件
<ChartLine chartId="carbon" :xData="xTime" :yData="yData" v-if="yData.length > 0"/>
