echarts 盒须图配置

article/2025/8/27 0:02:45

效果图
下载依赖包地址
cv工程师：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="./js/echarts.min.js"></script><script src="./js/extension/dataTool.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 800px;height:600px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例let myChart = echarts.init(document.getElementById('main'));// echarts.dataTool.prepareBoxplotData--处理盒须图需要的数据格式let ydata = echarts.dataTool.prepareBoxplotData([[132.43, 106.84, 123.98, 117.85, 121.02],[133.67, 106.24, 123.98, 117.85, 121.02],[135.43, 106.94, 123.98, 117.85, 121.02],[132.43, 106.84, 128.98, 117.85, 121.02],[137.43, 106.84, 123.98, 117.85, 121.02],[132.43, 109.84, 123.98, 115.85, 121.02],[132.43, 116.84, 123.98, 117.85, 131.02],], {boundIQR: 'none',//是否需要计算})let option = {tooltip: {trigger: 'axis',backgroundColor: '#7d7d7d',color: "#fff",textStyle: {color: "#fff"},axisPointer: {type: 'line',lineStyle: {width: 1,color: "#84afaa",type: "dashed"}}},grid: {left: '10%',right: '15%',bottom: '8%'},xAxis: {type: 'category',name: '生料量（吨）',boundaryGap: true,nameGap: 30,nameLocation: "middle",splitArea: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},data: [445, 450, 455, 460, 465, 470, 475]},yAxis: [{type: 'value',name: '单\n位\n产\n量\n煤\n耗\n︵\n吨\n︶',nameGap: 40,nameRotate: 360,nameLocation: "center",splitArea: {show: false,},axisTick: {show: false,},axisLine: {show: false,},}, {type: 'value',name: `{legend|} {value|平均值}`,axisLabel: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLine: {show: false,},nameTextStyle: {rich: {legend: {width: 50,height: 2,backgroundColor: "#fbd173"}}}}, ],series: [{name: '',type: 'boxplot',itemStyle: {borderColor: "#bfdbf2",color: "#80beee"},data: ydata.boxData,},{name: '平均值',type: 'line',color: "#fbd173",yAxisIndex: 1,showSymbol: false,data: [120.77, 120.26, 120.22, 120.38, 119.9, 121.79, 120.65]}]};myChart.setOption(option);</script>
</body></html>