简单的使用Echars制作柱状图

html如下

<!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>Echars测试</title>

    <style>

        .box {

            width: 600px;

            height: 600px;

            background-color: cornsilk;

            margin: 0 auto;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class='box'>

    </div>

    <script src="js/echarts.js"></script>

    <script>

        var myCharts = echarts.init(document.querySelector(".box"))

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data: ['仓库月使用量']

            },

            xAxis: {

                data: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6"]

            },

            yAxis: {},

            color: [

                '#d48265'

            ],

            series: [{

                name: '仓库月使用量',

                type: 'bar',

                data: [11, 45, 14, 66, 57, 11]

            }]

        };

        myCharts.setOption(option);

    </script>

</body>

</html>

运行后效果如下，实际上是可以将样式和js都分别放在css文件和js文件中，比较懒就合在一起了

官网有很多这种示例

简单的使用Echars制作柱状图的更多相关文章

  1. Extjs 制作柱状图

    在JSP页面制作柱状图,可以根据数据的变化动态实时的变化 主要是使用EXTJS自带的插件达到效果 Ext.require('Ext.chart.*'); Ext.require([ 'Ext.Wind ...

  2. 【python笔记】Qt+云函数 实现简单的登录框制作

    [python笔记]Qt+云函数 实现简单的登录框制作 备注:前置条件:QtDesigner.pycharm.PyQt5.配置好的云函数(百度的叫函数计算CFC,用来充当一个简陋的服务器,主要是免费) ...

  3. [PCB制作] 1、记录一个简单的电路板的制作过程——四线二项步进电机驱动模块（L6219）

    前言 现在,很多人手上都有一两个电子设备,但是却很少有人清楚其中比较关键的部分(PCB电路板)是如何制作出来的.我虽然懂点硬件,但是之前设计的简单系统都是自己在万能板上用导线自己焊接的(如下图左),复 ...

  4. 简单介绍RPM包制作方法

    RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,是一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中.它生成具有.RPM扩展名的文件.使用r ...

  5. ABAP简单表维护的制作

    为了知识的积累,特作了个简单的表维护. 因为自己之前做dynpro程序的时候建了一个Tree node的表,所以就不在此重复.(在表的交付和维护页签中标的属性要是‘允许标准表维护的’) 直接Alt+U ...

  6. Vue整合d3.v5.js制作--柱状图(rect)

    先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...

  7. Echarts 简单报表系列一：柱状图

    见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. 用简单的JS代码制作计算器

    代码+注释一共不到200行,是练习交流的必备良药 主界面如下: 操作示意图: 以下是代码部分 HTML: <div> <table class="window"& ...

  9. Android一个简单的自定义对话框制作

    布局文件 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android= ...

  10. salesforce 零基础学习（二十）简单APP制作

    本篇参考链接:https://developer.salesforce.com/trailhead/project/salesforce_developer_workshop 本篇讲述的是最简单的AP ...

随机推荐

  1. 在linux上安装redis并设置权限

    redis是使用 c 开发,启动文件是二进制的看不到什么有用的信息,安装最新版本可以在https://redis.io/download 官网上查看,安装非常简单: mkdir /usr/redis, ...

  2. 数据湖&湖仓一体简介

    1 简介 术语 数据库 数据库是"按照数据结构来组织.存储和管理数据的仓库". 广义上的数据库,在20世纪60年代已经在计算机中应用了.但这个阶段的数据库结构主要是层次或网状的,且 ...

  3. Leetcode 1161 最大层内元素和

    一.题目 给你一个二叉树的根节点 root.设根节点位于二叉树的第1层,而根节点的子节点位于第2层,依此类推. 请返回层内元素之和 最大 的那几层(可能只有一层)的层号,并返回其中 最小 的那个. 示 ...

  4. MyBatis Java 和 Mysql数据库 数据类型对应表

    类型处理器(typeHandlers) MyBatis 在设置预处理语句(PreparedStatement)中的参数或从结果集中取出一个值时, 都会用类型处理器将获取到的值以合适的方式转换成 Jav ...

  5. 24_用Qt和FFmpeg实现简单的YUV播放器

    前面文章FFmpeg像素格式转换中我们使用FFmpeg实现了一个像素格式转换工具类,现在我们就可以在Qt中利用QImage很容易的实现一个简单的YUV播放器了. 播放器功能很简单,只有播放.暂停和停止 ...

  6. 【LeetCode刷题】69. x 的平方根

    69.x的平方根(点击跳转LeetCode) 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去 ...

  7. 记录--一行代码修复100vh bug

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 你知道奇怪的移动视口错误(也称为100vh bug)吗?或者如何以正确的方式创建全屏块? 一.100vh bug 什么是移动视口错误? 你 ...

  8. 摄影系列：李涛ps视频教程笔记

    四种颜色模式: HSB:人眼的识别. RGB:基于光.(RGB自然三原色,三个最大值,得出白色,所以RGB为加色模式) CMY:基于印刷.(青.品.黄印刷三原色,三个最大值,得出黑色,所以CMY为减色 ...

  9. 重返ubuntu世界

    一直对"重返"两个字充满了情怀感,因为会想起小时候看的一本龙珠同人的标题,它就唤作<重回龙珠世界>.最近这五年基本都是在MacOS下工作和学习的,也习惯用MacOS.就 ...

  10. 手把手带你用香橙派AIpro开发AI推理应用

    本文分享自华为云社区<如何基于香橙派AIpro开发AI推理应用>,作者:昇腾CANN. 01 简介 香橙派AIpro开发板采用昇腾AI技术路线,接口丰富且具有强大的可扩展性,提供8/20T ...