首页 > 其他分享 >echarts画图学习

echarts画图学习

时间:2023-03-16 10:58:04浏览次数:29  
标签:option data 画图 学习 mCharts var type echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱形图入门</title>
    <!-- 1. 引入 echarts.js 文件-->
    <script src="lib/echarts.js"></script>

</head>
<body>
    <!-- 2. 准备一个呈现图表的盒子 div -->
    <div style="width: 600px;height: 400px"></div>

    <script>
        // 3. 初始化 echarts 实例对象
        // 参数,dom,决定图表最终呈现的位置
        var mCharts = echarts.init(document.querySelector('div'));
        <!-- 4. 准备配置项 -->
        var option = {
            xAxis: {
                type: 'category',
                data: ['小明', '小红', '小王']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'bar', // line:折线图
                    data:[70, 92, 87],
                    itemStyle:{
                        color: 'red'
                    }
                }
            ]
        }
        <!-- 5. 将配置项设置给 echarts 实例对象 -->
        mCharts.setOption(option)
    </script>
</body>
</html>

标签:option,data,画图,学习,mCharts,var,type,echarts
From: https://www.cnblogs.com/aclq/p/17221471.html

相关文章

  • 【2023-03-15】学习逻辑
    23:00我希望,大家都能挣到足够的钱,去旅行,去闲着,去思考世界的过去和未来,去看书做梦,去街角闲逛,让思绪的钓线深深沉入街流之中。              ......
  • ABP微服务系列学习-使用Tye启动微服务
    Tye是微软开源的一款开发人员工具,能够用于简化微服务以及分布式应用程序的开发、测试以及部署过程。Tye的首要目标是简化微服务的开发,具体方式包括仅用一行命令执行多项......
  • python+playwright 学习-33.launch_persistent_context 启动本地 Google Chrome 并加
    前言playwright启动GoogleChrome浏览器的时候默认用的是无痕模式,不加载本地的数据,这对于测试人员运行一个干净的浏览器是没问题的。大家在学selenium的时候,知道selen......
  • MyBatis学习日志三
    基于注解的示例如果实在看xml配置文件不顺眼,则可以考虑使用注解的开发方式,不过注解的开发方式,会将SQL语句写到代码文件中,后续的维护性和扩展性不是很好(如果想修改SQL语句,就......
  • Mybatis学习日志二
    注意要点全局配置文件中,各个标签要按照如下顺序进行配置,因为mybatis加载配置文件的源码中是按照这个顺序进行解析的<configuration><!--配置顺序如下pr......
  • 【THM】Introductory Networking(网络基础介绍)-学习
    本文相关的TryHackMe实验房间链接:https://tryhackme.com/room/introtonetworking本文介绍:主要涉及网络基础理论、与网络相关的基本命令行工具的使用。简介本文将向初学......
  • 「AcWing学习记录」拓扑排序
    AcWing848.有向图的拓扑序列原题链接图的拓扑序列是针对有向图来说的,无向图是没有拓扑序列的。可以证明,有向无环图一定存在一个拓扑序列,所以有向无环图也被称为拓扑图......
  • 人工智能与机器学习速查表
    机器学习和深度学习库速查表Numpy库PandasScipyMatplotlibScikitLearnKerasNeuralNetworksZoo......
  • 阿里8年经验之谈,从功能测试进阶自动化测试,整理出这一份3000字超全学习指南
    最近收到不少小伙伴私信问,做了好几年测试,一直停留在手工测试点点点的阶段,想要进阶,想要做自动化测试,该怎么学习,以及需要学些什么? 今天,我就来聊一聊手工测试如何进阶......
  • c语言学习日志——练习
    T:实现一段字符串从两端逐个向中间移动。code:#define_CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<string.h>intmain(){chararr1[]="Welcometo512";chara......