echarts图表legend整齐排列

浅浅的花香味﹌ 2022-08-29 10:55 405阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

完整代码

<template>
    	<div id="app">
    		<div class="chart_content">
    			<chartEight :legendAll="legendAll" :xAxis="four_xAxis_data" :series="seven_series_data"></chartEight>
    		</div>
    	</div>
    </template>
    
    <script>
    	import chartEight from './components/chart/chart_eight.vue'
    
    	export default {
    		name: 'app',
    		components: {
    			chartEight
    		},
    		data() {
    			return {
    				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]
    					}
    				],
    legendAll: [{
    					align: "left",
    					data: ["火影"],
    					icon: "path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "11%",
    					y: "0%"
    				}, {
    					align: "left",
    					data: ["海贼"],
    					icon: "path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "26%",
    					y: "0%"
    				}, {
    					align: "left",
    					data: ["死神"],
    					icon: "path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "43%",
    					y: "0%"
    				}, {
    					align: "left",
    					data: ["龙珠"],
    					icon: "path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "60%",
    					y: "0%"
    				}, {
    					align: "left",
    					data: ["葫芦娃"],
    					icon: "path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "75%",
    					y: "0%"
    				}, {
    					align: "left",
    					data: ["火影-新版"],
    					icon: "path://M112 476h160v72H112z m320 0h160v72H432z m320 0h160v72H752z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "11%",
    					y: "6%"
    				}, {
    					align: "left",
    					data: ["海贼-新版"],
    					icon: "path://M112 476h160v72H112z m320 0h160v72H432z m320 0h160v72H752z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "26%",
    					y: "6%"
    				}, {
    					align: "left",
    					data: ["死神-新版"],
    					icon: "path://M112 476h160v72H112z m320 0h160v72H432z m320 0h160v72H752z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "43%",
    					y: "6%"
    				}, {
    					align: "left",
    					data: ["龙珠-新版"],
    					icon: "path://M112 476h160v72H112z m320 0h160v72H432z m320 0h160v72H752z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "60%",
    					y: "6%"
    				}, {
    					align: "left",
    					data: ["葫芦娃-新版"],
    					icon: "path://M112 476h160v72H112z m320 0h160v72H432z m320 0h160v72H752z",
    					itemHeight: 1,
    					orient: "horizontal",
    					selected: {
    						"火影": true,
    						"海贼": true,
    						"死神": false,
    						"龙珠": false,
    						"葫芦娃": false,
    						"火影-新版": true,
    						"海贼-新版": true,
    						"死神-新版": false,
    						"龙珠-新版": false,
    						"葫芦娃-新版": false,
    					},
    					x: "75%",
    					y: "6%"
    				}],
    			}
    		},
    		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: {
    			legendAll: {
    				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:this.legendAll,
    					grid: {
    						left: "3%",
    						right: "4%",
    						bottom: "10%",
    						containLabel: true
    					},
    					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>

如果数据较多，建议legend中动态设置，每行计算出最多可以放几个，更改X轴和Y轴定位即可。

legend中的selected属性，是根据需要默认显示选中的数据。

icon中可以放置自定义图标，这里是使用了svg中的path路径，可以在阿里图标库中获取svg代码，拿到path的值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220829/fa3b08707a7242a48499b0feceb62838.png