Echarts之图例legend基本配置方式

 更新时间:2023年04月22日 10:06:49   作者:Akimoto Hiroshi  
这篇文章主要介绍了Echarts只图例legend基本配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Echarts图例legend基本配置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>柱状图的基本实现和常见效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px; border: 1px solid black;"></div>
  <script>
    var myCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
    var yDataArr = [88, 99, 78, 67, 84, 32]
    var yDataArr2 = [78, 89, 98, 57, 94, 92]
    var option = {
      title: {
        text: 'Title',
        textStyle: {
          color: 'lightblue',
          fontSize: 20
        },
        borderWidth: 2,
        borderColor: 'lightblue',
        borderRadius: 10,
        top: 30,
        left: '45%',
        backgroundColor: 'black',
        padding: 10
      },
      grid: {
        show: true,
        top: 90,
        left: 100,
        right: 40,
        bottom: 40,
        height: '60%',
      },
      tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        formatter: function(arg) {
          console.log(arg)
          return `cate: ${arg.name} ---> value: ${arg.data}`
        }
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        data: ['Math', 'English'],
        left: 'center',
        top: 'bottom'
      },
      series: [
        {
          name: 'Math',
          type: 'bar',
          label: {
            show: true,
            rotate: 30,
            postion: 'middle',
            color: 'pink'
          },
          barWidth: '30%',
          data: yDataArr
        },
        {
          type: 'bar',
          name: 'English',
          data: yDataArr2,
          color: 'lightblue',
          barWidth: '30%',
          label: {
            show: true,
            color: '#fff'
          }
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

left和top可以控制图例显示的位置:

orient控制图例的显示方式是横着还是竖着,默认horizontal横着

改为vertical:

Echarts图例位置-legend属性

[如何设置Echarts图例位置]

Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。

不过我们在使用Echarts过程中经常会遇到如下问题:图例经常不知道如何调节到我们想要的位置。

遇到此情况该如何调节呢?

只需要legend属性中修改如下几个示数即可:

legend: {
orient: ‘vertical',
x:‘right', //可设定图例在左、右、居中
y:‘center', //可设定图例在上、下、居中
padding:[0,50,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
data: [‘直接访问',‘微信',‘百度',‘其他文章',‘网页']
},

①x : 可以设定图例在----左(left)、右(right)、居中(center)、填写数字(如:100px)

②y : 可以设定图例在----上(top)、下(bottom)、居中(center)、填写数字(如:100px)

③另外,可使用padding:

padding:[0,50,0,0] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]

当前(2020年6月)直接只设置left、right、top、bottom具体像素值或百分比即可:left、right、top、bottom

legend: {
orient: ‘vertical',
right: 10, //当前直接只设置此具体像素值、百分比即可了
data: [‘直接访问', ‘邮件营销', ‘联盟广告', ‘视频广告', ‘搜索引擎']
},

如此设置完就可以得到自己想要的位置啦。

参考:Echarts官网配置项介绍:https://echarts.apache.org/zh/option.html#legend

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 通过vue手动封装on、emit、off的代码详解

    通过vue手动封装on、emit、off的代码详解

    这篇文章主要介绍了通过vue手动封装on,emit,off的代码详解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue2.X和Vue3.0数据响应原理变化的区别

    Vue2.X和Vue3.0数据响应原理变化的区别

    这篇文章主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue获取form表单的值示例

    vue获取form表单的值示例

    今天小编就为大家分享一篇vue获取form表单的值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue-cli使用stimulsoft.reports.js的详细教程

    vue-cli使用stimulsoft.reports.js的详细教程

    Stimulsoft Reports.JS是一个使用JavaScript和HTML5生成报表的平台。它拥有所有拥来设计,编辑和查看报表的必需组件。该报表工具根据开发人员数量授权而不是根据应用程序的用户数量。接下来通过本文给大家介绍vue-cli使用stimulsoft.reports.js的方法,一起看看吧
    2021-12-12
  • vue中的搜索关键字实例讲解

    vue中的搜索关键字实例讲解

    这篇文章主要介绍了vue中的搜索关键字实例讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue webuploader 文件上传组件开发

    vue webuploader 文件上传组件开发

    本篇文章主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • windows下vue.js开发环境搭建教程

    windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • c++游戏教程使用easyx做出大飞机

    c++游戏教程使用easyx做出大飞机

    这篇文章主要为大家介绍了c++游戏教程使用easyx实现大飞机示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue利用History记录上一页面的数据方法实例

    Vue利用History记录上一页面的数据方法实例

    这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 浅谈vue的几种绑定变量的值 防止其改变的方法

    浅谈vue的几种绑定变量的值 防止其改变的方法

    下面小编就为大家分享一篇浅谈vue的几种绑定变量的值 防止其改变的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论