Apache Echarts简介|Echarts基本操作|配置

在这里插入图片描述
每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习!
各类常用图表总结在此!配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具,有更详细的工具使用方法:
https://echarts.apache.org/zh/option.html

1. Echarts介绍

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形
库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

  • 开源免费
    它是开源免费的,也就是我们可以免费的使用 ECharts ,不需要缴纳任何的费用
  • 功能丰富
    它的功能非常的丰富,提供了各种各样的图表,支持各种各样的定制, 满足各种需求,比如折线
    图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有她
    做不到 这句话来形容
  • 社区活跃
    ECharts 的社区非常活跃,意味着你可以和很多开发者讨论,遇到了 ECharts 中不会的问题,也
    很容易找到解决办法
  • 多种数据的支持
    可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其
    实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数
    据格式,还能支持二维表,或者 TypedArray 格式的数据
  • 流数据的支持
    对于超大的数据量而言, 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的
    动态渲染,加载多少数据就渲染多少数据,省去了漫长的数据加载的等待时间, 他还提供了增量渲
    染的技术, 只渲染变化的数据, 提高系统的资源利用.
  • 移动端的优化
  • 跨平台
    商业智能BI的实现方式主要有微软的BI和Power-BI, 它比报表类更加高端, 他除了可以对数据生成报
    表之外, 还可以提出决策依据,帮助企业做出明智的业务经营决策
    编码类, 这种是需要程序员参与, 程序员可以对接到公司现有的系统架构中进行编码, 实时生成动态的
    图表.常见的使用库有ECharts.js和D3.js, 我们项目中使用的是ECharts.js , 他是百度公司开发
    的一套开源可视化库, D3.js是国外的一个可视化库, 在封装性\易用性\效果上, ECharts要更优秀
    一些.
  • 酷炫的特效,
  • 数据的三维可视化

ECharts 能够做出各种各样漂亮的图表,它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便,
功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址:
https://echarts.apache.org/zh/index.html

2. Echarts简单使用

Echarts 的使用简单分为5个步骤:

  • 步骤1:引入Echarts.js文件
<script src = "js/echarts.min.js:"> </script>
  • 步骤2:准备一个呈现图表的盒子
    这个盒子通常来说就是我们熟悉的div(标签对象),这个div决定了图表显示在哪里
<div id="main" style = "width:600px;height:400px"> </div>

上面的代码给出了一个宽为600像素,高为400像素,id为main的DOM容器。

  • 步骤3:初始化echarts实例对象
    这个步骤中,通过 echarts.init 方法初始化一个 echarts 实例,并且是用来指明图表最终显示在哪里的DOM元素
var myChart = echars.init(document.getElementById('main'))
  • 步骤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)

最终效果:
在这里插入图片描述

一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码 都是固定不变的.

3. 相关配置

  • xAxis
    直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis
    直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series
    系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于
配置项的学习, 不用死记硬背, 需要的时候查一查官方文档即可. 网址:
https://echarts.apache.org/zh/option.html

  • 30
    点赞
  • 179
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值