echarts案例之双折线渐变图

一、此案例基于Vue3+ts，效果展示：

二、单个属性的值：

1、tooltip中的trigger属性

值：

1.axis是鼠标hover到一条柱状图显示全部数据

2.item是鼠标hover到折线点显示相应数据

2、tooltip中的type属性

不写这个属性，默认为line

值：

1.line 鼠标移上去为竖直线

2.cross 鼠标移上去显示十字线

3.shadow 鼠标移上去显示灰色方框

3、legend中的icon属性

值：

1.circle 圆形

2.rect 方形

3.roundRect 圆角方形

4.triangle 三角形

5.diamond 菱形

6.pin 定位点

7.arrow 箭头

4、series中的symbol属性

1.circle 实心圆

2.rectangle 实心方块

3.triangle 实心三角

4.diamond 实心菱形

5.emptyCircle 空心圆

6.emptyRectangle 空心方块

7.emptyTriangle 空心三角

8.emptyDiamond 空心菱形

9.heart 心形

10.droplet 水滴

11.pin 定位点

12.arrow 箭头

13.star 五角星，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星 

三、完整代码如下：

<script setup lang="ts" name="airQuality-line">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
 
const lineRef = ref();
let myChart: any = null; // echarts实例对象
 
onMounted(() => {
	initCharts();
});
 
// 变化尺寸
const onResize = (resize: any) => {
	console.log('resize: ', resize);
	myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
 
const initCharts = () => {
	let option = {
		// 鼠标hover出现的提示框组件
		tooltip: {
			trigger: 'axis', // 触发类型:axis是鼠标hover到一条柱状图显示全部数据;item是鼠标hover到折线点显示相应数据
			type: 'line', // 默认为line;line鼠标移上去为竖直线;cross鼠标移上去显示十字线;shadow鼠标移上去显示灰色方框
      // 坐标轴指示器
			axisPointer: {
				lineStyle: {
					color: 'rgba(69, 173, 175, 1)',
				},
			},
			backgroundColor: 'rgba(69, 173, 175, 0.5)',
			borderWidth: 0,
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
		},
    // 图例
		legend: {
			icon: 'rect', // circle圆形;rect方形;roundRect圆角方形;triangle三角形;diamond菱形;pin定位点;arrow导航三角指针
			data: ['优', '差'],
			itemWidth: 20,
			itemHeight: 5,
			itemGap: 15, // 间隔
			right: 10,
			textStyle: {
				fontSize: 12,
				color: '#59697A',
			},
		},
    // 图表位置
		grid: {
			left: '2%',
			right: '4%',
			top: '15%',
			bottom: '0%',
			containLabel: true, // 是否包含坐标刻度
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false, // 散点图的留白策略
				axisLine: {
					lineStyle: {
						color: '#415264',
						width: 2,
						type: 'solid',
					},
				},
				axisLabel: {
					color: '#59697A',
					fontSize: 12,
				},
				axisTick: {
					show: false,
				},
				data: ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
			},
		],
		yAxis: [
			{
				type: 'value',
				axisTick: {
					show: false,
				},
				axisLine: {
					lineStyle: {
						color: '#57617B',
					},
				},
				axisLabel: {
					//  改变y轴字体颜色和大小
					// formatter: '{value}间 ', //  给y轴添加单位
					color: '#59697A',
					fontSize: 12,
				},
				splitLine: {
					lineStyle: {
						color: '#57617B',
						type: 'dashed',
					},
				},
			},
		],
		series: [
			{
				name: '优',
				type: 'line',
				smooth: true, // 是否为平滑曲线
				lineStyle: {
					width: 1,
				},
				symbol: 'circle',
				symbolSize: 5,
				showSymbol: false, // 是否显示数据点
				areaStyle: {
          // 设置渐变色
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(127, 254, 223,0.7)',
							},
							{
								offset: 0.8,
								color: 'rgba(5, 31, 43,0.5)',
							},
						],
						false
					),
				},
				itemStyle: {
					color: '#7DFFE8',
					borderWidth: 1,
				},
				data: [18, 20, 32, 15, 26, 36, 22, 15, 21],
			},
			{
				name: '差',
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {
					width: 1,
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: 'rgba(176, 194, 217,0.7)',
							},
							{
								offset: 0.8,
								color: 'rgba(5, 31, 43,0.5)',
							},
						],
						false
					),
				},
				itemStyle: {
					color: '#EBF9FE',
					borderWidth: 1,
				},
				data: [32, 25, 18, 36, 22, 15, 28, 34, 28],
			},
		],
	};
	myChart = echarts.init(lineRef.value as HTMLDivElement);
	myChart.setOption(option, true);
};
script>
<style lang="scss" scoped>
.content-box {
	width: 100%;
	height: 100%;
}
style>