echarts图表legend整齐排列

效果图

完整代码

<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的值。

echarts图表legend整齐排列相关推荐

Echarts图表legend过多被遮挡
1.数据过多显示不下=>设置滚动条 2.数据名称太长被遮挡=>设置padding
echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例
echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例 echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例,亲测有效: 代码如下: // 初始化 ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
echarts图表第一个案例
1.action中获取到数据 @Overridepublic String execute() throws Exception {List<Student> find = echarts ...
***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
Angular 项目中使用 ECharts 图表示例
最近项目需要用到echarts图表,但网上关于结合angular使用不多,而且总是导入报错,关于我用的版本做一个总结: (angular v6.0.9,echarts v4.1.0,@types/ec ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...

echarts图表legend整齐排列

echarts图表legend整齐排列相关推荐

最新文章

热门文章