程序猿说——零编程玩转ECharts实现数据可视化效果

前言

       现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。

效果展示：

简介：

       这个项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...

一、Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

网址链接：Apache ECharts

步骤：

1.下载echarts（上面有网址链接）

2.引入echarts里面 dist/echarts.min.js 文件

3.准备一个具备大小的DOM容器（div），在HTML页面

4.在自己的js文件里面：初始化echarts实例对象，指定配置项和数据(option)，将配置项设置给echarts实例对象。

Echarts-基础配置

• series

  • 系列列表。每个系列通过 type 决定自己的图表类型

  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

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

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

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

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

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

二、Echarts-应用

这是引用的一个饼图。让我们按照上面的步骤来操作。

（1）html页面准备一个DOM容器（div）

<div class="pie"></div>

（2）在自己的js文件里面操作：初始化echarts实例对象，指定配置项和数据(option)，将配置项设置给echarts实例对象。

 /* --点位分布统计模块-- */
    (function() {
        //1.实例化对象
        var myChart = echarts.init(document.querySelector(".pie"));
        //2.指定配置项和数据
        var option = {
            tooltip: {
                /* trigger触发方式 ，item数据项图形触发 ，axis坐标轴触发 ，none 不触发 */
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            /* 注意颜色写的位置 */
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            series: [{
                name: '点位统计图',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '50%'],
                /* radius半径模式，area面积模式 */
                roseType: 'area',
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                /* 修饰文字的样式 */
                label: {
                    fontSize: 10
                },
                /* 修饰引导线样式 */
                labelLine: {
                    /* 连接到图形的线长度 */
                    length: 6,
                    /* 连接到文字的线长度 */
                    length2: 8
                }
            }]
        };
        //3.配置项和数据给我们的实例化对
        myChart.setOption(option);
        //4.当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            myChart.resize();
        })
    })();

立即执行函数用法

JS文件中，会有大量的变量命名，特别是Echarts使用中，需要大量初始化Echarts对象。

 为了防止变量名冲突（变量污染）我们采用立即执行函数策略：

（function(){ }）();

其他的图例效果，折线图，条形图，都跟这个例子一样去引用就可以实现效果。