数据可视化【Echarts】

想实现炫酷的动态数据效果嘛？想制作属于自己的数据可视化页面嘛？跟着咱魔鬼的步伐，5分钟，带你快速写出自己想要的可视化数据。

在聊如何实现之前，必须要提的就是Echarts官网了，里面有大量的数据可视化库，供我们学习与使用。网站我放这里了Apache ECharts一个基于 JavaScript 的开源可视化图表库。

其他不多说，直接上才艺，想实现任意一个可视化数据模块，大致可以分为五个步骤：

1. 引入Echarts.min.js / Echarts.js
2. 给数据模块创建一个DOM容器，用于存放数据可视块 ，容器可以是盒子（记得CSS给宽高）
3. 实例化Echarts,语法：echarts.init(DOM容器)eg:var my_echarts = echarts.init(document.querySelector('.box'));
4. 配置数据option ，这个数据在官网查找，找到你想添加的数据块图,点进去，把左边框起来的代码直接复制到你的页面JS代码中，点进去，如下图：
   
5. 最后把option添加给第二部实例化的对象my_echarts. eg: my_echarts.setOption(option).

随便在官网上找一个饼图：

把他实例化到自己的网页中

代码如下：

// 第一步引入echarts文件  （echarts.min.js/echarts.js）在官网直接下载即可
<script src="../JS动态效果文件/Echarts/echarts.min.js"></script>

// 第二部： 为Echarts准备准备一个DOM容器
    <div class="box"></div>

// 第三步： 实例化echarts
   var my_bing = echarts.init(document.querySelector('.box'));
// 第四步 配置数据（直接在官网上黏贴）
        option = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [{
                    value: 40,
                    name: 'rose 1'
                }, {
                    value: 38,
                    name: 'rose 2'
                }, {
                    value: 32,
                    name: 'rose 3'
                }, {
                    value: 30,
                    name: 'rose 4'
                }, {
                    value: 28,
                    name: 'rose 5'
                }, {
                    value: 26,
                    name: 'rose 6'
                }, {
                    value: 22,
                    name: 'rose 7'
                }, {
                    value: 18,
                    name: 'rose 8'
                }]
            }]
        };
  // 第五步 把配置好的option数据传给实例化对象my_bing
        my_bing.setOption(option);

实现后的效果：

tips: 记得给DOM盒子设置一下样式，给它个宽高，不然这个图形是不显示的（自适应宽高的原因）。

看到这里，想必已经可以实现一些官网存在的数据可视化图了吧，是不是很愉快的操作

仅仅知道这些是可以实现官网上存在的图，但是，怎么设计跟自己业务相匹配的图表呢？如果细心发现，上面js代码中，第四部也就是option配置数据步骤里有许许多多的数据，我们就是在这里修改的，具体怎么修改，我们来认识一下里面的属性…

1. title 标题组件，可以修改标题和副标题的内容
2. legend 图例组件可以控制图例组件的显隐
3. toolbox工具栏 控制着可视图表的下载与刷新等，下载以后是下载成了png图片
4. tooltip 提示框组件 控制着鼠标移动到图表上是否显示提示信息
5. yAxis 与 xAxis 代表的分别是 y轴与x轴 ，Axis的意思是坐标轴。
6. grid 代表绘图网格 ，主要控制网格的大小，形态 ，可以通过调节它的bottom ,left.right等值来控制
7. color 控制着折线图线条的颜色【特别注意】颜色写成数组的形式
8. series代表着系列列表，主要控制着图表中的数据。 【特别注意】和color一样都是数组的形式。

tips: Echarts的组件是非常多的，在这里就不再一一介绍，再开发中具体用到哪个，在官网的 文档–>配置项手册中查找，了解其技术。

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~