echarts折线图

拼搏现实的明天。 2022-11-18 13:44 207阅读 0赞

# 记录echarts折现图配置 #

## 我们先来看看效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]

点击时效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]

下面我们来看一下vue代码  
1，先来看看HTML中怎么写的

<template>
    	<view class="content">
    		<view @click="echarts.onClick" :prop="option"  id="linechartFour" :change:prop="echarts.updateEcharts" class="echarts" ></view>
    	</view>
    </template>

2.然后vue脚本中配置，我们来将里面默认数据恢复，让他能够跑起来。

<script>
    	export default { 
    	//这里的porps是父组件传递过来的，为了掩饰未用到，后面封装可以用上
    		props: { 
    			dataListX: { 
    				type: Array,
    				default: () => [],
    			},
    			dataList: { 
    				type: Array,
    				default: () => [],
    			},
    			index:{ 
    				type:Number,
    				default:0
    			}
    		},
    		data() { 
    			return { }
    		},
    		computed: { 
    			option() { 
    				return { 
    					grid: { 
    						left: 15,
    						right:15,
    						top:20,
    						bottom:20
    					},
    					tooltip: { 
    						trigger: 'axis',
    						axisPointer: {  // 坐标轴指示器，坐标轴触发有效
    							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    							shadowStyle: {  // 阴影指示器样式设置
    								width: 'auto', // 阴影大小
    								color: { 
    									type: 'linear',
    									x: 0,
    									y: 0,
    									x2: 0,
    									y2: 1,
    									colorStops: [{ 
    										offset: 0,
    										color: 'rgba(211, 177, 150, 0.5)' // 0% 处的颜色
    									}, { 
    										offset: 1,
    										color: 'rgba(179, 119, 72, 0)' // 100% 处的颜色
    									}],
    									globalCoord: false // 缺省为 false
    								} // 阴影颜色
    							}
    						}
    					},
    					legend: { 
    						x: '20',
    						y: '20',
    						type: "plain",
    						itemGap: 50,
    						data: [{ 
    							name: this.dataList[0].name,
    							icon: 'circle'
    						}, { 
    							name: this.dataList[1].name,
    							icon: 'circle'
    						}],
    						textStyle: { 
    							color: '#A3A9AF'
    						}
    					},
    					xAxis: { 
    						type: 'category',
    						data: ['1','2','3','4','5','6','7','8','9','10','11','12'] //月份,
    						axisLabel: {  //字体
    							textStyle: { 
    								color: '#B4B6BC'
    							}
    						},
    						axisLine: {  //线条
    						    show:true,
    							onZero:true,
    							lineStyle: { 
    								color: '#E4E8ED',
    							}
    						},
    						axisTick: { 
    							show: false
    						},
    					},
    					yAxis: { 
    						type: 'value',
                            scale : true,
                            splitNumber : 3,//折现等分
    						min:0,//y轴最小值
                            boundaryGap : [ 0.2, 0.2 ],
    						axisTick: { 
    							show: true //去除刻度线
    						},
    						axisLabel: { 
                                verticalAlign: 'bottom',
                                align:'left',
                                //调整文字上右下左
                                padding: [0,0,2,7],
    							textStyle: { 
    								color: '#E4E8ED' //字体颜色
    							}
    						},
    						axisLine: { 
    							lineStyle: { 
    								color: '#FFFFFF',
    							}
    						},
    						//设置网格线颜色
    						splitLine: { 
    							show: true,
    							lineStyle: { 
    								color: '#E4E8ED',
    								width: 1,
    								type: 'solid'
    							}
    						}
    					},
    					series: [{ 
    						data: [258, 270, 280, 282, 0, 0, 0, 0, 0, 0, 0, 0],
    						type: 'line',
    						smooth: true,
    						showSymbol: false,
    						itemStyle: { 
    							normal: { 
    								color: 'rgba(234, 218, 205, 1)', //改变折线点的颜色
    								lineStyle: { 
    									color: 'rgba(234, 218, 205, 1)',
    									width: 2
    								},
    								label: { 
    									show: false
    								}
    							}
    						},
    						//鼠标点击折现变暗现象修复
    						//emphasis: { 
    							//focus: 'series'
    						//},
    					}, { 
    						data: [221, 224, 229, 230, 231, 235, 237, 239, 244, 245, 253, 254],
    						type: 'line',
    						smooth: true,
    						showSymbol: false,
    						itemStyle: { 
    							normal: { 
    								color: 'rgba(168, 98, 45, 1)', //改变折线点的颜色
    								lineStyle: { 
    									color: 'rgba(168, 98, 45, 1)',
    									width: 2
    								},
    								label: { 
    									show: false
    								}
    							}
    						},
    						//emphasis: { 
    						//  focus: 'series'
    						//},
    						areaStyle: { 
    							normal: { 
    								//前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
    								color: { 
    									type: 'linear',
    									x: 0,
    									y: 0,
    									x2: 0,
    									y2: 1,
    									colorStops: [{ 
    										offset: 0,
    										color: 'rgba(211, 155, 89, 1)' // 0% 处的颜色
    									}, { 
    										offset: 1,
    										color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
    									}],
    									globalCoord: false // 缺省为 false
    								}
    
    							}
    						}
    					}]
    				}
    			}
    		},
    		methods: { 
    			changeOption() { 
    				const data = this.option.series[0].data
    				// 随机更新示例数据
    				data.forEach((item, index) => { data.splice(index, 1, Math.random() * 40) }) }, onViewClick(options) { console.log(options) } } } </script> <script module="echarts" lang="renderjs"> let myChart export default { name: 'linechart', mounted() { if (typeof window.echarts === 'function') { this.initEcharts() } else { // 动态引入较大类库避免影响页面展示 const script = document.createElement('script') // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 script.src = 'static/echarts.js' script.onload = this.initEcharts.bind(this) document.head.appendChild(script) } console.log("mountedmountedmountedmounted"); }, methods: { initEcharts() { myChart = echarts.init(document.getElementById('linechart'))
    				//自定义点击显示提示框，去掉后面没有数据bug
    				this.option.tooltip.formatter = function(data){ 
    					let str = '';
    					let len = data.length;
    					if(len == 1){ 
    						str = data[0].name + "月<br />去年：" + data[0].data + "人";
    					} else { 
    						str = data[0].name + "月<br />今年：" + data[0].data + "人<br />去年：" + data[1].data + "人";
    					}
    					return str;
    				};
    				//this.option.tooltip.formatter="{b}月<br/>去年：{c0}人<br/>当年：{c1}人"
    				// 观测更新的数据在 view 层可以直接访问到
    				myChart.setOption(this.option)
    			},
    			updateEcharts(newValue, oldValue, ownerInstance, instance) { 
    				// 监听 service 层数据变更
    				if (this.dataList.length > 0) { 
    				//自定义点击显示提示框，去掉后面没有数据bug
    				this.option.tooltip.formatter = function(data){ 
    					let str = '';
    					let len = data.length;
    					if(len == 1){ 
    						str = data[0].name + "月<br />去年：" + data[0].data + "人";
    					} else { 
    						str = data[0].name + "月<br />今年：" + data[0].data + "人<br />去年：" + data[1].data + "人";
    					}
    					return str;
    				};
    				//this.option.tooltip.formatter="{b}月<br/>去年：{c0}人<br/>当年：{c1}人"
    					myChart.setOption(newValue)
    				}
    			},
    			onClick(event, ownerInstance) { 
    				// 调用 service 层的方法
    				ownerInstance.callMethod('onViewClick', { })
    			}
    		}
    	}
    </script>

3.css代码

<style scoped> .content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.echarts { 
    		width: 690rpx;
    		height: 350rpx;
    	}
    </style>

↓↓↓ 个人写的一个公众号，还在完善中 ，欢迎加入↓↓↓ | ᴥ•́ )✧ ↓↓↓

![在这里插入图片描述][13f8797ee9514c26ba5c929f66128582.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/139be18febd44282a1e21989f5419861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwNjYyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/5662d3cf14fb4252b30f372fb14e45a9.png
[13f8797ee9514c26ba5c929f66128582.jpg_pic_center]: /images/20221022/f52d7b29fae44210b5ed0ded3cfa6fe1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 208 阅读

相关 php 折线图canvas,canvas绘制折线图(仿echarts)

1 2 3 4 5 echarts绘制 6 7 8 9 10 varscale= 2;11 varcanvas遇新是直朋能到=document.getEle

╰+攻爆jí腚メ/ 2022年11月18日 08:30/ 0 赞/ 214 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 249 阅读

相关 Echarts - 渐变折线图区域

效果图如下图所示，两种颜色可以搭配营造渐变效果： ![在这里插入图片描述][20210524171902259.png] 实现方法 > 官方文档(areaSt

电玩女神/ 2022年10月15日 09:59/ 0 赞/ 140 阅读

相关 Echarts折线图样式收集

效果图1： ![20210830112730906.png][] option:{ backgroundColor: "rgba(255,

妖狐艹你老母/ 2022年09月09日 06:22/ 0 赞/ 163 阅读

相关 echarts折线图实例一

1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：![20170926122012950][]

- 日理万妓/ 2022年06月08日 12:54/ 0 赞/ 242 阅读

相关 echarts实现动态折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年05月15日 02:24/ 0 赞/ 722 阅读

相关 echarts折线图案例基于echarts-plain.js

最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用. 使用echarts-plain.

比眉伴天荒/ 2022年05月11日 18:04/ 0 赞/ 241 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 288 阅读

相关 ECharts之折线图

效果图 ![在这里插入图片描述][20190801172702725.gif] 背景图片 ![20190725170845879.png][] 下载EChar

ゝ一世哀愁。/ 2021年09月30日 05:00/ 0 赞/ 1164 阅读