基于echarts编写实现的地图-大数据数据可视化面板-附地址下载

这是一款使用echarts编写的比较火炫酷的动态大数据可视化面板，功能算是比较齐全的，感兴趣的可以改改数据，用于自己使用，也是很nice的。详情可以查看演示。

一、可视化项目：

1、基础掌握：

– 实践css布局相关技术

– 实践jquery相关技术

– 掌握echarts的基本使用

2、项目介绍

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

二、具备知识：

1、完成该项目需要具备以下知识：

– div + css 布局

– flex 布局

– css3动画

– css3渐变

– css3边框图片

– 原生js + jquery 使用

– rem适配

– echarts基础

2、Echarts-介绍

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

理解：实际上就是一个JS插件，可以运行在PC和移动设备，兼容主流浏览器，提供非常多的图表（折线图，柱状图，散点图，饼图，K线图）

4、Echarts-体验

1、下载源码：（文章末尾，包含打包后版本）

2、进入echarts dist/echarts.min.js【引入】

3、准备一个具备大小（宽高）的 DOM

<div id="main" ></div>

4、初始化echart实例

通过：echarts.init实例化一个容器（内部返回）

var myChart = echarts.init(document.getElementById('main'));

5、指定图表的配置项和数据 (根据文档提供示例找到option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

6、使用刚指定的配置项和数据显示图表

myChart.setOption(option);

5、Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color 

大致划分两大类，有轴的和无轴的

– series

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

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

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

– yAxis：直角坐标系 grid 中的 y 轴【Y依赖数据显示】

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

– title：标题组件

– tooltip：提示框组件【鼠标放上显示】

– legend：图例组件【需要数据有name属性】

– color：调色盘颜色列表【数组传递】

演示代码：

var option = {
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '用户注册',
        data: [820, 932, 901, 934, 9222, 1330, 1320],
        type: 'line'
    }, {
        name: '用户数据',
        data: [820, 932, 600, 934, 1290, 1330, 1320],
        type: "bar",
    }],
    grid: {
        show: true,
        // top : 100
    },
    tooltip: {
        trigger: "axis"
    },
    title: {
        text: '年度统计'
    },
    color: ['red', 'yellow'],
    legend: {
        data: ['用户注册', '用户数据']
    }
};

6、REM适配

– 设计稿是1920px ，约定rem基准值为 24px （基准值html的font-size）。【不同设配等比显示，例如320和375等设备】

– [1024-1920]

– 那么：设备宽度与rem基准值比例为 80 。

– 结论：适配设备的时候保持80的比例即可。

– 将来：换算rem单位的时候，使用24px基准值即可。

实现代码，在页面底部加载index.js文件实现动态设置基准值逻辑：

【不用媒体查询，需要查询区间，如果用JS可以实时监控大小】

页面初始化，就需要一个基准值，

(function () {
       // 1、页面一加载就要知道页面宽度计算
      var setFont = function () {
           // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
           var html = document.documentElement;// 获取html
           // 获取宽度
           var width = html.clientWidth;
    
           // 判断
           if (width < 1024) width = 1024
           if (width > 1920) width = 1920
           // 设置html的基准值
           var fontSize = width / 80 + 'px';
           // 设置给html
           html.style.fontSize = fontSize;
      }
      setFont();
       // 2、页面改变的时候也需要设置
       // 尺寸改变事件
       window.onresize = function () {
           setFont();
       }
   })();

注意：书写CSS代码，让px转换rem单位，使用一个cscode插件 cssrem

– vscode插件搜索cssrem，进行安装既可

– 需要在设置中cssrem换算的时候使用80的比例

       // rem换算

       “cssrem.rootFontSize”: 24,//【计算时的基准值】

       “cssrem.fixedDigits”:// 3,【取三位小数】

       “cssrem.autoRemovePrefixZero”: false,//【是否去除0】

       1920设计稿，比例80，基准值24，计算式可能有小数，很多位，保留3为有效小数，不去除0，例如（0.333）；

下载地址：