Echarts 图例legend基本配置

最新推荐文章于 2025-03-21 13:39:35 发布

Akimoto Hiroshi

最新推荐文章于 2025-03-21 13:39:35 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.youkuaiyun.com/dyw3390199/article/details/120584083

版权

vue 同时被 3 个专栏收录

102 篇文章

订阅专栏

javascript

83 篇文章

订阅专栏

echarts

15 篇文章

订阅专栏

在这里插入图片描述

<!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>