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

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

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

一、可视化项目:

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);

下载地址:

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 共2条

请登录后发表评论