文章目录
最近项目用到了echarts，放几个模板，备用并行的2个柱状图+折线图带渐变色的折线图带渐变色的饼图横向合并的柱状图
最近项目用到了echarts，放几个模板，备用
并行的2个柱状图+折线图
option = {
tooltip: {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
},
//图例，每个图表最多仅有一个图例
legend: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data: [
{
name: '最大出力',
textStyle: {
color: '#fdb041' // 图例文字颜色
}
},
{
name: '最小出力',
textStyle: {
color: '#2FB3FE' // 图例文字颜色
}
},
{
name: '平均出力',
textStyle: {
color: '#1E9A9C' // 图例文字颜色
}
}
]
},
//是否启用拖拽重计算特性，默认关闭(即值为false)
calculable: true,
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
grid: {
left: '3%',
right: '0%',
bottom: '4%',
top: '10%',
containLabel: true
},
xAxis: [
{
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'black'
}
}
}
],
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
//纵轴通常为数值型，但条形图时则纵轴为类目型
yAxis: [
{
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，纵轴默认为数值型'value'
type: 'value',
name: 'MW',
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'black'
}
},
nameTextStyle: {
color: 'black'
}
}
],
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
series: [
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '最大出力',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
barGap: '0%',
barWidth: 16, //柱图宽度
itemStyle: {
normal: {
color: '#fdb041'
}
},
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [119, 105, 121, 58, 59, 60, 119, 121, 110, 138, 135, 138]
},
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '最小出力',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
barGap: '0%',
barWidth: 16, //柱图宽度
itemStyle: {
normal: {
color: '#2FB3FE'
}
},
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [121, 110, 138, 135, 138, 129, 121, 119, 105, 121, 58, 59]
//系列中的数据标注内容
},
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '平均出力',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'line',
itemStyle: {
normal: {
color: '#1E9A9C'
}
},
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [120, 107.5, 129, 96.5, 99, 94, 121, 114.5, 105, 129.5, 96.5, 98.5]
//系列中的数据标注内容
}
]
};
对应效果图
带渐变色的折线图
option = {
color: ['#02D6E1', '#FBA919', '#1E9A9C'],
tooltip: {
trigger: 'axis'
},
legend: {
data: ['风', '光', '总']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '12%',
height: '75%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
},
yAxis: {
name: 'MW',
type: 'value',
max: 120
},
series: [
{
name: '风',
type: 'line',
smooth: true,
data: [40, 30, 50, 70, 66, 41, 33]
},
{
name: '光',
type: 'line',
smooth: true,
data: [0, 0, 20, 69, 39, 0, 0]
},
{
name: '总',
type: 'line',
smooth: true,
//shezhi设置设置渐变色,offset 0 是深色
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#1e9a9c'},
{offset: 1, color: '#1e9a9c24'}])
},
data: [30, 20, 50, 80, 60, 55, 28]
},
]
};
带渐变色的饼图
option = {
title: {
text: 'wowotou',
left: 'center',
textStyle: {
color: '#00496C',
fontSize: '16',
fontWeight: 'normal'
}
},
// color: ["#FE0018", "#02D6E1", "#FBA919", "#C71EFD", "#007BF7","#7EC521"],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '月占比',
type: 'pie',
selectedMode: 'single',
hoverAnimation: false,
radius: '50%',
labelLine: {
normal: {
length: 0,
length2: 10,
}
},
label: {
normal: {
show: true,
position: 'outer',
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: '{b}:{d}% \n {c} MW',
borderWidth: 40,
borderRadius: 4,
fontSize: 11
}
},
data: [
{
value: 20, name: '火',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fe001836' // 0% 处的颜色
}, {
offset: 1, color: '#FE0018' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#FE0018',
}
},
},
{
value: 13, name: '风',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#02d6e12e' // 0% 处的颜色
}, {
offset: 1, color: '#02D6E1' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#02d6e1'
}
},
},
{
value: 24, name: '光',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fba91921' // 0% 处的颜色
}, {
offset: 1, color: '#FBA919' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#FBA919'
}
},
},
{
value: 9, name: '核',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#c71efd24' // 0% 处的颜色
}, {
offset: 1, color: '#C71EFD' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#C71EFD'
}
},
},
{
value: 19, name: '水',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#007bf721' // 0% 处的颜色
}, {
offset: 1, color: '#007BF7' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#007BF7'
}
},
},
{
value: 21, name: '生物',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7ec5211f' // 0% 处的颜色
}, {
offset: 1, color: '#7EC521' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
label: {
normal: {
color: '#7EC521'
}
},
},
]
}
]
};
横向合并的柱状图
option = {
title: {
text: '实时值',
left: 'center',
textStyle: {
color: '#00496C',
fontSize: '16',
fontWeight: 'normal'
}
},
color: ['#2FB3FE', '#96DFFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: ''
},
formatter:'{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2FB3FE"></span>{a0}：{c0}%<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#96DFFF"></span>{a1}：{c1}%'
},
legend: {
top:'7%',
data: [{
name: '统调',
textStyle: {
color: '#2FB3FE'
}
}, {
name: '非',
textStyle: {
color: '#96DFFF'
}
}],
},
grid: {
left: '8%',
right: '4%',
bottom: '3%',
top:'15%',
containLabel: true
},
xAxis: {
show: false,
},
yAxis: {
type: 'category',
data: ['市', '市', '市', '区', '区', '县', '县']
},
series: [
{
name: '统调',
type: 'bar',
stack: '总量',
barWidth: 20, //柱图宽度
label: {
show: true,
position: 'insideLeft',
formatter: '{c}%',
color: '#000',
},
data: [32, 30, 30, 33, 39, 33, 32]
},
{
name: '非',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight',
formatter: '{c}%',
color: '#000',
},
data: [12, 13, 10, 13, 9, 23, 21]
}
]
};
