Echarts 可视化基础知识
1.ECharts 简介
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表。
2.ECharts 使用
（1） 下载并引入EChart.js文件
<script src="js/echarts.min.js"></script>
（2）准备一个具备大小的DOM容器来装生成的图表
<!-- 注意：这个盒子必须具备大小，生成的图表会放入这个容器内 -->
<div id="main" style="width: 600px;height:400px;"></div>
（3）初始化echarts实例对象
var myChart = echarts.init(document.querySelector('.box'));
（4）根据具体需求修改配置选项（option）
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
（5）将配置项设置给echarts实例对象
myChart.setOption(option);
3.Echarts 基础配置
(1) title：标题组件
(2) tooltip：提示框组件
(3) legend：图例组件
(4) color：调色盘颜色列表
(5) grid：直角坐标系内绘图网格
-
containLabel:
①如果left right等设置为 0% ，刻度标签就溢出了，此时决定是否显示刻度标签
②当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
(6) series：系列列表
-
type: 每个系列通过
type决定自己的图表类型，比如 line 是折线 bar 柱形等，可以多个图表重叠 -
name: 系列名称，用于tooltip的显示，legend 的图例筛选 变化
-
stack: 数据堆叠
①如果设置相同值，则会数据堆叠。
数据堆叠： 第二个数据值= 第一个数据值 + 第二个数据值
第三个数据值 = 第二个数据值 + 第三个数据值…. 依次叠加
②如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
(7) xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
(8) yAxis：直角坐标系 grid 中的 y 轴
4.线形图
var option = {
color: ['pink', 'blue', 'green', 'skyblue', 'red'],
title: {
text: '我的折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['直播营销', '联盟广告', '视频广告', '直接访问']
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直播营销',
type: 'line', // 图表类型是线性
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
4.饼状图
option = {
// 提示框组件
tooltip: {
// trigger 触发方式。非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表series系列图表名称
// b 代表series数据名称 data 里面的name
// c 代表series数据值 data 里面的value
// d代表 当前数据/总数据的比例
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 控制图表
series: [
{
// 图表名称
name: '点位统计',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// radius 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: [
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
5.柱状图
var option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'axis',
// 轴触发提示才有效
axisPointer: {
// 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '3%',
right: '4%',
bottom: '3%',
// 是否包含文本
containLabel: true
},
// 控制x轴
xAxis: [
{
// 使用类目，必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 刻度设置
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: true
}
}
],
// 控制y轴
yAxis: [
{
// 使用数据的值设为刻度文字
type: 'value'
}
],
// 控制x轴
series: [
{
// 图表数据名称
name: '用户统计',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
6.雷达图
var option = {
tooltip: {
show: true,
// 控制提示框组件的显示位置
position: ["60%", "10%"]
},
radar: {
indicator: [
{ name: "机场", max: 100 },
{ name: "商场", max: 100 },
{ name: "火车站", max: 100 },
{ name: "汽车站", max: 100 },
{ name: "地铁", max: 100 }
],
// 修改雷达图的大小
radius: "65%",
shape: "circle",
// 分割的圆圈个数
splitNumber: 4,
name: {
// 修饰雷达图文字的颜色
textStyle: {
color: "#4c9bfd"
}
},
// 分割的圆圈线条的样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255, 0.5)"
}
},
splitArea: {
show: false
},
// 坐标轴的线修改为白色半透明
axisLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
// 填充区域的线条颜色
lineStyle: {
normal: {
color: "#fff",
width: 1,
opacity: 0.5
}
},
data: [[90, 19, 56, 11, 34]],
// 设置图形标记 （拐点）
symbol: "circle",
// 这个是设置小圆点大小
symbolSize: 5,
// 设置小圆点颜色
itemStyle: {
color: "#fff"
},
// 让小圆点显示数据
label: {
show: true,
fontSize: 10
},
// 修饰我们区域填充的背景颜色
areaStyle: {
color: "rgba(238, 197, 102, 0.6)"
}
}
]
};
7.饼状图
var option = {
series: [
{
name: "销售进度",
type: "pie",
radius: ["50%", "70%"],
//是否启用防止标签重叠策略
// avoidLabelOverlap: false,
labelLine: {
normal: {
show: false
}
},
data: [{ value: 100 }, { value: 100 }, { value: 200 }]
}
]
};
5.Echarts 社区介绍
在Echarts 社区可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。
(1) 模拟飞机航线例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM
(2) 实现步骤：
- 首先需要下载china.js提供中国地图的js文件
- 由于代码比较多，因此新建一个新的js文件 myMap.js 引入
- 使用社区提供的配置即可。
6058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
