/**
* 柱状图
* @param contaner 容器
* @param titleName 标题
* @param legendData legend数据
* @param seriesData 图表数据
* @param xAxisData X轴数据
* @colors 曲线颜色数据以及 legend颜色数组
*/
function drawPie(container, colors, titleName, legendData, xAxisData, seriesData) {
// 基于准备好的dom，初始化echarts实例
let myChartLeftCenter = echarts.init(document.getElementById(container));
let option = {
//标题样式
title: {
text: titleName,
textStyle: {
color: 'white',
fontSize: 12,
},
left: 'center',
show: true,
},
color: colors,
backgroundColor: 'rgba(255, 255, 255,0)',
tooltip: {},
legend: {
top: '15%',
data: legendData,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10,
},
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
textStyle: {
color: '#ffffff', //坐标的字体颜色
},
},
axisLine: {
show: true,
onZero: false, //x轴一直在最下面
//x轴线样式
lineStyle: {
color: '#51fefe',
width: 2,
type: 'solid',
}
},
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: '#ffffff', //坐标的字体颜色
},
},
//y轴线设置显示
axisLine: {
show: false
},
//与x轴平行的线样式
splitLine: {
show: true,
lineStyle: {
color: '#51fefe',
width: 1,
type: 'solid',
}
}
},
series: seriesData
};
myChartLeftCenter.setOption(option,true);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartLeftCenter.resize(), false);
}
/**
* 饼图
* @param contaner 容器
* @param titleName 标题
* @param legendData legend数据
* @param seriesData 图表数据
* @colorList 曲线颜色数据以及 legend颜色数组
*/
function drawPieCricle(contaner, titleName, legendData, seriesData, colorList) {
// 基于准备好的dom，初始化echarts实例
let myChartLeftCenter = echarts.init(document.getElementById(contaner));
let option = {
//标题样式
title: {
text: titleName,
textStyle: {
color: 'white',
fontSize: 12,
},
left: 'center',
show: true,
},
backgroundColor: 'rgba(255, 255, 255,0)',
tooltip: {
trigger: 'item',
formatter: "{b} : {d}%",
confine: true //将此限制打开后tooltip将不再溢出
},
legend: {
orient: 'horizontal',
left: 'right',
top: 'auto',
icon: "circle",
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10,
},
data: legendData
},
series: {
left: 'center', //离容器左侧的距离
top: 'top', //距离容器上测的距离
center: ['50%', '50%'],
radius: '65%', //控制饼图大小
type: 'pie',
label: {
normal: {
formatter: "{d}%",
}
},
data: seriesData,
itemStyle: {
normal: {
color: function(params) {
//自定义颜色
return colorList[params.dataIndex]
}
}
}
}
};
myChartLeftCenter.setOption(option,true);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartLeftCenter.resize(), false);
}
/**
* 画双折线图
* @param container 容器
* @param titleName 标题
* @param xData x轴数据
* @param seriesNameOne 第一条折线图表名称
* @param seriesDataOne 第一条折线图表数据
* @param seriesNameTwo 第二条折线图表名称
* @param seriesDataTwo 第二条折线图表数据
* @param yAxisName y轴名称
* @param legendNameArr legend名称
* @colorArr 曲线颜色数据以及 legend颜色数组
* @yNumData y轴刻度设置，最小值，最大值，间隔值
*/
function drawDoubleLine(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo,
yAxisName, legendNameArr, colorArr, yNumData) {
var doubleLine = echarts.init(document.getElementById(container));
doubleLineOption = {
legend: {
data: legendNameArr,
color: colorArr, //legend自定义颜色值数组
top: '10%',
left: '2%',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 12,
},
},
tooltip: {
trigger: 'axis',
//指示器
axisPointer: {
type: 'line',
lineStyle: {
color: '#00eaff'
}
}
},
//标题样式
title: {
text: titleName,
textStyle: {
color: 'white',
fontSize: 12,
},
left: 'center',
show: true,
},
//图形位置
grid: {
left: '4%',
right: '6%',
bottom: '4%',
top: 50,
containLabel: true
},
xAxis: [{
type: 'category',
//x轴坐标点开始与结束点位置都不在最边缘
boundaryGap: false,
axisLine: {
show: true,
onZero: false, //x轴一直在最下面
//x轴线样式
lineStyle: {
color: '#51fefe',
width: 2,
type: 'solid',
}
},
//x轴字体设置
axisLabel: {
show: true,
fontSize: 12,
color: 'white'
},
data: xData
}],
yAxis: [{
name: yAxisName,
type: 'value',
nameTextStyle: {
color: '#ffffff',
fontSize: 12,
},
min: yNumData[0], //y轴最小值
max: yNumData[1], //y轴最大值
interval: yNumData[2], //刻度间隔
//y轴字体设置
axisLabel: {
show: true,
color: 'white',
fontSize: 12,
formatter: function(value) {
if (value >= 1000) {
value = value / 1000 + 'k';
}
return value;
}
},
//y轴线设置显示
axisLine: {
show: false
},
//与x轴平行的线样式
splitLine: {
show: true,
lineStyle: {
color: '#51fefe',
width: 1,
type: 'solid',
}
}
}],
series: [{
name: seriesNameOne,
type: 'line',
smooth: true,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[0] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[0] // 100% 处的颜色
}],
globalCoord: false
},
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: colorArr[0]
},
//折线堆积区域样式
/* areaStyle: {
color: '#004c5E'
}, */
data: seriesDataOne
}, {
name: seriesNameTwo,
type: 'line',
smooth: true,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[1] // 0% 处的颜色
}, {
offset: 1,
color: colorArr[1] // 100% 处的颜色
}],
globalCoord: false
},
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: colorArr[1],
},
//折线堆积区域样式
/* areaStyle: {
color: '#004c5E'
}, */
data: seriesDataTwo
}]
};
doubleLine.setOption(doubleLineOption, true);
window.addEventListener("resize", () => doubleLine.resize(), false);
}
// 风险统计
drawPie(
"risk-count",
["#fe0000", "#ff8901", '#ffff01', '#5abbff'],
'按区域',
['重大风险点', '较大风险点', '一般风险点', '低风险点'],
['监控区', '道路', '车辆', '驾驶员'],
bottomServe
);
//折线图
drawDoubleLine(
'doubleLine',
'湿度记录',
['11-11', '11-12', '11-13', '11-14', '11-15', '11-16', '11-17', '11-18'],
'主卧室',
[5, 10, 15, 5, 20, 10, 20, 10],
'室外',
[10, 5, 5, 15, 5, 20, 5, 20],
'',
['主卧室', '室外'],
['#51fefe', '#1673ff'],
[0, 100, 10],
);
// 隐患统计
drawPieCricle(
'danger-count',
'按责任单位',
['重大隐患', '一般隐患'],
[{
name: '重大隐患',
value: 58.26
}, {
name: '一般隐患',
value: 9.89
}],
["#fe0000", '#5abbff']
);