简单的使用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. 50HZ陷波器的原理和实物开发设计

    原理     陷波滤波器指的是一种可以在某一个频率点迅速衰减输入信号,以达到阻碍此频率信号通过的滤波效果的滤波器.陷波滤波器属于带阻滤波器的一种,只是它的阻带非常狭窄,起阶数必须是二阶(含二阶)以上. ...

  2. posix API的一些理解

    TCP Posix API的理解 我们主要从TCP连接讲解整个的流程. 连接的建立 消息的收发 连接的断开 连接的建立 先看一下一个TCP server的创建过程. #include<stdio ...

  3. MyBatisPlus常用功能总结！(附项目示例)

    这篇主要是总结一下MybatisPlus一些常用的场景,目前主要有以下几点: 完整的CURD操作示例 逻辑删除功能示例 自动填充功能示例 分页插件功能示例 有关一些其它重要的功能比如 条件生成器.主键 ...

  4. HttpClient 详解

    作者:小白豆豆5链接:https://www.jianshu.com/p/14c005e9287c来源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.HTTP 请求创建 ...

  5. 【atcoder abc281_d】动态规划

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; /** * @ ...

  6. openlayers操作分享：如何从容的在vue中食用openlayers6

    这篇文章,分享下我对openlayers的一些经验和理解,会夹杂大量搜索出来得文档,是我正式使用时可以实现的,废话不多说,我们从下载开始 一,openlayers安装且初始化地图 创建vue项目就省略 ...

  7. uniapp 微信对接地图的三种操作

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1.uni.getLocation 获取当前经维度 先上代码 let that = this // 获取用户是否开启 授权获取当前的地理位 ...

  8. C# OpenCvSharp 提取文字区域

    效果 项目  代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  9. C# SM2

    Cipher using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Digests; using Org.BouncyCastle. ...

  10. flume采集nginx日志文件数据到Kafka

    flume官网地址http://flume.apache.org/ #下载 wget https://mirrors.bfsu.edu.cn/apache/flume/1.9.0/apache-flu ...