echarts创建图表

Echarts是一个图表插件,可以用在做一些统计图

如:折线图

还有柱状图

我们在工作中有时会用到图表来展示数据

我们一起来学学echarts这个图表插件吧^_^

第一步:下载插件包

下载地址:http://echarts.baidu.com/index.html

下载好后,我们就来开始使用这个插件了

第二步:创建html文档并引入插件的文件

第三步:创建容器,并设置高度

第四步:在新建一个script用来写js代码

第五步:配置文件包的路径(因为后面要使用包里的东西,所以需要先设置路径)

现在不用知道每个函数的意思,只需要知道这段代码是用来设置路径的,因为后面要使用dist里的文件

 

第六步:开始制作

先写一个require({});将代码都写到里面

第七步:使用统计图类型文件,我们现在做的柱状图,我们需要引入bar文件

第八步:初始化容器

第九步:初始化图表内容

第十步:是否开启气泡提示框

第十一步:数据和图形是否关联

第十二步:x轴数据

第十三步:y轴数据

第十四步:显示的数据

第十五步:为容器加载数据

显示结果

在头部加上编码就可以了

好啦,柱状图你会了么?^_^

如果想以折线图显示的话就将bar改成line就可以了,有两处要改

折线图就出来啦^_^,挺好用的吧,要以其他的显示也是一样的

还有其他的图,可以去官网http://echarts.baidu.com/index.html了解更多

折线图:line

柱状图:bar

散点图:scatter

K线图:k

饼图:pie

雷达图:radar

和弦图:chord

力导向布局图:force

 

地图:map

仪表盘:gauge

漏斗图:funnel

事件河流图:eventRiver

好了,希望大家能用echarts来制作统计图,^_^

 

时间: 2024-11-10 14:09:18

echarts创建图表的相关文章

vue 插件 使用 Echarts 创建图表 (转)

在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

angular结合echarts创建图表

原理: 利用angularjs中的指令(directive)将echarts封装. 步骤: 1.封装函数: app.directive('line', function() { return { scope: { id: "@", legend: "=", item: "=", data: "=" }, restrict: 'E', template: '<div style="height:400px;wid

使用chart和echarts制作图表

  前  言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案.并且它不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上

knockout+echarts实现图表展示

一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的配置 require.config.js中可以配置我们的自定义模块的加载. require.config({ baseUrl: ".", paths: { text: "requirejs/text", jquery: "jquery/jquery-1.11.

python使用VBA(8):Excel创建图表(转)

# -*- coding: utf-8 -*- """ Created on Thu Mar 06 11:22:03 2014 @author: Administrator """ import win32com.client from win32com.gen_py import msof,mspp,msxl from string import uppercase from pandas import Series #%% 将常量发布到全局命

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年5月5日 http://www.cnblogs.com/fanshuyao/ 做了个柱状图的报表,如下: 但是图和下面的表格没有对齐,需要

基于echarts实现图表展示

[Author]: kwu 1.引用相关的js框架 <pre name="code" class="javascript"><script type="text/javascript" src="js/esl/esl.js"></script> <script type="text/javascript" src="js/echarts.js"&

使用百度echarts画图表的步骤

1.百度echarts是一个很好用的图表工具,可以将一些数据很形象直观的展示出来,下面看一下简单的使用. 2.首先引用echarts.js 具体文档可以参考官网: http://echarts.baidu.com/tutorial.html 里面讲的很详细.而且官网也有很多的实例供我们参考. 3.引入echarts之后需要一个容器: 1)准备容器 这个容器就是将我们的数据在里面展示出来. 2)初始化echarts实例: var myCharts =  echarts.init(document.

Echarts个性化图表的样式--绘制南丁格尔图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个性化图表的样式--绘制南丁格尔图</title> </head> <body> <div id="main" style="width:800px;height:600px;">&