ECHATS笔记柱状图

最新推荐文章于 2023-10-23 13:33:21 发布

yogur_father

最新推荐文章于 2023-10-23 13:33:21 发布

阅读量377

点赞数

分类专栏：入门学习文章标签： javascript

本文链接：https://blog.csdn.net/yogur_father/article/details/111239921

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

定义x，y轴数据数组

var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据

series是一个数组，在这个数组中可以存放对象，最大的对象就是基本属性。其中在这个对象中还可以继续存放对象

① 标记点，其中的data是一个数组，用来存放被标记的点

markPoint: { // 标记点
    data: [
       {
          type: 'max', name: '最大值'
       },
       {
          type: 'min', name: '最小值'
        }
           ]
},

② 标记线，其中的data是一个数组，用来存放被标记的线

markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },

③ 标签，作用与每一个柱子上

label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    var option = {
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',

          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },

          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },

          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },

          barWidth: '30%', // 柱的宽度
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

yogur_father

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECHATS笔记柱状图

定义x，y轴数据数组var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据series是一个数组，在这个数组中可以存放对象，最大的对象就是基本属性。其中在这个对象中还可以继续存放对象① 标记点，其中的data是一个数组，用来存放被标记的点markPoint: { // 标.
复制链接

扫一扫