前言
现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。我们引入 '立可得' 数据可视化项目。
效果展示:
简介:
这个项目除了使用了基础的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(){ })();
其他的图例效果,折线图,条形图,都跟这个例子一样去引用就可以实现效果。