最高分

${zgf}分

最低分

${zdf}分

平均分

${((zdf + zgf) / 2).toFixed(1)}分

`; }, extraCssText: `border:transparent;padding:0;opacity: 0.9;border-radius: 5px;background: rgba(2, 48, 85,1);box-shadow: 0px 1px 8px 0px rgba(32, 142, 255, 0.56);opacity: 0.9;` }, grid: { left: '24', right: '24', bottom: '18', top: '24', containLabel: true }, xAxis: { type: 'value', position: 'top', min: 300, max: 750, interval: 50, axisLine: { // 坐标轴线 show: false }, axisTick: { // 坐标轴刻度 show: false }, axisLabel: { // 坐标轴标签 show: true, fontSize: 11, fontFamily: 'Source Han Sans CN', fontWeight: 400, color: '#70EEFE', }, splitLine: { // 分割线 lineStyle: { color: '#70EEFE', type: 'dashed', } }, }, yAxis: { type: 'category', data: yData, inverse: true, // 坐标标签倒序 axisLine: { // 坐标轴线 show: false }, axisTick: { // 坐标轴刻度 show: false }, splitLine: { // 分割线 show: false }, axisLabel: { align: 'center', padding: [0, 0, 0, -80], formatter: (value, index) => { let limit = 4 if (value.length > limit) { return [`{lg|${index + 1}} ` + "{title|" + value.substr(0, limit) + "..." + "} "].join("\n"); } else { return [`{lg|${index + 1}} ` + "{title|" + value + "} "].join("\n"); } }, rich: { lg: { backgroundColor: "rgba(3, 207, 225, 0.3)", color: 'rgba(21, 255, 225, 1)', borderRadius: 2, padding: [5, 5, 2, 5], align: "center", verticalAlign: "top", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, title: { color: '#C4E1FF', align: "left", verticalAlign: "top", fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', padding: [5, 0, 0, 0], }, }, }, }, series: [ { name: '最低分', type: 'bar', stack: 'Total', barWidth: 11, itemStyle: { borderColor: 'transparent', color: 'transparent' }, emphasis: { itemStyle: { borderColor: 'transparent', color: 'transparent' } }, data: dfData }, { name: '最高分', type: 'bar', stack: 'Total', barWidth: 11, itemStyle: { borderColor: '#157DFE', borderWidth: 1, color: new echarts.graphic.LinearGradient( //渐变色 1, 1, 0, 0, [{ offset: 1, color: `rgba(21, 125, 254, 0)` }, { offset: 0, color: `#157DFE` } ] ), }, label: { show: false, }, data: bar2 } ] }; option && myChart.setOption(option);

条形区域图（条形、柱状图）