xAxis: {
//类目轴
type: 'category',
boundaryGap: true,
//设置x轴文字的每个字样式(对于yAxis同样适用)
axisLabel: {
show: false//默认使用true有的时候不需要,就可以设置成true
textStyle: {
show: true,
fontFamily: '微软雅黑',
color: "#fff",
fontSize: '15',
},
},
// 控制x轴的轴线显示与隐藏(对于yAxis同样适用)
axisLine: {
show: false, // 原来x轴的默认横线取消掉,重新设置
lineStyle: {
type: 'dashed', // 网格线样式
// dashOffset: 5
color: 'rgba(255, 255, 255,0.3)'
}
},
// 设置x轴竖着的每一列的线条样式(对于yAxis同样适用)
splitLine: {
show: false
// lineStyle: {
// type: 'dotted', // 网格线样式
// // dashOffset: 5
// color: 'rgba(255, 255, 255,0.3)'
// }
} // 不去除网格线
//不展示坐标轴刻度
axisTick: { show: false },
data: Echartdata.xdata
},
yAxis: {
type: 'value',
//让y轴上的每条横线显示并且是dashed类型
splitLine: {
show: true,
lineStyle: {
type: 'dashed',//类型和线条的颜色及透明度
color: 'rgba(255, 255, 255,0.3)'
}
}
},
折线图
series: [
{
name: '未戴安全帽',
type: 'line',
stack: 'Total',
data: Echartdata.yyan
},
{
name: '违规抽烟',
type: 'line',
stack: 'Total',
data: Echartdata.ydai
},
{
name: '未戴安全带',
type: 'line',
stack: 'Total',
data: Echartdata.ydai
},
{
name: '违规动火',
type: 'line',
stack: 'Total',
data: Echartdata.yhuo
},
{
//另加一个series,配置折线图的每个项的背景色
data: [
0, 0, 0, 0, 0, 0, 0
],
type: 'bar',
barWidth: 100, // 设置柱子的宽度
//是否展示每根柱子的背景
showBackground: true,
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 50, 100, 0.2)'
}, {
offset: 1,
color: 'rgba(3, 9, 37, 0.2)'
}]),
}
},
{
//另加一个series,配置折线图的每个项的背景色
data: [
0, 0, 0, 0, 0, 0, 0
],
type: 'bar',
barWidth: 100, // 设置柱子的宽度
//是否展示每根柱子的背景
showBackground: true,
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 50, 100, 0.2)'
}, {
offset: 1,
color: 'rgba(3, 9, 37, 0.2)'
}]),
}
},
]
柱图
series: [{
type: 'line',
data: testData.list?.people_24hour_nums,
symbol: 'emptyCircle',
symbolSize: 15,
//折线图的每个点所连区域下的颜色渐变
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(58,77,233,0.8)'
},
{
offset: 1,
color: 'rgba(58,77,233,0.3)'
}])
},
itemStyle: {
normal: {
// color: 'red',
shadowBlur: 15,
shadowColor: "rgba(0, 0, 0, .12)",
shadowOffsetX: 2,
shadowOffsetY: 2
// shadowColor: 'blue',
// shadowOffsetX: 10,
// shadowOffsetY: 2
}
},
},
{
//另加一个series,配置折线图的每个项的背景色
data: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
],
type: 'bar',
barWidth: 60, // 设置柱子的宽度
//是否展示每根柱子的背景
showBackground: true,
//给柱子设置渐变色
itemStyle: {
normal: {
// barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 1,
color: '#082858',
},
{
offset: 0.5,
color: '#000F32',
},
{
offset: 0.4,
color: '#000F32',
},
{
offset: 0.1,
color: '#082858',
},]),
},
},
z: 1,
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 50, 100, 0.2)'
}, {
offset: 1,
color: 'rgba(3, 9, 37, 0.2)'
}]),
},
}]
饼图
series: [{
name: 'Nightingale Chart',
type: 'pie',
radius: [20, 100],
//调整饼图的位置,上下左右
center: ['50%', '90%'],
//调整饼状图的角度
startAngle: 180,
roseType: 'area',
itemStyle: {
borderRadius: 1
},
//设置提示的字
label: {
color: '#fff',
fontSize: 12
},
// { value: 40, name: `30-40岁/${res.value}%` },
// { value: 38, name: '20-30岁' },
// { value: 32, name: '40-50岁' },
// { value: 30, name: '50-60岁' },
// { value: 23, name: '20岁以下' },
// { value: 19, name: '60岁以上' },
// data: [
// // ...obj.arr,
// ...laObj.value,
// // ...gg,
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
// ]
data: c.value,
}]