Home > Article > Web Front-end > Implementation code of commonly used echarts charts
This article brings you the implementation code of commonly used echarts charts. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The code of this article is developed based on ehcarts4.0
##
// 饼图配置项 var option = { series: [ { name:'风险预警占比', type: 'pie', radius: ['25%', '40%'], center: ['50%', '50%'], roseType: false, data: [ { value: 40, name: '红色预警' }, { value: 30, name: '橙色预警' }, { value: 10, name: '黄色预警' }, { value: 50, name: '蓝色预警' } ], label: { fontSize: 12, color:'#545454', formatter: function (param) { return param.name + '(' + Math.round(param.percent) + '%' + ')' + '\n' + param.value + '个'; } }, labelLine: { smooth: false, lineStyle: { width: 2 } }, itemStyle: { color:function(params){ switch (params.name) { case '红色预警': return '#D70002'; case '橙色预警': return '#FF9309'; case '黄色预警': return '#FFFB09'; case '蓝色预警': return '#035EF7'; default: break; } } }, } ] }Stacked column chart
//堆叠柱状图配置项 var option = { backgroundColor: '#fff', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { bottom: '10', itemGap: 30, data: ['一级', '二级', '三级', '四级'] }, grid: { //图表的位置 top: 30, left: 10, right: 80, bottom: 60, containLabel: true }, dataZoom: [ { type: 'inside' }, { type: 'slider', start: 0, bottom: 40, height: '15px', fillerColor:'rgba(202,223,255,.8)', borderColor:'#b6d2fc', handleStyle:{ color:'#b6d2fc' }, dataBackground:{ lineStyle:{ color:'#b6d2fc' }, areaStyle:{ color:'rgba(202,223,255,.8)' } } } ], yAxis: [ { type: 'value', name: '备案个数', nameTextStyle: { fontSize: 12, fontWeight: 'bold', color: '#454545' }, splitLine: { show: false }, axisLine: { lineStyle: { color: '#B3B3B3' } }, axisLabel: { color: '#454545' } } ], xAxis: [ { type: 'category', name: '区县名称', nameTextStyle: { fontSize: 12, fontWeight: 'bold', color: '#454545' }, axisLine: { lineStyle: { color: '#B3B3B3' } }, axisLabel: { color: '#454545' }, data: ['鼓楼区','玄武区','秦淮区'] } ], series: [ { name: '一级', type: 'bar', stack: '总量', barWidth: '10px', itemStyle:{ color:'#D70002' }, data: [2,4,6] }, { name: '二级', type: 'bar', stack: '总量', barWidth: '10px', data: [2,4,1] }, { name: '三级', type: 'bar', stack: '总量', barWidth: '10px', itemStyle:{ color:'#FFFB09' }, data: [1,5,7] }, { name: '四级', type: 'bar', stack: '总量', barWidth: '10px', itemStyle:{ color:'#FF9309' }, data: [1] } ] }Gradient column chart
##
//配置项
var option = {
backgroundColor: '#fff',
color: [
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#23E9EE' },
{ offset: 1, color: '#0460F7' }
]
)
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: '10',
itemGap: 30,
data: ['一级', '二级', '三级', '四级']
},
grid: { //图表的位置
top: 30,
left: 10,
right: 80,
bottom: 60,
containLabel: true
},
dataZoom: [
{
type: 'inside'
}, {
type: 'slider',
start: 0,
bottom: 40,
height: '15px',
fillerColor:'rgba(202,223,255,.8)',
borderColor:'#b6d2fc',
handleStyle:{
color:'#b6d2fc'
},
dataBackground:{
lineStyle:{
color:'#b6d2fc'
},
areaStyle:{
color:'rgba(202,223,255,.8)'
}
}
}
],
yAxis: [
{
type: 'value',
name: '备案个数',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
}
}
],
xAxis: [
{
type: 'category',
name: '区县名称',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
},
data: ['鼓楼区','玄武区','秦淮区']
}
],
series: [
{
name: '报警',
type: 'bar',
stack: '总量',
barWidth: '10px',
data: [1,2,4]
}
]
};
Line chart
//线图配置项
var option = {
tooltip: {
trigger: 'axis'
},
color: [
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#23E9EE'},
{offset: 1, color: '#0460F7'}
]
)
],
grid: {
top: 30,
left: 10,
right: 30,
bottom: 50,
containLabel: true
},
dataZoom: [
{
type: 'inside'
}, {
type: 'slider',
start: 0,
bottom: 30,
height: '15px',
fillerColor:'rgba(202,223,255,.8)',
borderColor:'#b6d2fc',
handleStyle:{
color:'#b6d2fc'
},
dataBackground:{
lineStyle:{
color:'#b6d2fc'
},
areaStyle:{
color:'rgba(202,223,255,.8)'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
}
}
],
xAxis: {
type: 'category',
boundaryGap:false,
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [
{
name: '报警个数',
type: 'line',
symbol: 'emptyCircle',
symbolSize: 2,
showSymbol: false,
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(35,233,238,.4)'},
{offset: 1, color: 'rgba(4,96,247,.4)'}
]
)
},
lineStyle: {
width: 1,
color: '#59cef5'
},
itemStyle: {
borderColor: '#59cef5',
borderWidth: 2
},
data:[2,4,3,2,1,4,2]
}
]
}
Create an instance
var chart = echarts.init(document.getElementById('chartBox'));
chart.setOption(option);
The above is the detailed content of Implementation code of commonly used echarts charts. For more information, please follow other related articles on the PHP Chinese website!