1.获取ECharts

　　官网 下载：http://echarts.baidu.com/download.html

2.在html页面中引入ECharts文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" src="js/echarts.min.js" ></script>//这里是引入ECharts的js文件

    </head>

    <body>

    </body>

</html>

文件的目录结构：

3.绘制一个简单的图表

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" src="js/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>

4.效果图展示

ECharts学习（1）--简单图表的绘制的更多相关文章

  1. .net图表之ECharts随笔01-最简单的使用步骤

    找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...

  2. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  3. echarts学习总结

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

  4. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  5. 主窗体里面打开子窗体&&打印饼图《Delphi 6数据库开发典型实例》--图表的绘制

    \Delphi 6数据库开发典型实例\图表的绘制 1.在主窗体里面打开子窗体:ShowForm(Tfrm_Print); procedure Tfrm_Main.ShowForm(AFormClass ...

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

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

  7. echarts学习笔记(一)

    echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...

  8. 自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表

    自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表 Zabbix提供了一些简单的图表,用于可视化由项目收集的数据. 用户不需要进行配置工作来查看简单的图表.他们是由 ...

  9. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

随机推荐

  1. ListDefinition Tips

    1)ListTemplate.Type位数不能太长(最长7位),否则启用内容类型后,列表设置中会抛异常. <ListTemplate Name="List1" Type=&q ...

  2. Android-两种方式实现走马灯效果

    第一种方法(很普遍,很简单的在xml布局文件中设置TextView的属性): <TextView android:id="@+id/tv_text" android:layo ...

  3. 使用Intellij IDEA搭建Ext JsMVC web项目

    由于自己从android开发转来学习web开发,最近在学习Jsp,之前接触过一点Extjs,所以用jsp来配合ext试试. Ext JS介绍 extjs是一个javascript框架,它的好处就是有它 ...

  4. Android Touch事件分发机制学习

    Android  事件分发机制 ViewGroup dispatchTouchEvent 返回true dispatchTouchEvent: Activity ACTION_DOWN Myrelat ...

  5. “#if 0/#if 1 ... #endif”的作用

    1. "#if 0/#if 1 ... #endif"的作用,我们知道,C标准不提供C++里的"//"这样的单行风格注释而只提供"/* */" ...

  6. PHP开发之Zend Studio快捷键汇总

    应用场景 快捷键 功能 查看快捷键 ctrl+shift+l 显示所有快捷键列表 查看和修改快捷键 打开Window->Preferences->General->keys 修改字体 ...

  7. 【scikit-learn】scikit-learn的线性回归模型

     内容概要 怎样使用pandas读入数据 怎样使用seaborn进行数据的可视化 scikit-learn的线性回归模型和用法 线性回归模型的评估測度 特征选择的方法 作为有监督学习,分类问题是预 ...

  8. 微软移动 Nokia Lumia SensorCore SDK 介绍及上手体验

    早在今年的BUILD大会上,诺基亚就宣布了SensorCore以及它的部分演示.今天,它终于面世了,大家可以去Building Apps for Windows 上查看具体介绍,或者也可以去Nokia ...

  9. ORA-39242 错误

    转载: Oracle 11g Release 1 (11.1) Data Pump 技术 http://docs.oracle.com/cd/B28359_01/server.111/b28319/d ...

  10. MYSQL多实例配置方法 mysqld_multi方法

    在实际的开发过程中,可能会需要在一台服务器上部署多个MYSQL实例,那建议使用MYSQL官方的解决方案 mysqld_multi 1.修改my.cnf 如一个定义两个实例的参考配置: [mysqld_ ...