echarts 折线图 + 柱状图
echarts 折线图 + 柱状图,左右两侧y轴线,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
Echarts 常用各类图表模板配置
注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;
以下代码都可以复制到 Echarts 官网,直接预览;
图标模板目录
一、折线图 + 柱状图
option = {
color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
top: '30%',
left: '10%',
right: '10%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2017', '2018', '2019', '2020', '2021', '2022'],
axisLine: {
show: true,
lineStyle: {
color: '#7B68EE'
}
},
splitLine: {
show: false,
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisPointer: {
type: 'shadow'
},
}
],
yAxis: [
{
type: 'value',
name: ` {legend|} {value|柱状图}`,
axisLabel: {
color: '#FF6347'
},
axisLine: {
show: true,
lineStyle: {
color: '#FFDEAD'
}
},
splitLine: {
show: false,
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
nameTextStyle: {
rich: {
legend: {
width: 12,
height: 4,
backgroundColor: '#EE82EE'
},
value: {
color: '#FF8C00'
}
}
}
},
{
type: 'value',
name: `{legend|} {value|折线图} `,
axisLabel: {
color: '#00BFFF'
},
axisLine: {
show: true,
lineStyle: {
color: '#66CDAA'
}
},
splitLine: {
lineStyle: {
color: '#E6E6FA',
width: 1,
type: 'solid'
}
},
nameTextStyle: {
rich: {
legend: {
width: 12,
height: 4,
backgroundColor: '#87CEFA'
},
value: {
color: '#CD853F'
}
}
}
}
],
series: [
{
name: '柱状图',
type: 'bar',
data: [80, 120, 110, 130, 120, 110],
barWidth: 14, // 柱状图的宽度
itemStyle: {
borderRadius: 8,
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: 'rgba(50, 229, 255, 1)' },
{ offset: 1, color: 'rgba(50, 229, 255, 0.8)' }
])
}
},
{
name: '折线图',
type: 'line',
yAxisIndex: 1,
data: [80, 120, 110, 130, 120, 110],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(183, 75, 238)'
},
{
offset: 1,
color: 'rgba(250, 207, 18)'
}
])
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(183, 75, 238,0.2)'
},
{
offset: 1,
color: 'rgba(250, 207, 18)'
}
])
},
showSymbol: false
}
]
};
二、环形图
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/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
五、横向柱状图
echarts 横向柱状图,坐标轴隐藏,网格线颜色渐变,网格默认背景,柱状图边框宽度/颜色,数据渐变,刻度线隐藏等;
文章链接: https://blog.csdn.net/aibujin/article/details/124802889?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
更多推荐
所有评论(0)