使用echart的小指南
对 echarts 的了解
官网所有实例，里面涵盖了折线图，柱形图，饼图，散点图，关系图，树图，旭日图，仪表盘等图表 传送门
折线图
——用来反映同一事物在不同时间里的发展变化的情况
（下图为 ECharts 官网示例）传送门
$.get(ROOT_PATH + '/data/asset/data/aqi-beijing.json', function (data) {
myChart.setOption(option = {
title: { // 标题组件
text: 'Beijing AQI' // 主标题文本
},
tooltip: { // 提示框组件
trigger: 'axis' // 触发类型：坐标轴触发
},
xAxis: { // 直角坐标系 grid 中的X轴
data: data.map(function (item) {
return item[0];
}) // 类目数据
},
yAxis: { // 直角坐标系 grid 中的Y轴
splitLine: {
show: false
} // 坐标轴在 grid 区域中的分隔线
},
toolbox: { // 工具栏
left: 'center', // 工具栏组件离容器左侧的距离
feature: { // 各工具配置项
dataZoom: { // 数据区域缩放
yAxisIndex: 'none'
},
restore: {}, // 配置项还原
saveAsImage: {} // 保存为图片
}
},
dataZoom: [{ // 区域缩放组件
startValue: '2014-06-01' // 数据窗口范围的起始数值
}, {
type: 'inside' // 内置型数据区域缩放组件（dataZoomInside）
}],
visualMap: { // 视觉映射组件
top: 10, // 视觉映射组件距离容器上侧的距离
right: 10, // 视觉映射组件距离容器右侧的距离
pieces: [{ // 自定义分段式视觉映射组件
gt: 0,
lte: 50,
color: '#096' // 大于0小于等于50
}, {
gt: 50,
lte: 100,
color: '#ffde33' // 大于50小于等于100
}, {
gt: 100,
lte: 150,
color: '#ff9933' // 大于100小于等于150
}, {
gt: 150,
lte: 200,
color: '#cc0033' // 大于150小于等于200
}, {
gt: 200,
lte: 300,
color: '#660099' // 大于200小于等于300
}, {
gt: 300,
color: '#7e0023' // 大于300
}],
outOfRange: { // 在选中范围外的视觉元素
color: '#999'
}
},
series: { // 系列列表
name: 'Beijing AQI', // 系列名称，用于提示框的显示
type: 'line', // 折线图
data: data.map(function (item) {
return item[1];
}),
markLine: { // 图表标线
silent: true, // 图形不响应和触发鼠标事件
data: [{ // 标线的数据数组
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
}
}
});
});
其中最常用的几个属性如下：
1、title：标题组件，也加上图标标题
不仅有 text 主标题文本，还有 subtext 副标题文本，通常主标题文本就满足大部分图标的需求，副标题文本可以根据需要增加
另外，top、right、bottom、left 分别表示组件距离容器上、右、下、左的距离，不设置时默认标题组件居左上角
2、xAxis：直角坐标系 grid 中的 X 轴
3、yAxis：直角坐标系 grid 中的 Y 轴
4、series（最重要）：里头包含图标的类型 type
type最基本的类型有折线图 line，柱形图 bar，饼图 pie，散点图 scatter 等，此处可前去官网看详情，
5、tooltip 提示框组件，如果只是想要纯展示的图，可缺省此属性。他有两种触发方式 trigger: 'item' 和 trigger: 'axis'
前者表示数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；
后者表示坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
6、toolbox 工具栏，我常用的工具为 saveAsImage 保存为图片，dataZoom 数据区域缩放
7、legend 图例组件，当有多组数据进行比较的时候，使用该组件看图表时更加清晰
有前四个属性我们就能划出一个简单的图表（直角坐标系），若为饼图那种则不需要第二个属性和第三个属性
简单的折线图举例
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 80vw;height: 70vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '折线图示例'
},
grid: { // 直角坐标系内绘图网格
left: '10%', // grid 组件离容器左侧的距离
bottom: '15%', // grid 组件离容器下侧的距离
width: "80%", // grid 组件的宽度。默认自适应
height: "70%" // grid 组件的高度。默认自适应
},
xAxis: {
data: [ '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日' ]
},
yAxis: {},
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 5,
color: '#cc0033',
},{
gt: 5,
color: '#096',
}],
outOfRange: {
color: '#999',
},
},
series: [{
name: '学习时长',
type: 'line',
data: [7, 8, 8, 4, 3, 5, 6],
markLine: {
silent: true,
data: [{ yAxis: 5 }],
},
}]
})
</script>
</body>
柱形图
——用来反映一段时间内数据的变化或者各组数据之间的比较关系
（下图为 ECharts 官网示例）传送门
option = {
title: { // 标题组件
text: '某地区蒸发量和降水量',
subtext: '纯属虚构' // 副标题文本
},
tooltip: {
trigger: 'axis'
},
legend: { // 图例组件
data: ['蒸发量', '降水量'] // 图例的数据数组
},
toolbox: { // 工具栏
show: true,
feature: { // 各工具配置项
dataView: {show: true, readOnly: false},
// 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
// show 是否显示该工具，readOnly 是否不可编辑
magicType: {show: true, type: ['line', 'bar']}, // 动态类型切换，类型可以是数组内的几种['line', 'bar', 'stack', 'tiled']
restore: {show: true},
saveAsImage: {show: true}
}
},
// 直角坐标系 grid 中的X轴
xAxis: [
{
type: 'category', // 坐标轴类型，'category'类目轴，适用于离散的类目数据
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
// 直角坐标系 grid 中的Y轴
yAxis: [
{
type: 'value' // 坐标轴类型，'value'数值轴，适用于连续数据
}
],
// 系列列表
series: [
{
name: '蒸发量',
type: 'bar', // 柱形图
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint: { // 图表标注
// 标注的数据数组
data: [
{type: 'max', name: '最大值'}, // 特殊的标注类型 max 最大值 min 最小值
{type: 'min', name: '最小值'}
]
},
markLine: { // 图表标线
// 标线的数据数组
data: [
{type: 'average', name: '平均值'} // 特殊的标注类型 average 平均值
]
}
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
除了几个常用的属性之外，我们还会用到一些功能类的属性，比如：
1、dataZoom 区域缩放组件，一般用来观察细节数据，通过鼠标滚轮，鼠标拖拽，滑动条拖动等实现当前数据区域的变动
2、visualMap 视觉映射组件，可以实现像上文折线图中的颜色分段
3、grid 直角坐标系内绘图网格，可以设置直角坐标系的宽高以及距离容器上右下左侧的距离
4、之前说到的 series 属性中的 markLine 图表标线，可以用来展示图表的最大值，最小值，平均值，中位数，或者是你需要观察的具体数值
5、还是 series 属性中的 markPoint 图表标注，可以用来展示图表的最大值，最小值，平均值
6、在之前提到的 legend 属性中的有一个属性还需要注意，selectedMode 表示图例的选择模式，默认为开启状态，可通过设置 false 来关闭图例。也可以设置 ‘single’ 或 ‘multiple’ 来使用单选或者多选模式。在有多组数据的情况下，默认开启的多选模式。单选的意思是在多组数据的情况下仍显示一组数据，点击图例切换
简单的柱形图举例
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 80vw;height: 70vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '柱形图示例'
},
grid: {
left: '10%',
bottom: '15%',
width: "80%",
height: "70%"
},
xAxis: {
data: [ '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日' ]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 4]
}]
})
</script>
</body>
饼图
——一般用于反映总体中各组成部分所占比重
（下图为 ECharts 官网示例）传送门
option = {
tooltip: { // 提示框组件
trigger: 'item', // 触发类型：数据项图形触发
formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框浮层内容格式器
},
legend: { // 图例组件
orient: 'vertical', // 图例列表的布局朝向：
left: 10, // 图例组件离容器左侧的距离
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie', // 饼图
selectedMode: 'single', // 选中模式：单选
radius: [0, '30%'], // 饼图的半径，内半径0，外半径30%
label: { // 饼图图形上的文本标签
position: 'inner' // 标签位置：饼图扇区内部
},
labelLine: {
show: false
}, // 标签的视觉引导线样式
data: [
{value: 335, name: '直达', selected: true}, // selected: true 该数据项被选中
{value: 679, name: '营销广告'},
{value: 1548, name: '搜索引擎'}
]
},
{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'],
label: { // 饼图图形上的文本标签
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee', // 文字块背景颜色
borderColor: '#aaa', // 文字块边框颜色
borderWidth: 1, // 文字块边框宽度
borderRadius: 4, // 文字块圆角
rich: { // 自定义富文本样式
a: {
color: '#999', // 文字颜色
lineHeight: 22, // 文字行高
align: 'center' // 文字水平对齐方式
},
hr: {
borderColor: '#aaa',
width: '100%', // 文字块宽度
borderWidth: 0.5,
height: 0 // 文字块高度
},
b: {
fontSize: 16, // 文字字号
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4], // 文字块内边距
borderRadius: 2
}
}
},
data: [
{value: 335, name: '直达'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1048, name: '百度'},
{value: 251, name: '谷歌'},
{value: 147, name: '必应'},
{value: 102, name: '其他'}
]
}
]
};
对于饼图来说，data 数组对象中还需要 name 属性来指定每一个数据项名称
还可以通过设置 radius 属性去画一个圆环
也可以设置 label 属性去改动饼图图形上的文本标签的样式
简单的饼图举例
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 80vw;height: 70vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '饼图示例'
},
tooltip: {
trigger: 'item',
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
// roseType: 'angle', // 将饼图转化成南丁格尔图
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' },
],
}]
})
</script>
</body>
散点（气泡）图
——一般用于比较几个数据系列中的数值，多用于科学数据分析
（下图为 ECharts 官网示例）传送门
option = {
title: {
text: '男性女性身高体重分布',
subtext: '抽样调查来自: Heinz 2003'
},
grid: { // 直角坐标系内绘图网格
left: '3%',
right: '7%',
bottom: '3%',
containLabel: true // grid 区域是否包含坐标轴的刻度标签
},
tooltip: { // 提示框组件
// trigger: 'axis',
showDelay: 0, // 浮层显示的延迟
formatter: function (params) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>'
+ params.value[0] + 'cm '
+ params.value[1] + 'kg ';
}
else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + 'kg ';
}
},
axisPointer: { // 坐标轴指示器配置项
show: true,
type: 'cross', // 指示器类型：十字准星指示器
lineStyle: {
type: 'dashed',
width: 1
}
}
},
toolbox: { // 工具栏
feature: {
dataZoom: {},
brush: { // 区域选择组件
type: ['rect', 'polygon', 'clear'] // 按钮 'rect'：开启矩形选框选择功能；'polygon'：开启任意形状选框选择功能；'clear'：清空所有选框。
}
}
},
legend: {
data: ['女性', '男性'],
left: 'center'
},
// 直角坐标系 grid 中的X轴
xAxis: [
{
type: 'value',
scale: true, // 是否是脱离 0 值比例。只在数值轴中（type: 'value'）有效，设置成 true 后坐标刻度不会强制包含零刻度
axisLabel: { // 坐标轴刻度标签的相关设置
formatter: '{value} cm' // 刻度标签的内容格式器
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} kg'
},
splitLine: {
show: false
}
}
],
// 系列列表
series: [
{
name: '女性',
type: 'scatter', // 散点（气泡）图
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
],
markArea: { // 图表标域，常用于标记图表中某个范围的数据
silent: true, // 图形不响应和触发鼠标事件
itemStyle: { // 该标域的样式
color: 'transparent',
borderWidth: 1,
borderType: 'dashed' // 柱条的描边类型：虚线
},
data: [[{
name: '女性分布区间',
xAxis: 'min',
yAxis: 'min'
}, {
xAxis: 'max',
yAxis: 'max'
}]]
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
lineStyle: {
type: 'solid'
},
data: [
{type: 'average', name: '平均值'},
{ xAxis: 160 }
]
}
},
{
name: '男性',
type: 'scatter',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
],
markArea: {
silent: true,
itemStyle: {
color: 'transparent',
borderWidth: 1,
borderType: 'dashed'
},
data: [[{
name: '男性分布区间',
xAxis: 'min',
yAxis: 'min'
}, {
xAxis: 'max',
yAxis: 'max'
}]]
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
lineStyle: {
type: 'solid'
},
data: [
{type: 'average', name: '平均值'},
{ xAxis: 170 }
]
}
}
]
};
简单的散点（气泡）图举例
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 80vw;height: 70vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '散点图示例'
},
grid: {
left: '10%',
bottom: '15%',
width: "80%",
height: "70%"
},
xAxis: {},
yAxis: {},
series: [{
name: '销量',
type: 'scatter',
itemStyle: {
opacity: 0.8
},
symbolSize: function (val) {
return val[2] * 40;
}, // 标记的大小
data: [
["14.616", "7.241", "0.896"],
["3.958", "5.701", "0.955"],
["2.768", "8.971", "0.669"],
["9.051", "9.710", "0.171"],
["14.046", "4.182", "0.536"],
["12.295", "1.429", "0.962"],
["4.417", "8.167", "0.113"],
["0.492", "4.771", "0.785"],
["7.632", "2.605", "0.645"],
["14.242", "5.042", "0.368"]
]
}]
})
</script>
</body>
仪表盘
——一般用来反映某个指标值所在的范围
（下图为 ECharts 官网示例）传送门
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
// 系列列表
series: [
{
name: '业务指标',
type: 'gauge', // 仪表盘
detail: {formatter: '{value}%'}, // 仪表盘详情，用于显示数据
data: [{value: 50, name: '完成率'}]
}
]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
雷达图
——一般用于反映多变量的数据。
（下图为 Echarts 官网示例）传送门
option = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: { // 雷达图坐标系组件
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator: [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
},
// 系列列表
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar', // 雷达图
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配（Allocated Budget）'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销（Actual Spending）'
}
]
}]
};
雷达图特有属性：
radar 雷达图坐标系组件，制作雷达图时不可缺省
里面的 indicator 属性用来指定雷达图中的多个变量，若变量数小于3，那么就没用使用雷达图的必要了
简单的雷达图举例
用大家都比较熟的王者荣耀中的能力图再举个简单的例子
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 80vw;height: 70vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '雷达图示例'
},
legend: {
data: ['自己', '好友'],
},
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5],
},
},
indicator: [
{ name: '综合', max: 10 },
{ name: '输出', max: 10 },
{ name: '发展', max: 10 },
{ name: '团战', max: 10 },
{ name: '生存', max: 10 },
{ name: 'KDA', max: 10 },
],
},
series: [{
name: '能力',
type: 'radar',
data: [
{ value: [8, 7, 8, 9, 10, 7], name: '自己' },
{ value: [9, 8, 9, 9, 10, 9], name: '好友' },
],
areaStyle: {
opacity: 0.3,
},
}]
})
</script>
</body>
用 echats 写小例子
数据胡诌，仅供练习
第一个：飞机航线
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 90vw;height: 80vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
// 引入china.js文件，已下载至本地根据路径引入
<script src="./china.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
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 BJData = [
[{ name: '北京' }, { name: '上海', value: 95 }],
[{ name: '北京' }, { name: '广州', value: 90 }],
[{ name: '北京' }, { name: '大连', value: 80 }],
[{ name: '北京' }, { name: '南宁', value: 70 }],
[{ name: '北京' }, { name: '南昌', value: 60 }],
[{ name: '北京' }, { name: '拉萨', value: 50 }],
[{ name: '北京' }, { name: '长春', value: 40 }],
[{ name: '北京' }, { name: '包头', value: 30 }],
[{ name: '北京' }, { name: '重庆', value: 20 }],
[{ name: '北京' }, { name: '常州', value: 10 }],
];
// 飞机图标
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 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],
});
}
}
return res;
};
// 绘制图表
myChart.setOption({
// 容器背景颜色
backgroundColor: '#404a59',
title: {
text: '飞机航线模拟',
subtext: '数据参考https://echarts.apache.org/examples/zh/editor.html?c=geo-lines',
textStyle: {
color: '#fff',
},
},
geo: { // 地理坐标系组件
map: 'china',
label: {
show: false,
},
roam: true, // 是否开启鼠标缩放和平移漫游
itemStyle: { // 地图区域的多边形图形样式
areaColor: '#323c48', // 地图区域的颜色
borderColor: '#404a59', // 图形描边颜色
},
emphasis: { // 高亮状态下的多边形和标签样式
label: {
show: true,
color: '#fff',
},
itemStyle: {
areaColor: '#2a333d',
},
},
},
// 系列列表
series: [
{
type: 'lines', // 路径图
zlevel: 1, // 相当于分层，zlevel 大的 Canvas 会在上面 zlevel 小的 Canvas 上面
effect: { // 线特效的配置
show: true,
period: 6, // 特效动画的时间
trailLength: 0.7, // 特效尾迹的长度
color: '#fff',
symbolSize: 3, // 特效标记的大小
},
lineStyle: {
color: '#F5A623',
width: 0,
opacity: 0.6,
curveness: 0.2,
},
data: convertData(BJData),
},
{
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15,
},
lineStyle: {
color: '#F5A623',
width: 1,
opacity: 0.6,
curveness: 0.2,
},
data: convertData(BJData),
},
{
type: 'effectScatter', // 带涟漪特效动画的气泡图
coordinateSystem: 'geo', // 该系统使用的坐标系
zlevel: 2,
rippleEffect: { // 涟漪特效相关配置
brushType: 'stroke', // 波纹的绘制方式
},
label: {
show: true,
position: 'right',
formatter: '{b}',
},
symbolSize: function (val) {
return val[2] / 10;
},
itemStyle: {
color: '#F5A623',
},
data: BJData.map((dataItem) => {
return {
name: dataItem[1].name,
value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
};
}),
},
],
})
</script>
</body>
第二个：水球图
飞机图标 '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'
火图标 'path://M775.093 258.353c-116.478 35.083-137.803 134.53-130.29 197.693-83.093-103.15-79.681-221.81-79.681-392.763-266.493 106.12-204.517 412.087-212.487 505-67.03-57.94-79.696-196.38-79.696-196.38-70.76 38.453-106.242 141.147-106.242 224.447 0 201.437 154.599 364.724 345.303 364.724S857.303 797.787 857.303 596.35c0-119.71-83.218-174.931-82.21-337.997z'
更多的 svg 图标可前往阿里巴巴矢量图标库或者其他网站获取。
我拿阿里巴巴矢量图标库举个例子，选择一个喜欢的图标点击下载，选择复制 svg ，然后找个地方粘贴你所复制的内容，在复制的过来的内容中 path 标签内 d 等于的部分就是我们要的东西
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 90vw;height: 80vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
// 引入echarts-liquidfill.js文件，已下载至本地根据路径引入
<script src="./echarts-liquidfill.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 鲸鱼图标
var path = 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z';
// 绘制图表
myChart.setOption({
series: [
{
type: 'liquidFill', // 水球图
data: [0.6, 0.55, 0.4, 0.25],
radius: '50%',
outline: { show: false }, // 外轮廓
// 水填充图的形状 circle圆形（默认） rect矩形 roundRect圆角矩形 triangle三角形 diamond菱形 pin水滴状 arrow箭头状 container充满 还可以是svg的path
shape: path,
label: {
position: ['38%', '50%'], // 文本相对于图表的位置
textStyle: {
fontSize: 40,
color: '#D94854',
},
},
},
],
})
</script>
</body>
<body style="width: 100vw;height: 100vh;margin: 0;display: flex;align-items: center;justify-content: center;">
// 承载图表的容器
<div id="main" style="width: 90vw;height: 80vh;"></div>
// 引入完全版echarts.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
// 引入echarts-liquidfill.js文件，已下载至本地根据路径引入
<script src="./echarts-liquidfill.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 鲸鱼图标
var path = 'path://M775.093 258.353c-116.478 35.083-137.803 134.53-130.29 197.693-83.093-103.15-79.681-221.81-79.681-392.763-266.493 106.12-204.517 412.087-212.487 505-67.03-57.94-79.696-196.38-79.696-196.38-70.76 38.453-106.242 141.147-106.242 224.447 0 201.437 154.599 364.724 345.303 364.724S857.303 797.787 857.303 596.35c0-119.71-83.218-174.931-82.21-337.997z';
// 绘制图表
myChart.setOption({
series: [
{
type: 'liquidFill',
data: [0.6, 0.55, 0.4, 0.25],
radius: '50%',
outline: { show: false },
backgroundStyle: { color: '#e51a19' }, // 图表背景颜色
itemStyle: { color: '#eb6a17' }, // 波浪颜色
shape: path,
label: {
position: ['52%', '63%'],
textStyle: {
fontSize: 40,
color: '#f4d526',
},
},
},
],
})
</script>
</body>
扫一扫
2841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
