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 。