快捷導航

Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn)

更新時間：2024年07月04日 14:38:31 作者：陳琦鵬

在環(huán)保倉管項目中,做了一個每月對藥品、消耗品、設(shè)備的進出,進行統(tǒng)計百分比,效果好看,后面經(jīng)常在用這個樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn),感興趣的朋友一起看看吧

下載Echarts

//npm
npm install echarts --save
//淘寶鏡像cnpm(安裝速度快)
cnpm install echarts --save
//yarn
yarn add echarts

代碼示例

<template>
    <div id="echartsThree" style="width: 100%;height: 100%;"></div>
</template>
<script setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom = document.getElementById("echartsThree");
        let myChart = echarts.init(chartDom);
        let rq = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        let seriesArr = []
        let list = [{
      		name: "藥品",
      		children: [100, 100, 100, 100, 80, 90, 100, 88, 88, 99, 100, 80]
      	},
      	{
      		name: "消耗品",
      		children: [50, 50, 40, 40, 35, 40, 30, 35, 30, 30, 25, 25]
      	},
      	{
      		name: "設(shè)備",
      		children: [75, 75, 55, 55, 45, 50, 40, 30, 35, 40, 50, 50]
      	}
      ]
      let colorArr = ["0, 62, 246", "0, 193, 142", "253, 148, 67"]
      list.forEach((val, index) => {
      	seriesArr.push({
      		name: val.name,
      		type: 'line',
      		symbolSize: 6,
      		data: val.children,
      		areaStyle: {
      			normal: {
      				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      					offset: 0,
      					color: `rgba(${colorArr[index]},.2)`
      				}, {
      					offset: 1,
      					color: 'rgba(255, 255, 255,0)'
      				}], false)
      			}
      		},
      		itemStyle: {
      			normal: {
      				color: `rgb(${colorArr[index]})`
      			}
      		},
      		lineStyle: {
      			normal: {
      				width: 2,
      				shadowColor: `rgba(${colorArr[index]}, .2)`,
      				shadowBlur: 4,
      				shadowOffsetY: 25
      			}
      		}
      	})
      })
      let option = {
      	backgroundColor: "#fff",
      	tooltip: {
      		trigger: 'axis',
      		axisPointer: {
      			lineStyle: {
      				color: '#ddd'
      			}
      		},
      		backgroundColor: 'rgba(255,255,255,1)',
      		padding: [5, 10],
      		textStyle: {
      			color: '#000',
      		}
      	},
      	legend: {
      		right: "center",
      		top: "6%",
      		textStyle: {
      			color: '#000',
      			fontSize: 12,
      			fontWeight: 600
      		},
      		data: list.map(val => {
      			return val.name
      		})
      	},
      	grid: {
      		left: '2%',
      		right: '5%',
      		bottom: '6%',
      		top: '18%',
      		containLabel: true
      	},
      	xAxis: {
      		type: 'category',
      		data: rq,
      		boundaryGap: false,
      		splitLine: {
      			show: true,
      			interval: 'auto',
      			lineStyle: {
      				type: "dashed",
      				color: ['#cfcfcf']
      			}
      		},
      		axisTick: {
      			show: false
      		},
      		axisLine: {
      			lineStyle: {
      				color: '#cfcfcf'
      			}
      		},
      		axisLabel: {
      			// margin: 10,
      			textStyle: {
      				fontSize: 12,
      				color: "#9e9d9f",
      				fontWeight: 600
      			}
      		}
      	},
      	yAxis: [{
      		name: "(%)",
      		type: 'value',
      		splitLine: {
      			show: true,
      			lineStyle: {
      				type: "dashed",
      				color: ['#cfcfcf']
      			}
      		},
      		axisTick: {
      			show: false
      		},
      		axisLine: {
      			show: true,
      			lineStyle: {
      				fontSize: 12,
      				color: '#cfcfcf',
      			}
      		},
      		axisLabel: {
      			textStyle: {
      				fontSize: 12,
      				color: "#9e9d9f",
      				fontWeight: 600
      			}
      		},
      		max: 100
      	}],
      	series: seriesArr
      };
        myChart.setOption(option);
    }
</script>