写在前面

最近，在做某个项目的时候。需要使用的可视化的图表显数据。最后，选择了百度的Echarts。

下载Echarts和主题

1.获取Echarts

  • 这是这官网的地址 传送门 直接下载最新的版本的Echarts

2.下载Echarts

  • 选择下载，拉到下面，点击在线定制

  • 然后跳转到在线构建页面，图表只选择常规的柱状图、折线图、饼图

  • 坐标系不选

  • 组件选择标题、图例、提示框

  • 其他选项 选择工具集 、代码压缩

  • 跳转下载界面，下载完成

3.下载主题

  • 选择下载->下载主题

  • 选择自己喜欢的主题

  • 点击下载

绘制一个简单的图表

1.引用Echats

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

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

</head>

</html>

2.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="main" style="width: 600px;height:400px;"></div>

</body>

3.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

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

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

这样你的第一个图表就诞生了！

这个是官网给出的最简单的例子。如果还是，有不明白的地方，可以去官网详细的看文档。

Echarts 学习系列(1)-5分钟上手ECharts的更多相关文章

  1. Echarts 学习系列(2)-常见的静态ECharts图

    目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...

  2. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  3. Echarts 学习系列(3)-Echarts动态数据交互

    写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...

  4. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  5. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  6. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  7. echarts入门，5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  8. Echarts学习总结（一）-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

  9. 快速上手 Echarts

    最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...

随机推荐

  1. EFK日志搭建

    安装java 安装java1.8以上的版本并验证 [root@localhost ~]# yum install java [root@localhost ~]# java -version open ...

  2. 为什么内核访问用户数据之前，要做access_ok?

    本文系转载,著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者: 宋宝华 来源: 微信公众号linux阅码场(id: linuxdev) 原理 先看一段小视频,如果内核访问用户 ...

  3. Spring中@Autowired、@Resource和@Inject注解的使用和区别

    在使用Spring进行项目开发的时候,会大量使用到自动装配,那自动装配是什么呢?简单来说:Spring 利用依赖注入(DI)功能,完成SpringIOC容器中各个组件之间的依赖关系赋值管理. 下面介绍 ...

  4. centos 用户名密码忘记了怎么办？

    进入互动式命令行 打开虚拟机,进入模式选择界面,即有两个模式的主界面,然后在时间结束前按e, 进入编辑选项菜单 按↓键定位到类似 linux16 /vmlinuz-3.10.0-123.el7.x86 ...

  5. ant design pro如何实现分步表单时，返回上一步值依然被保存

    首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...

  6. OpenCV 学习笔记（15）openc解帧视频

    1 修改读取视频的地址 2 修改保存图片序列的路径 String videopath = "F:/dongdong/0tool/3D/2模型/相机阵列/1_12cam亿级相机/数据/giga ...

  7. pycharm初识及格式化输出

    #_*_coding:utf-8_*_#作者:王佃元#日期:2019/12/6 #格式化输出name = input("Name")age = input("Age&qu ...

  8. [Python] 递归返回值 为 None 的问题

    递归返回值 为 None 的问题 解决办法: 在递归调用下一个 递归 函数前面,一定要加上 return,否则就会返回 None 如红色 所处的return: def getAllCityUrl(ur ...

  9. selenium--页面元素相关的操作

    获取元素的标签和元素大小 from selenium import webdriver import unittest class Test_BasicInfo(unittest.TestCase): ...

  10. [cf113d]Museum

    传送门 Solution 设一个状态为 \((x,y)\) 表示两人在的位置,求出每个状态期望出现的次数 设一个状态为 \(u\) , \(x_u^0=[u==(a,b)]\) 所以一个状态出现的次数 ...