vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Echarts图例legend配置

Echarts之图例legend基本配置方式

作者: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

总结

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

您可能感兴趣的文章:
阅读全文