ECharts图表绘制函数集


/*** 创建柱状图* @param container 容器ID* @param colors 颜色数组，用于图表系列及图例* @param titleName 图表标题* @param legendData 图例数据* @param xAxisData X轴数据* @param seriesData 系列数据*/function createBarChart(container, colors, titleName, legendData, xAxisData, seriesData) {let chartInstance = echarts.init(document.getElementById(container));let chartOptiOns= {title: {text: titleName, left: 'center', textStyle: {color: 'white', fontSize: 12}},color: colors,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: {color: '#ffffff'}, axisLine: {onZero: false, lineStyle: {color: '#51fefe', width: 2, type: 'solid'}}},yAxis: {type: 'value', boundaryGap: [0, 0.01], axisLabel: {color: '#ffffff'}, axisLine: {show: false}, splitLine: {show: true, lineStyle: {color: '#51fefe', width: 1, type: 'solid'}}},series: seriesData};chartInstance.setOption(chartOptions, true);window.addEventListener('resize', () => chartInstance.resize(), false);}/*** 创建饼图* @param container 容器ID* @param titleName 图表标题* @param legendData 图例数据* @param seriesData 系列数据* @param colorList 颜色数组*/function createPieChart(container, titleName, legendData, seriesData, colorList) {let chartInstance = echarts.init(document.getElementById(container));let chartOptiOns= {title: {text: titleName, left: 'center', textStyle: {color: 'white', fontSize: 12}},tooltip: {trigger: 'item', formatter: '{b} : {d}%', confine: true},legend: {orient: 'horizontal', left: 'right', top: 'auto', icon: 'circle', textStyle: {color: '#fff', fontSize: 10}, data: legendData},series: [{type: 'pie', radius: '65%', center: ['50%', '50%'], data: seriesData, itemStyle: {color: function(params) {return colorList[params.dataIndex];}}}]};chartInstance.setOption(chartOptions, true);window.addEventListener('resize', () => chartInstance.resize(), false);}/*** 创建双折线图* @param container 容器ID* @param titleName 图表标题* @param xData X轴数据* @param seriesNameOne 第一条折线名称* @param seriesDataOne 第一条折线数据* @param seriesNameTwo 第二条折线名称* @param seriesDataTwo 第二条折线数据* @param yAxisName Y轴名称* @param legendNames 图例名称数组* @param colorArray 颜色数组* @param yNumData Y轴刻度设置数组*/function createDualLineChart(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo, yAxisName, legendNames, colorArray, yNumData) {let dualLineInstance = echarts.init(document.getElementById(container));let dualLineOptiOns= {legend: {data: legendNames, color: colorArray, top: '10%', left: '2%', textStyle: {color: '#fff', fontSize: 12}},tooltip: {trigger: 'axis', axisPointer: {type: 'line', lineStyle: {color: '#00eaff'}}},title: {text: titleName, left: 'center', textStyle: {color: 'white', fontSize: 12}},grid: {left: '4%', right: '6%', bottom: '4%', top: 50, containLabel: true},xAxis: [{type: 'category', boundaryGap: false, axisLine: {onZero: false, lineStyle: {color: '#51fefe', width: 2, type: 'solid'}}, axisLabel: {color: 'white', fontSize: 12}, data: xData}],yAxis: [{name: yAxisName, type: 'value', nameTextStyle: {color: '#ffffff', fontSize: 12}, min: yNumData[0], max: yNumData[1], interval: yNumData[2], axisLabel: {color: 'white', fontSize: 12, formatter: function(value) {if (value >= 1000) {return (value / 1000) + 'k';} return value;}}, axisLine: {show: false}, 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: colorArray[0]}, {offset: 1, color: colorArray[0]}], globalCoord: false}, width: 2, type: 'solid'}, itemStyle: {color: colorArray[0]}, data: seriesDataOne}, {name: seriesNameTwo, type: 'line', smooth: true, lineStyle: {color: {type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: colorArray[1]}, {offset: 1, color: colorArray[1]}], globalCoord: false}, width: 2, type: 'solid'}, itemStyle: {color: colorArray[1]}, data: seriesDataTwo}]};dualLineInstance.setOption(dualLineOptions, true);window.addEventListener('resize', () => dualLineInstance.resize(), false);}


// 调用示例createBarChart('risk-count', ['#fe0000', '#ff8901', '#ffff01', '#5abbff'], '按区域', ['重大风险点', '较大风险点', '一般风险点', '低风险点'], ['监控区', '道路', '车辆', '驾驶员'], bottomServe);createDualLineChart('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]);createPieChart('danger-count', '按责任单位', ['重大隐患', '一般隐患'], [{name: '重大隐患', value: 58.26}, {name: '一般隐患', value: 9.89}], ['#fe0000', '#5abbff']);