正文

五分钟上手echarts教程(代码片段)

咖啡壶子  咖啡壶子  2023-01-15  262

关键词：

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

五分钟上手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学习笔记(代码片段)

...ts官网，里面有教程有API。先拷贝一下官方的教程：5分钟上手ECharts获取ECharts你可以通过以下几种方式获取ECharts。从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了查看详情

5分钟上手echarts

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

thymeleaf+echarts，显示后端传来的数据(代码片段)

视频：ECharts数据可视化项目-大屏数据可视化展示-echarts图表制作-_bilibili文档：Documentation-ApacheECharts-五分钟上手ECharts前端测试ECharts工具：HBuilderX。1、Release5.1.2·apache/echarts往下拉，点击"Sourcecode(zip)& 查看详情

thymeleaf+echarts，显示后端传来的数据(代码片段)

git五分钟教程(代码片段)

许多人认为Git太混乱或是复杂的版本控制系统，这篇文章是面向一些人想快速上手使用Git，对于大多数基本需求这篇文章涵盖了使用的70%至90% 入门使用Git前需要先建立一个仓库(repository)。你可以使用一个已经存在的目录作为... 查看详情

五分钟上手git

团队开发中。遵循一个合理、清晰的Git使用流程。是非常重要的。否则，每一个人都提交一堆杂乱无章的commit，项目非常快就会变得难以协调和维护。以下是ThoughtBot 的Git使用规范流程。我从中学到了非常多，推荐你也这样... 查看详情

echarts入门教程精简实用系列(代码片段)

...可视化的插件，用于以图表的形式展现数据，功能强大，上手简单1、从官方网站中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。2、从前端页面引入echarts.js，后即可使用<scriptsrc="js/echarts.... 查看详情

前端echarts可视化框架快速上手详解(代码片段)

✍前端ECharts可视化框架完结🔥前端ECharts可视化框架完结地址🔥前端ECharts可视化框架快速上手详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/119850486🔥前端ECharts可视化框架快速上手详解(二)https://blog.csdn.net/Augenste 查看详情

前端echarts可视化框架快速上手详解(代码片段)

✍目录脑图🔥前端ECharts可视化框架完结地址🔥前端ECharts可视化框架快速上手详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/119850486🔥前端ECharts可视化框架快速上手详解(二)https://blog.csdn.net/Augenstern_QXL/artic 查看详情

echarts使用

首先下载eCharts源代码,然后可以按照官网的5分钟上手ECharts教程做一个简单的例子,这里为了将前端显示和后端逻辑分开，可以建一个index.html和一个绘制图表的chartTest.js,代码如下:<html><head><metacharset="UTF-8"><title>eCh... 查看详情

前端echarts可视化框架快速上手详解(代码片段)

✍目录脑图官方文档讲解较细致，但同时也较繁琐，本篇旨在记录常用样式的用法与注意点.参考视频：玩转ECharts可视化框架Pink老师前端ECharts框架学习1、ECharts1.1、ECharts下载1.1.1、Github下载下载并引入echarts.js文件(图... 查看详情

paddle点灯人之10分钟快速上手paddle(代码片段)

Paddle点灯人之10分钟快速上手Paddle文章目录Paddle点灯人之10分钟快速上手Paddle一、快速安装飞桨二、导入飞桨三、实践：手写数字识别任务3.1数据集定义与加载3.2模型组网3.3模型训练与评估3.3.1模型训练3.3.2模型评估3.4模型推... 查看详情

gormcrud5分钟快速上手(代码片段)

文章目录1.ORM是什么2.GORM是什么3.安装4.连接DB5.创建数据表6.增加（Create）7.查询（Read）8.更新（Update）9.删除（Delete）10.小结参考文献1.ORM是什么ORM（ObjectRelationalMapping）& 查看详情

十五分钟上手soflu全自动软件工程平台

目录前言正文一、产品介绍1.可视化配置实现业务逻辑2.丰富的组件库3.可视化执行日志4.仿真测试二、下载客户端三、注册登录四、创建项目五、管理项目六、测试接口结尾前言飞算云智致力于通过“软件工程变革”全面提升企... 查看详情

数仓建设教程(代码片段)

...姆级教程，离线和实时一网打尽(理论+实战)下_五分钟学大数据的技术博客_51CTO博客#yyds干货盘点#最强最全面的数仓建设规范指南_五分钟学大数据的技术博客_51CTO博客一、数仓查看详情

数仓建设教程(代码片段)

三分钟上手markdown——基本语法快速入门(代码片段)

最近爱上了用Markdown写博客，哈哈！你问我为什么？主要是用不着鼠标，全凭手敲解决问题，爽呀~好吧，我只是小菜鸟，发现了新大陆，文中表述有误评论马上修改！1.标题标题的语法是这样的&... 查看详情

[新星计划]python数据类型(下)|10分钟，轻松上手python列表操作(代码片段)

文章目录容器类型●列表（list）○索引○切片○增加○删除○修改○反转○排序○统计○遍历○判断成员关系○类型转换●元组（tuple）○索引○切片○不可变性○统计○遍历○成员关系●字典（dict）○... 查看详情

正文

五分钟上手echarts教程(代码片段)

五分钟上手ECharts教程

1-Echarts-介绍

2-了解Echarts的基础配置

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

首先，初始化echarts实例对象

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

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

echarts学习笔记(代码片段)

5分钟上手echarts

thymeleaf+echarts，显示后端传来的数据(代码片段)

thymeleaf+echarts，显示后端传来的数据(代码片段)

git五分钟教程(代码片段)

五分钟上手git

echarts入门教程精简实用系列(代码片段)

前端echarts可视化框架快速上手详解(代码片段)

前端echarts可视化框架快速上手详解(代码片段)

echarts使用

前端echarts可视化框架快速上手详解(代码片段)

paddle点灯人之10分钟快速上手paddle(代码片段)

gormcrud5分钟快速上手(代码片段)

十五分钟上手soflu全自动软件工程平台

数仓建设教程(代码片段)

数仓建设教程(代码片段)

三分钟上手markdown——基本语法快速入门(代码片段)

[新星计划]python数据类型(下)|10分钟，轻松上手python列表操作(代码片段)