Echarts 常用各类图表模板配置
注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;
以下代码都可以复制到 Echarts 官网,直接预览;
图标模板目录
- [Echarts 常用各类图表模板配置](#Echarts 常用各类图表模板配置)
- 一、数据分区显示
- 二、折线图数据分区
- 三、环形图
- [四、k 线图](#四、k 线图)
- 五、折线图
- 六、阶梯折线图
- 七、折线图,数据量大,自动滚动,加载数据
- 八、横向柱状图
- [九、折线图 + 柱状图](#九、折线图 + 柱状图)
- [十、3D 柱状图](#十、3D 柱状图)
- 十一、工程项目可视化
- 十二、雷达图
- 十三、象形柱图
- 十四、环形占比图
- 十五、圆环动画
- [十六、力向导图(二分图布局)](#十六、力向导图(二分图布局))
- 十七、地图
- [十八、地图 json 免费下载](#十八、地图 json 免费下载)
一、数据分区显示
bash
var areaStyle = {
silent: false,
itemStyle: {
normal: {
color: 'rgba(255, 0, 0, 0.01)'
}
},
data: [
[
{
name: '预警区域',
xAxis: '山西',
label: {
normal: {
offset: [500, 500],
fontSize: 14
}
}
},
{
xAxis: '黑龙江'
}
]
]
};
var option = {
backgroundColor: '#fff',
color: ['#16c2af', '#ffc751', '#4162ff', '#ff6e72', '#9692ff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '20%',
bottom: '20%',
left: '10%',
right: '10%',
containL0abel: true
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}
],
xAxis: [
{
type: 'category',
data: [
'甘肃',
'青海',
'内蒙古',
'重庆',
'山西',
'辽宁',
'吉林',
'黑龙江'
],
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
}
}
],
series: [
{
name: '一月',
type: 'bar',
stack: '总量',
barWidth: '30px',
data: [0, 212, 101, 0, 0, 0, 120, 0],
markArea: areaStyle
},
{
name: '二月',
type: 'bar',
stack: '总量',
data: [0, 232, 251, 0, 0, 0, 10, 0],
markArea: areaStyle
},
{
name: '三月',
type: 'bar',
stack: '总量',
data: [0, 232, 231, 134, 190, 0, 110, 0],
markArea: areaStyle
},
{
name: '四月',
type: 'bar',
stack: '总量',
data: [0, 132, 101, 0, 0, 150, 210, 0],
markArea: areaStyle
},
{
name: '五月',
type: 'bar',
stack: '总量',
data: [120, 252, 201, 134, 60, 0, 150, 0],
markArea: areaStyle
},
{
name: '六月',
type: 'bar',
stack: '总量',
data: [120, 0, 0, 184, 70, 0, 0, 90],
markArea: areaStyle
},
{
name: '七月',
type: 'bar',
stack: '总量',
data: [120, 0, 0, 174, 10, 230, 0, 0],
markArea: areaStyle
},
{
name: '八月',
type: 'bar',
stack: '总量',
data: [220, 0, 0, 134, 70, 0, 0, 0],
markArea: areaStyle
},
{
name: '九月',
type: 'bar',
stack: '总量',
data: [0, 0, 0, 0, 0, 0, 0, 90],
markArea: areaStyle
}
]
};
二、折线图数据分区
文章链接:https://blog.csdn.net/aibujin/article/details/141104797?spm=1001.2014.3001.5501
三、环形图
echarts 环形图:多层嵌套,自定义 legend 位置、颜色,中间插入数据及文字,颜色渐变;
文字链接: https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501
四、k 线图
文章链接: https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501
五、折线图
echarts 折线图,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接:https://blog.csdn.net/aibujin/article/details/140823248?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501
六、阶梯折线图
文章链接: https://blog.csdn.net/aibujin/article/details/140876408?spm=1001.2014.3001.5501
七、折线图,数据量大,自动滚动,加载数据
文章链接:https://blog.csdn.net/aibujin/article/details/140922448?spm=1001.2014.3001.5501
八、横向柱状图
echarts 横向柱状图,坐标轴隐藏,网格线颜色渐变,网格默认背景,柱状图边框宽度/颜色,数据渐变,刻度线隐藏等;
文章链接: https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501
九、折线图 + 柱状图
echarts 折线图 + 柱状图,左右两侧y轴线,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接: https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501
十、3D 柱状图
echarts 3D 柱状图,多个柱状图叠加,y轴内刻度线、隐藏横坐标,文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接: https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501
十一、工程项目可视化
echarts 工程项目可视化,依据x轴时间坐标轴,叠加展示不同阶段的项目节点,y轴展示项目阶段名、文字颜色,网格线,坐标轴两侧留白、背景色等;
文章链接: https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501
十二、雷达图
echarts 雷达图,自定义指示器名称,线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501
十三、象形柱图
echarts 象形柱图,隐藏横纵坐标轴、网格线,坐标轴两侧留白,自定义矢量图,文字提示框、图形类型、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501
十四、环形占比图
echarts 环形占比图,环形图、仪表盘、刻度线,自定义提示框、颜色渐变、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501
十五、圆环动画
echarts 圆环动画,饼图、环形图、图表动画、网格线,颜色渐变,图行矢量,文字提示框、图表层级、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501
十六、力向导图(二分图布局)
文章链接:https://blog.csdn.net/aibujin/article/details/134148974?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/134690784?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/134147640?spm=1001.2014.3001.5502
十七、地图
echarts 地图,自定义提示框;
文章链接:https://blog.csdn.net/aibujin/article/details/130532911?spm=1001.2014.3001.5501