五分钟上手ECharts教程

EChart小案例：https://download.csdn.net/download/TroyeSivanlp/33199899

五分钟上手ECharts教程

1-Echarts-介绍
2-了解Echarts的基础配置
3-如何在页面上显示简单的图表
- 首先，初始化echarts实例对象
- 第二步，指定配置项和数据(option)
- 第三步，将配置项设置给echarts实例对象

1-Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

简单来说ECharts就是：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

2-了解Echarts的基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

演示代码：

var option = {color: ['pink', 'blue', 'green', 'skyblue', 'red'],title: {text: '我的折线图'},tooltip: {trigger: 'axis'},legend: {data: ['直播营销', '联盟广告', '视频广告', '直接访问']},grid: {left: '3%',right: '3%',bottom: '3%',// 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签// 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',// 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。boundaryGap: false,data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '直播营销',// 图表类型是线形图type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',data: [320, 332, 301, 334, 390, 330, 320]}]};           trigger: 'axis'

3-如何在页面上显示简单的图表

官方教程：五分钟上手ECharts

准备工作：

下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
引入echarts：dist/echarts.min.js
准备一个具备大小的DOM容器

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

首先，初始化echarts实例对象

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

第二步，指定配置项和数据(option)

var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]
};

第三步，将配置项设置给echarts实例对象

myChart.setOption(option);

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document01</title><style>.box{width: 300px;height: 300px;background-color: rgb(188, 227, 236);}</style>
</head>
<body><!-- 2.准备具有大小的DOM容器 --><div class="box"></div><script src="js/echarts.min.js"></script><script>//3.初始化实例对象 echarts.init(dom容器)var myChart = echarts.init(document.querySelector(".box"));//4.指定配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};//5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

五分钟上手ECharts教程相关推荐

自动调试自动编译五分钟上手
Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...
MAthJax入门教程（五分钟上手）
最近在研究,在页面中显示一些数学公式.搞得我很头疼. 据说MathJax会统一这已领域.所以去学了学.网上教程特别多.繁杂. 说的清楚的特别少. 我是这么跑通的,: 1.在官网下载代码地址为:http ...
5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
git FreshMan指南，五分钟上手（图解）
目录一.Git 工作流程二.Git 工作区.暂存区和版本库基本概念三.Git 的基本操作创建仓库命令提交与修改提交日志远程操作四.Git 分支管理五.Git 查看提交历史一.Gi ...
MQ（message queue）使用 Spring整合 MQ下载五分钟上手使用
MQ百度云下载链接:https://pan.baidu.com/s/1h3s1RF4FE6hN7aUlLuDmkA 提取码:6bit 1.ActiveMQ简介什么是ActiveMQ ActiveM ...
AirTest 基本使用及框架浅剖析——五分钟上手制作游戏辅助
简介 Airtest Project 是为编写自动化脚本,达到提升测试效率的一整套解决方案.它可以轻松的扩展到多平台.多引擎上:如基础的 Android和IOS手机应用.App:Windows上的应用 ...
五分钟上手Premiere——小白的视频剪辑笔记
Adobe Premiere是当下最为流行的视频剪辑软件之一.之前看别人用过一次,后来恰好有剪辑视频的需要,于是按照残存的记忆摸索之,辅以百度和"51自学网"视频少量,仓促间倒也做 ...
ECharts教程（未完）
ECharts 特性兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型常规的折线图.柱状图 ...
【快速上手系列】五分钟即可学会的easyUI的简单使用教程
[快速上手系列]五分钟即可学会的easyUI的简单使用教程一个简单方便的前端框架引入文件引入两个css样式和三个js  <link hre ...
五分钟让你的数据动起来，动态数据可视化极简教程
之前发了一条动态数据可视化的视频,有很多朋友来咨询怎么制作的,其实制作过程难度不大,上手很快,特地为大家整理了一篇制作教程,五分钟让你的数据动起来! 为什么做动态数据可视化? 动态数据可视化主要应用的 ...

五分钟上手ECharts教程

五分钟上手ECharts教程

1-Echarts-介绍

2-了解Echarts的基础配置

3-如何在页面上显示简单的图表

首先，初始化echarts实例对象

第二步，指定配置项和数据(option)

第三步，将配置项设置给echarts实例对象

五分钟上手ECharts教程相关推荐

最新文章

热门文章