Vue项目中折线图圆滑显示，X轴加滚动条dataZoom

忘是亡心i 2022-09-02 03:42 430阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

这里需要注意的是，我的项目中Echarts版本是4.6。5.0的版本这里X轴滚动条样式会有所不同

**"echarts": "^4.6.0",**

完整代码

<template>
    	<div id="app">
    		<div class="chart_content">
    			<div>折线图--圆滑--X轴加滚动条</div>
    			<chartSeven :legendone="four_legend_data_one" :legendtwo="four_legend_data_two" :xAxis="four_xAxis_data"
    				:series="seven_series_data"></chartSeven>
    		</div>
    	</div>
    </template>
    
    <script>
    	import chartSeven from './components/chart/chart_seven.vue'
    
    	export default {
    		name: 'app',
    		components: {
    			chartSeven
    		},
    		data() {
    			return {
    	four_legend_data_one: ['火影', '海贼', '死神', '龙珠', '葫芦娃'],
    				four_legend_data_two: ['火影-新版', '海贼-新版', '死神-新版', '龙珠-新版', '葫芦娃-新版'],
    				four_xAxis_data: ['2020/0/01', '2020/0/02', '2020/0/03', '2020/0/04', '2020/0/05', '2020/0/06',
    					'2020/0/07'
    				],
    				seven_series_data: [{
    						name: '火影',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '海贼',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '死神',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '龙珠',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '葫芦娃',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '火影-新版',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '海贼-新版',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '死神-新版',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '龙珠-新版',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					},
    					{
    						name: '葫芦娃-新版',
    						type: 'line',
    						stack: '工单总量',
    						smooth: true, //设置折线图平滑
    						symbol: "none", //取消折点圆圈
    						data: [120, 132, 101, 134, 90, 230, 210]
    					}
    				],
    			}
    		},
    		computed: {
    
    		},
    		mounted() {
    			
    		},
    		methods: {
    		
    		}
    	}
    </script>
    
    <style>
    	#app {
    		display: flex;
    		flex-wrap: wrap;
    	}
    
    	.chart_content {
    		border: 1px solid #ededed;
    		width: calc((100% - 30px)/3);
    		height: 400px;
    		margin: 0 10px 10px 0;
    	}
    
    	.chart_content:nth-child(3n) {
    		margin-right: 0;
    	}
    
    	.chart_cent {
    		width: 180px;
    		height: 180px;
    		margin: 100px auto;
    		position: relative;
    	}
    
    	
    
    
    </style>

组件代码

<template>
    	<div class="chart" v-resize="resizeCharts" ref="barChart"></div>
    </template>
    <script>
    	import * as echarts from "echarts";
    	export default {
    		name: "barChart",
    		props: {
    			legendone: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			legendtwo: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			xAxis: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			series: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    		},
    		data() {
    			return {
    				charts: null,
    			};
    		},
    		mounted() {
    		},
    		computed: {},
    		methods: {
    			resizeCharts() {
    				this.charts.resize();
    			},
    			initCharts() {
    				this.$nextTick(() => {
    					this.charts = echarts.init(this.$refs.barChart);
    					this.charts.clear();
    					this.setOption();
    				});
    			},
    			setOption() {
    				const option = this.getOption();
    				this.charts.setOption(option, true);
    			},
    			getOption() {
    				const option = {
    					tooltip: {
    						trigger: 'axis'
    					},
    					legend: [{
    							data: this.legendone,
    							icon: "roundRect",
    							x: 'center',
    							y: '0%'
    						},
    						{
    							data: this.legendtwo,
    							icon: "roundRect",
    							x: 'center',
    							y: '5%'
    						},
    					],
    					dataZoom: [
    					           {
    					              type: 'slider',
    					              show: true,
    					              xAxisIndex: [0],
    					              handleSize: 15,//滑动条的 左右2个滑动条的大小
    					              height: 10,//组件高度
    					              left: 30, //左边的距离
    					              right: 30,//右边的距离
    					              bottom: 20,//底部的距离
    					              handleColor: '#ddd',//h滑动图标的颜色
    					              handleStyle: {
    					                 borderColor: "#cacaca",
    					                 borderWidth: "1",
    					                 shadowBlur: 2,
    					                 background: "#ddd",
    					                 shadowColor: "#ddd",
    					              },
    					              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
    					                 //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
    					                 //给第一个设置0，第四个设置1，就是垂直渐变
    					                 offset: 0,
    					                 color: '#1eb5e5'
    					              }, {
    					                 offset: 1,
    					                 color: '#5ccbb1'
    					              }]),
    					              backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
    					              showDataShadow: false,//是否显示数据阴影 默认auto
    					              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
    					              handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
    					              filterMode: 'filter',
    					           }
    					       ],
    					grid: {
    						left: "3%",
    						right: "4%",
    						bottom: "10%",
    						containLabel: true
    					},
    					// toolbox: {   //这个属性是显示图表下载按钮  不需要注释即可
    					// 	feature: {
    					// 		saveAsImage: {}
    					// 	}
    					// },
    					xAxis: {
    						type: 'category',
    						boundaryGap: false,
    						data: this.xAxis,
    						axisTick: {
    							//取消刻度线
    							show: false
    						}
    					},
    					yAxis: {
    						type: 'value',
    						axisTick: {
    							//取消刻度线
    							show: false
    						}
    					},
    					series: this.series
    				};
    				return option;
    			},
    		},
    		mounted() {
    			this.initCharts();
    		},
    		beforeDestroy() {
    			this.charts && this.charts.dispose();
    			this.charts = null;
    		},
    		watch: {
    			legendone: {
    				handler() {
    					this.setOption();
    				},
    			},
    			legendtwo: {
    				handler() {
    					this.setOption();
    				},
    			},
    			xAxis: {
    				handler() {
    					this.setOption();
    				},
    			},
    			series: {
    				handler() {
    					this.setOption();
    				},
    			},
    		},
    		components: {},
    	};
    </script>
    
    <style scoped>
    	.chart {
    		width: 100%;
    		height: 100%;
    	}
    </style>

原生的滚动是这个样子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

一定要注意版本问题，如果遇到了从别处复制过来的代码，别的项目是正常的，你这里不对，那一定要注意版本问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220829/438aa8c7c36b4f0786b172bf640d9bd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220829/79036f5394b248049832d9e98ee387b5.png