Echarts例子

最新推荐文章于 2024-09-17 23:15:58 发布

卷心菜111

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量34

点赞数

文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/m0_71026050/article/details/133793481

版权

学习目标：

掌握echarts高级功能

学习内容：

掌握echarts的动态数据可视化

学习时间：

周四15:00-16:00

学习产出：

1、动态柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态</title>
<!--   1、 首先引入echarts-->
    <script src = "echarts-5.4.1/dist/echarts.js"></script>
</head>
<body>
<!--2、要给一个容器来装这个图表，根据getElementById('main')，给div绑定一个id="main"-->
<div id="main"  style="width: 400px;height: 400px"></div>
<script >
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const data = [];
    for (let i = 0; i < 5; ++i) {
        // Math.round()方法即为我们常说的“四舍五入”方法
        // 随机取五个0到200之间的整数
      data.push(Math.round(Math.random() * 200));
    }
    option = {
      xAxis: {
          // 坐标轴刻度最大值。
          // 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
          // 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
        max: 'dataMax'
      },
      yAxis: {
           // 类目轴，适用于离散的类目数据
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
          // 是否是反向坐标轴,表示 Y 轴从下往上是从小到大的排列
        inverse: true,
          // 动画的时长
        animationDuration: 300,
          // 数据更新动画的时长。
        animationDurationUpdate: 300,
          // 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
        max: 3 // only the largest 3 bars will be displayed
      },
      series: [
        {
            // 开启该系列的动态排序效果
          realtimeSort: true,
            // 图例名称
          name: 'X',
          type: 'bar',
          data: data,
          label: {
            show: true,
            position: 'right',
              // 如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
            valueAnimation: true
          }
        }
      ],
      legend: {
          // 图例打开
        show: true
      },
        // 初始动画的时长
      animationDuration: 0,
        // 数据更新动画的时长。
      animationDurationUpdate: 3000,
        // 初始动画的缓动效果
      animationEasing: 'linear',
        // 数据更新动画的缓动效果。
      animationEasingUpdate: 'linear'
    };
    function run() {
      for (var i = 0; i < data.length; ++i) {
          // 随机数大于0.9则乘2000
        if (Math.random() > 0.9) {
          data[i] += Math.round(Math.random() * 2000);
        } else {
            // 否则则乘200
          data[i] += Math.round(Math.random() * 200);
        }
      }
      // 使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成。
// 调用方式：myChart.setOption(option); （option：必填参数，对象类型，包含图表的配置项和数据

      myChart.setOption({
        series: [
          {
            type: 'bar',
            data
          }
        ]
      });
    }
    // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    setTimeout(function () {
      run();
    }, 0);
    // setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
    // setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
    setInterval(function () {
      run();
    }, 3000);

    option && myChart.setOption(option);

</script>
</body>
<style scoped>

</style>
</html>