首页 > 其他分享 >图表库插件的使用

图表库插件的使用

时间:2023-05-30 09:22:26浏览次数:39  
标签:插件 图表 180 文档 使用 type echarts

echarts图表库插件的使用

常见图表库: echarts , antv(蚂蚁金服做的). datav (阿里体系的)
国际上: d3 ds.js

1. 什么是echarts图表

ECharts是一款基于javaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。2021年1月26日晚, Apache基金会官方宣布EChaiis项目正式毕业。

2. 简单使用方法

详情可以看官方文档; 这里我记录下简单的
echarts官网

  1. 安装

yarn add echarts

  1. 引入
import * as echarts from 'echarts';
  1. 创建图标容器, html标签;
<div id="echars1"></div>
  1. 初始化图表库
var myChart = echarts.init(document.getElementById(‘#echars1’));
  1. 配置图表
myChart.setOption({
        // 标题
        title: {
            text: '近7天运动时长',
            textStyle: {
                fontSize: '14px',
                fontWeight: '400'
            }
        },
        // 布局grid
        grid: {
            left: 40
        },
        // x轴; 类目轴
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // y轴; 数值轴
        yAxis: {
            type: 'value'
        },
        // 数据序列
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    });
  1. 查看官方文档, 文档>配置项手册, 根据自己的需要查看文档, 配置对应属性样式

  2. 官方有丰富的实例供选择, 点击进入实例可以获取代码

3. 具体的使用方法_

(在更新...)

标签:插件,图表,180,文档,使用,type,echarts
From: https://www.cnblogs.com/lyc00000000/p/17442278.html

相关文章

  • Qt线程简单使用二:QObject~创建任务类
     需求:点击QPushButton按钮,QLabel中的数字,不断累加,一直到999。 做法:点击QPushButton后,启动线程,线程while循环,不断发送累加的数字会主线程,修改QLabel中的数字 其他:一个任务类,可以创建多个任务,写法麻烦一点,视情况决定是否采用这种方法。  主要代码://......
  • 苹果公司限制员工使用AI工具ChatGPT
    ​      导读:苹果公司最近发布了一份内部备忘录,禁止员工使用生成式AI平台(包括ChatGPT和GitHub的Copilot等)用于工作任务。 本文字数:600,阅读时长大约:2分钟 苹果公司最近发布了一份内部备忘录,禁止员工使用生成式AI平台(包括ChatGPT和GitHub的Copilot等)用于工作任务。这......
  • # yyds干货盘点 # 使用PyInstaller工具将Python程序打包成Mac可执行文件步骤
    大家好,我是皮皮。一、前言前几天在Python钻石群【JethroShen】问了一个Python打包的问题,这里拿出来给大家分享下。二、实现过程这里【eric】问了【ChatGPT】,并给出了代码,如下所示:在Mac系统中,Python程序不能直接打包成.exe可执行文件,因为.exe是Windows系统下的可执行文件格式,而Mac......
  • 使用PyInstaller工具将Python程序打包成Mac可执行文件步骤
    大家好,我是皮皮。一、前言前几天在Python钻石群【JethroShen】问了一个Python打包的问题,这里拿出来给大家分享下。二、实现过程这里【eric】问了【ChatGPT】,并给出了代码,如下所示:在Mac系统中,Python程序不能直接打包成.exe可执行文件,因为.exe是Windows系统下的可执行文件格......
  • 简单control net 使用,建筑风格重新生成
    原图生成海景房方法:启用controlnetAnnotatorresolution(分辨率)可以调小一点预处理器:边缘检测cannymodel:canny-fp16正向提示词: masterpiece,bestquality,building,seaviewroom反向提示词:worstquality,lowquality,normalquality,lowres ......
  • net6 使用 efcore 根据 mysql数据库生成代码
    1.vs中下载程序NuGet包Microsoft.EntityFrameworkCore.ToolsPomelo.EntityFrameworkCore.MySql 把这两个安装好就可以了或者你嫌麻烦也可以直接用命令下载 打开VS2019"工具"->"Nuget包管理器"->"程序包器管理控制台"PM>Install-PackageMicrosoft.EntityFrameworkCore.Too......
  • djangorestframework-simplejwt使用
    djangorestframework-simplejwt环境Python(3.7,3.8,3.9,3.10)Django(2.2,3.1,3.2,4.0)DjangoRESTFramework(3.10,3.11,3.12,3.13)安装普通安装pip3installdjangorestframework-jwt加密安装pipinstalldjangorestframework-simplejwt[crypto]#建议在......
  • Java中的Stream基本使用
    一Java中的流库Stream是Java8中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,可以执行非常复杂的查找、过滤和映射数据等操作。使用StreamAPI对集合数据进行操作,就类似于使用SQL执行的数据库查询。也可以使用StreamAPI来并行执行操作。简而言之,StreamAPI......
  • jwt原理,jwt开发流程,drf-jwt快速使用,drf-jwt定制返回格式,drf-jwt自定义用户表签发,drf-j
    jwt原理:  JWT就是一段字符串,由三段信息构成的,将这三段信息文本用.链接一起就构成了Jwt字符串1headerjwt的头部承载两部分信息:声明类型,这里是jwt声明加密的算法通常直接使用HMACSHA256公司信息......
  • net-core(EF Core)-使用表达式树还是委托
    usingMicrosoft.EntityFrameworkCore;usingMicrosoft.EntityFrameworkCore.Metadata.Builders;publicclassMemberConfig:IEntityTypeConfiguration<Member>{publicvoidConfigure(EntityTypeBuilder<Member>builder){builder.ToTa......