ECharts介绍

最新推荐文章于 2025-02-12 15:12:03 发布
最新推荐文章于 2025-02-12 15:12:03 发布
阅读量915 收藏 4
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45659764/article/details/124826130
版权

目录

1. 什么是数据可视化

1.1 数据可视化

1.2 数据可视化的场景

1.3 常见的数据可视化库

2. 数据可视化项目概述

2.1 项目展示

 2.2 项目目的

2.3 项目技术

 ​编辑​编辑

 3. ECharts简介

4. ECharts的基本使用

4.1 ECharts使用五部曲

4.2 选择不同类型图表

4.3 相关配置讲解

1.grid区域

 2. xAxis/yAxis

3. series：系列列表

 4.4 小结

 

1. 什么是数据可视化

1.1 数据可视化

  • 数据可视化主要目的：借助于图形化手段，清晰有效的传达与沟通信息
  • 数据可视化可以把数据从冰冷的数字转换成图形，解释蕴含在数据中的规律和道理

1.2 数据可视化的场景

目前互联网公司通常有这么几大类的可视化需求：

1.3 常见的数据可视化库

2. 数据可视化项目概述

2.1 项目展示

 2.2 项目目的

 

2.3 项目技术

 

 3. ECharts简介

 官网地址：https://echarts.apache.org/zh/index.html

 

4. ECharts的基本使用

4.1 ECharts使用五部曲

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <!-- 1. 下载引入EChart.js 文件 -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 2. 准备一个盒子用来装生成的图表 注意： 这个盒子必须具备大小 -->
   <div class="box"></div>
   <script>
    //    3.初始化echarts 实例对象    
     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. 将配置项和数据(option) 设置给 实例对象(myChart)
        myChart.setOption(option);
   </script>
</body>
</html>

 

4.2 选择不同类型图表

官网-实例-官方实例

4.3 相关配置讲解

  •  title：标题组件

  • tooltip：提示框组件

  • legend：图例组件

  • toolbox：工具栏

  • grid：直角坐标系内绘图网格

  • xAxis：直角坐标系grid中的x轴

  • yAxis：直角坐标系grid中的y轴

  • series：系列列表。每个系列通过type决定自己的图表类型（什么类型的图表）

  • color：调色盘颜色列表

先了解以上9个配置的作用，其余配置还有具体细节可以查阅文档：文档菜单-配置项手册 

学echarts关键在于学习查阅文档，根据需求更改配置

1.grid区域

grid网格区域：红色的网格区域，只不过图上没让x轴显示

最外层紫色的框是DOM容器的区域

grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
    }
  • left/right/bottom：图表距离容器左/右/底侧的距离
  • containLabel：grid区域是否包含坐标轴的刻度标签

    •  当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签

    • 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签，如果是true就显示，如果为false就不显示

 

  grid: {
                left: '0',
                right: '0',
                bottom: '3%',
                // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
                containLabel: false
            }

 2. xAxis/yAxis

xAxis: {
                type: 'category',
                // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            }

category：类目轴，适用于离散的类目数据，为该类型时必须通过data设置类目数据，可以通过data里面的数据把x轴划分成不同的类目

boundaryGap：坐标轴两边留白策略，坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

 

 

 color：

color: ['pink', 'blue', 'green', 'skyblue', 'red'],

3. series：系列列表

 series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '辣鸡',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]

 

type：类型（什么类型的图表） 比如line折线 bar 柱形

name：系列名称，用于tooltip的显示，legend的图例筛选 变化

stack：数据堆叠。如果设置相同值，则会数据堆叠

        数据堆叠：第二个数据值=第一个数据值+第二个数据值

                          第三个数据值=第二个数据值+第三个数据值....依次叠加

        如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠

 

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定制ECharts图表相关配置</title>
    <script src="./js/echarts.min.js"></script>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var myChart = echarts.init(document.querySelector(".box"));
        var option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', '辣鸡', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total1',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '辣鸡',
                    type: 'line',
                    stack: 'Total2',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total3',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total4',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total5',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

 4.4 小结

 

ECharts介绍ECharts介绍
09-17
ECharts介绍ECharts介绍
ECharts介绍123.zip
04-10
在本压缩包文件“ECharts介绍123.zip”中，很可能是包含了一些关于ECharts的基础教程、示例代码或者相关文档。 ECharts的核心特点包括： 1. **丰富的图表类型**：ECharts支持线图、柱状图、饼图、散点图、K线图、...
echarts 简介
weixin_43931625的博客
10-19 1660
echarts 简介
ECharts介绍及使用方法
xiaoyaGrace的博客
11-11 662
首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。 官网地址 1.首先在官网 选择合适的下载版本 [下载地址](http://echarts.baidu.com/download.html) 1 2.引入Echarts <scriptsrc="js/echarts.js...
Echarts入门教程（基础详细）
最新发布
露西西⭐的博客
02-12 2249
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。官网地址：Apache ECharts你可以使用如下命令通过 npm 安装 ECharts 2，引入ECharts 3，创建DOM容器 在Vue组件的模板部分，创建一个用于放置ECharts图表的DOM容器。例如： 4，初始化ECh
Echarts简单介绍
weixin_44545087的博客
04-28 414
开发工具与关键技术：VS 作者：黄 金 燕 班级：18级（4）班 撰写时间：2019.4.22 一.Echarts中的事件和行为 在 ECharts 的图表中用户的操作都会有相应的事件，开发者可以监听这些事件然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。 在 ECharts 3 中绑定事件跟 2 一样都是通过 on 方法，但是事件名称比 2 更...
Echarts
LILI_JU88的博客
11-17 1318
Echarts的介绍 ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器。 Echarts的特点：丰富的可视化类型 折线图，柱状图，饼状图，k线图，散点图…… 提供了上百种图形（只有你想不到，没有他做不到） 特点：多种数据的支持 Key-value数据支持 二维表 TypedArray格式 特点：流数据的支持 超大的数据...
ECharts简介
liubin5620的博客
03-29 662
Echarts简介
Echarts简介
qq_44718666的博客
08-25 9627
一.简述数据可视化技术 什么是数据可视化技术 借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观 科学可视化（出现最早，最成熟） 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征 主要面向自然科技中产生数据的建模操作和处理 应用于医疗（透析，CT），科研，航天，天气，生物等技术 信息可视化（更常见，接触更多） 科学可视化演变而来，主要处理非结构化，非几何的数据 金融交易，社交网络，文本数
ECharts详细说明
10-27 6331
简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、...
echarts的详细介绍。
qq_55748881的博客
04-13 307
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
数据可视化ECharts入门
wuzhanhui0715的博客
06-04 620
数据可视化ECharts使用 文章目录一、常见的数据可视化库2 数据可视化项目概述二 ECharts简介2 ECharts的基本使用2.1 ECharts 使用五步曲2.2 相关配置讲解2.2.1 series: 系列列表2.2.2 小结 一、常见的数据可视化库 2 数据可视化项目概述 二 ECharts简介 官网地址：https://www.echartsjs.com/zh/index.html ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设
前端学习之JavaScript echarts库的使用
qq_45839045的博客
02-23 1593
边框图片 组合写法： border-image: url("images/border.jpg") 167/20px round; 拆分写法： border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; border-image-repeat: round; 解释： 边框图片资源地址 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。 边框
Echarts的基本介绍
weixin_30832351的博客
08-03 332
这个这个。。哇，简直无敌，之前怎么没有发现这么强大的工具 最近写了一个JavaWeb的小项目，把Layui以及Bootstrap两大前端工具结合起来做了一个在我这个直男审美看起来很漂亮的一个购物网站，什么各种样式啊，各种控件啊，再加上我精妙的页面设计，就感觉还是挺不错的，也运行了很多的工具类添加到项目当中去，像啥邮箱验证啊，手机验证码验证啊，地图啊，支付包的支付界面啊等等，就充实一点嘛...
ECharts的讲解
热门推荐
weixin_62268437的博客
08-11 2万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
echarts地图简介
weixin_34082789的博客
11-27 156
2019独角兽企业重金招聘Python工程师标准>>> ...
ECharts介绍200字
06-05
ECharts（Enterprise Charts）是一个基于JavaScript的开源可视化库，由百度前端技术部开发。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、K线图、地图等，可以满足不同的数据可视化需求。ECharts采用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值