标签：10 color 圆点 WidthAdaptive rgba 折线图 外边 lineStyle type

<template>
	<div id="energyEcharts" style="width: 100%; height: 100%;"></div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			this.myecharts();
			this.WidthAdaptive();
		},
		watch: {
			
		},
		methods: {
			WidthAdaptive(res) {
				var windth = window.innerWidth;
				let fontSize = windth / 5280;
				return fontSize * res;
			},
			myecharts() {
				let myChart = this.$echarts.init(document.getElementById('energyEcharts'));
				
				// x轴数据
				let xData = ['03/11','01/12','03/13','03/14','03/15','03/16','03/17'];
				
				// y轴数据
				let yData = [700,800,600,700,500,500,600];
				
				//绘制图表
				var option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								type: 'solid',
								color: 'rgba(255, 255, 255, 0.4)',
							},
						},
						formatter: '{b}<br/> {c} kwy',
						backgroundColor: 'rgba(6,19,40,0.8)',
						borderColor: 'transparent',
						padding: [10],
						textStyle: {
							fontSize: this.WidthAdaptive(30),
							fontFamily: 'PingFang SC',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(33),
							color: '#ffffff',
						},
					},
					grid: {
						left: '10%',
						top: '14%',
						width: '88%',
						height: '75%',
					},
					xAxis: {
						type: 'category',
						data: xData,
						boundaryGap: true,
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: 'rgba(77, 101, 129, 0.8)'
							},
							symbol: ['none', 'arrow'],
							symbolSize: [this.WidthAdaptive(10),this.WidthAdaptive(10)],
							symbolOffset: this.WidthAdaptive(10)
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: this.WidthAdaptive(34),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc',
							margin: this.WidthAdaptive(18)
						},
					},
					yAxis: {
						name: '单位: kwh',
						type: 'value',
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: 'rgba(105, 119, 135, 0.6)',
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'solid',
								color: 'rgba(77, 101, 129, 0.8)'
							},
							symbol: ['none', 'arrow'],
							symbolSize: [this.WidthAdaptive(10),this.WidthAdaptive(10)],
							symbolOffset: this.WidthAdaptive(10)

						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: this.WidthAdaptive(32),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc'
						},
						nameGap: this.WidthAdaptive(30),
						nameTextStyle: {
							fontSize: this.WidthAdaptive(32),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc',
						},
					},
					series: [{
							data: yData,
							type: 'line',
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(22, 119, 255, 0.3)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(22, 119, 255, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							lineStyle: {
								color: '#1677FF',
								width: this.WidthAdaptive(6),
							},
							symbol: 'circle',
							symbolSize: this.WidthAdaptive(24),
							itemStyle: {
								color: '#1677FF',
								borderColor: '#ffffff',
								borderType: 'solid',
								borderWidth: this.WidthAdaptive(5),
							},
							emphasis: {
								scale: true,
								lineStyle: {
									width: this.WidthAdaptive(6),
								}
							},
							z:2
						},
						{
							type: 'bar',
							data: yData,
							barWidth: this.WidthAdaptive(0.5),
							itemStyle: {
								color: '#fff',
								opacity: 0.2
							},
							z:1
						}
					]
				}
				myChart.setOption(option);
				window.onresize = myChart.resize;
			}
		},
	}
</script>

<style scoped>
</style>

标签：10,color,圆点,WidthAdaptive,rgba,折线图,外边,lineStyle,type
来源： https://www.cnblogs.com/a973692898/p/16067686.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。