Echarts数据可视化总结
本周内容1、数据可视化的基本知识储备2、Echarts的基本使用3、代码实现一、数据可视化的基本知识储备1.1、数据可视化的概念和作用（1）将数据以图标的形式呈现（2）更有效地传达数据中的信息常见的可视化工具报表类BI类编程类1.2、Echarts的介绍Echarts是一个使用Javascript实现的开源可视化库，兼容性强底层依赖矢量图形库ZRender，提供直观，交互丰富，可提高个性化定制的数
目录
一、数据可视化的基本知识储备
1.1、数据可视化的概念和作用
（1）将数据以图标的形式呈现
（2）更有效地传达数据中的信息
常见的可视化工具
报表类
BI类
编程类
1.2、Echarts的介绍
Echarts是一个使用Javascript实现的开源可视化库，兼容性强底层依赖矢量图形库ZRender，提供直观，交互丰富，可提高个性化定制的数据可视化图表。
官网地址：http://echarts.apache.org/zh/index.html
开源免费，功能丰富，社区活跃、
1.3、Echarts的可视化类型
（1）有丰富的可视化类型：折线图、柱状图、饼图、K线图......
（2）多种数据格式支持：key-value数据格式、二维表、TypeArray格式
（3）流数据的支持：流数据的动态渲染、增量渲染技术
（4）移动端优化
（5）跨平台使用
（6）绚丽的特效
（7）三维可视化
Echarts能满足绝大多数可视化图表实现：兼容性强、使用方便、功能强大。
二、Echarts的基本使用
2.1、五分钟快速上手
步骤1：引入echarts.js文件
步骤2：准备一个呈现图标的盒子
步骤3：初始化echarts实例化对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
2.2、通用配置
通用配置就是指任何图标都能够使用的配置
2.2.1
通用配置：title
(1)文字样式：textStyle
(2)标题边框：borderWidth、borderColor、borderRadius
(3)标题位置：left、top、right、bottom
通用配置：tooltip
提示框组件，用于配置鼠标滑过或点击图表时的提示框
(1)触发类型：trigger
item、axis
(2)触发时机：triggerOn
mouseover、click
（3）格式化：formatter
字符串模板、回调函数（参数返回值是一个数组）
通用配置：toolbox
Echarts提供的工具栏
(1)内置有导出图片、数据视图，动态类型替换，数据区域缩放，重置五个工具
（2）显示工具栏：feature
saveAsImage（导出图片）、dataView（数据视图，可修改）、restore（还原）、dataZoom（区域缩放）、magicType（切换图表类型）
通用配置：legend
图例,用于筛选系列，需要和serses数组中的某组数据的name值一致。
（1）legend中的data是一个数组
（2）legend中的data的值需要和series数组中某组数据name值一致。
2.3.1
柱状图：
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）x轴数据：
数组1：['张三','李四','王五'......]
(3)y轴数据：
数组2：[88,92,63.......]
(4)图表类型：
在series下设置type:bar
常见效果：
（1）标记：最大值 最小值 平均值
markPoint
markLine
(2)显示：数值显示 柱宽度 横向柱状图
label
barWidth
更改x轴和y轴的角色
*柱状图的特点
柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况。
2.3.2
折线图
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）x轴数据：
数组1：['1月','2月','3月'......]
(3)y轴数据
数据2：[3000,2800,900.....]
(4)图表类型：
在series下设置type:line
常见效果
（1）标注：标记：最大值 最小值 平均值 标注区间
markPoint markLine markArea
(2)线条控制：平滑 风格：smooth,lineStyle
(3)填充风格：areaStyle
（4）紧挨边缘：boundarygap
（5）缩放：脱离0值比例
scale
(6)堆叠图：stack
*折线图常用来分析数据随时间的变化趋势
2.3.3
散点图
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）x轴数据和y轴数据：二维数组
数组1：[[身高1，体重1]，[身高2,体重2]，[身高3,体重3].......]
（3）图表类型：
在series下设置type:scatter
xAxis和yAxis的type都要设置为value
（4）调整：将坐标轴都设置为脱离0值比例，scale
常见效果：
（1）气泡图效果
散点的大小不同：symbolSize
散点的颜色不同：itemStyle.color
（2）涟漪动画效果
type:'effectScatter'
showEffectOn:'emphasis'//鼠标移入涟漪
rippleEffect:{scale:10}//涟漪范围
*散点图可以帮助我们推断出不同维度数据之间的相关性，散点图也经常用在地图的标注上0
直角坐标系中常用配置总结：
（1）配置1：网格 grid
grid是用来控制直角坐标系的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
·显示grid:show
·grid的边框
borderWidth borderCorlor
·grid的位置和大小
left top right bottom width height
（2）配置2:坐标轴 axis
坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴
·坐标轴类型type
value:数值轴，会自动从目标数据中读取数据
category:类目轴，该类型必须通过data设置类目数据
·显示位置position
xAxis:可取值为top,bottom
yAxis:可取值为left,right
（3）配置3：区域缩放 dataZoom
dataZoom用于区域缩放，对数据范围过滤x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
·类型type
slider:滑块
inside:内置，依靠鼠标滚轮或双指缩放
·指明产生作用的轴
xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0即可
yAxisIndex:设置缩放组件控制的是哪个y轴，一般写0即可
·指明初始状态的缩放情况
start:数据窗口范围的起始百分比
end:数据窗口范围的结束百分比
2.3.4
饼图
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）数据准备：{{name:"淘宝"，value:11111},
{name:"京东"，value:122673},{name:"唯品会"，value:6123}......
}
(3)图表类型
在series下设置type:pie
常见效果
·显示数值
label.formatter
·圆环
设置两个半径 radius:['60%','70%']
·南丁格尔图
roseType:'radius'
·选中效果
选中模式：selectedMode:single\multiple
选中偏移量：slectedOffset:30
*饼图可以很好的帮助用户快速了解不同分类的数据的占比情况
2.3.5
地图
矢量地图的实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
(2)准备矢量地图的js文件并引入
常用配置：
（1）缩放拖动：roam
(2)名称显示：label
(3)初始缩放比例
（4）地图中心点：center
常见效果：
·显示某个区域：
1、加载该地区的矢量地图数据
2、通过registerMap注册到echarts全局对象中
3、指明geo配置下的type和map属性
4、通过zoom放大该区域
5、通过center定位中心点
·不同城市不同颜色
1、显示基本的中国地图
2、城市的数据设置给series
3、将series下的数据和geo关联起来
4、结合visualMap配合使用
min max inRang calculable
·地图和散点图结合
1、给series下新增的对象
2、准备好散点数据，设置给新对象的data
3、配置给新对象的type
type:effectScatter
4、让散点图使用地图坐标系统
coordinateSystem:'geo'
5、让涟漪的效果更加明显
rippleEffect:{
scale:10
}
*地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
2.3.6
雷达图
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）定义各个维度的最大值
indicator:[{name:'易用性',max:100}.......]
(3)准备具体数据产品的数据
data:[{name:'华为手机',value:[80,90,80,82,90]},.......]
(4)图表类型：
在series下设置type:radar
常用配置
（1）显示数值：label
(2)区域面积：areaStyle
(3)绘制类型：shape、
*雷达图可以用来分析多个维度的数据与标准数据的对比情况
2.3.7
仪表盘
仪表盘主要用在进度把控以及数据范围的监测
实现步骤：
（1）Echarts最基本的代码结构：
引入JS文件，DOM容器，初始化对象，设置option
（2）准备数据,设置给series下的data
data:[{value:97}]
(3)图表类型
type:gauge
常用效果
（1）数值范围：max,min
(2)多个指针：增加data中的数组元素
（3）多个指针颜色差异：itemStyle
仪表盘可以更直观的表现出某个指标的进度或实际情况
总结：
三、代码实现
头部文件引入：
<script src="echarts.min.js"></script>
<script src="flexible.js"></script>
<script src="china.js"></script>六个图代码实现
<script>
//柱状图：
/* var mychart=echarts.init(document.querySelector('.chart'))
var option;
option={
color:'blue',
title:{
text:'三班语文成绩对比',
top:'0px',
left:'50%',
},
legend:{
top:'20px',
right:'0px'
},
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis:{
type:'category',
data:["小红","小明","小兰","小青","小白"],
},
yAxis:{
type:'value'
},
series:[{
name:"语文成绩",
type:'bar',
data:[89,96,79,81,70],
barWidth:'50%',
}]
}
mychart.setOption(option) && option; */
//折线图：
/* var mchart=echarts.init(document.querySelector(".chart"));
var option;
option={
title:{
text:'小红的语文成绩动态统计'
},
tooltip:{},
xAxis:{
type:'category',
data:["三年级上学期","三年级下学期","四年级上学期","四年级下学期","五年级上学期"],
boundaryGap:false,
},
yAxis:{
type:'value',
scale:true
},
series:[{
name:"小红的本学期成绩",
data:[89,96,79,81,70],
type:'line',
smooth:true,
areaStyle:{
}
}]
}
mchart.setOption(option) && option; */
//散点图：
/* var mchart=echarts.init(document.querySelector(".chart"));
var mData=[
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]];
var option;
option={
tooltip:{
},
xAxis: {},
yAxis: {},
series:[{
name:'近两年来学生绩点展示',
data:mData,
type:'scatter'
}]
}
mchart.setOption(option) && option; */
//饼图：
/* var mchart=echarts.init(document.querySelector(".chart"));
var data=[{name:'政治',value:3},
{name:'语文',value:2},
{name:'数学',value:1},
{name:'英语',value:3},
{name:'物理',value:1}];
var option;
option={
color:['#55557f','#55aaff','#55ffff','#aaaa00','#ff007f'],
legend:{
},
lable:{
show:true,
},
tooltip: {
trigger: 'item'
},
series:[{
name:'小浩的期末成绩分析',
type:'pie',
roseType:'radius',
radius:120,
data:data
}]
}
mchart.setOption(option) && option; */
//雷达图：
/* var mchart=echarts.init(document.querySelector(".chart"));
var option;
option={
title:{
text:"充电宝的功效测评"
},
legend:{},
radar:{
indicator:[{name:'易用性',max:100},
{name:'便利性',max:100},
{name:'快捷性',max:100},
{name:'实用性',max:100},
{name:'科技性',max:100},
],
shape:'circle'
},
series:[{
name:"充电宝的功效测评",
type:'radar',
data:[{value:[98,85,80,79,90]}]
}]
}
mchart.setOption(option) && option; */
//仪表盘：
/* var mchart=echarts.init(document.querySelector(".chart"));
var option;
option={
series:[{
type:'gauge',
data:[{value:97,
}]
}]
}
mchart.setOption(option) && option; */
</script>中国地图代码实现：
（1）头部文件实现
<script src="flexible.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<script src="Jquery.js"></script>（2)模拟飞机航班实现：
<script >
//中国地图
// 1. 实例化对象
var myChart =echarts.init(document.querySelector('div'));
// 2. 指定配置和数据
// 2. 指定配置和数据
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var XAData = [
[{ name: "西安" }, { name: "北京", value: 100 }],
[{ name: "西安" }, { name: "上海", value: 100 }],
[{ name: "西安" }, { name: "广州", value: 100 }],
[{ name: "西安" }, { name: "西宁", value: 100 }],
[{ name: "西安" }, { name: "拉萨", value: 100 }]
];
var XNData = [
[{ name: "西宁" }, { name: "北京", value: 100 }],
[{ name: "西宁" }, { name: "上海", value: 100 }],
[{ name: "西宁" }, { name: "广州", value: 100 }],
[{ name: "西宁" }, { name: "西安", value: 100 }],
[{ name: "西宁" }, { name: "银川", value: 100 }]
];
var YCData = [
[{ name: "拉萨" }, { name: "北京", value: 100 }],
[{ name: "拉萨" }, { name: "潍坊", value: 100 }],
[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#fff", "#fff", "#fff"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function(item, i) {
series.push(
{
name: item[0] + " Top3",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function(params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
roam: false,
// 放大我们的地图
zoom: 1,
itemStyle: {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: series
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
myChart.setOption(option)&&option;
</script>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)