<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> <!-- Uncomment this line if you want to dataTool extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/dataTool.min.js"></script> --> <!-- Uncomment this line if you want to use gl extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script> --> <!-- Uncomment this line if you want to echarts-stat extension <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script> --> <!-- Uncomment this line if you want to use map <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/world.js"></script> --> <!-- Uncomment these two lines if you want to use bmap extension <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script> --> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option; var xList = [\'2014\', \'2015\', \'2016\', \'2017\', \'2018\', \'2019\', \'2020\']; var bottomList = [1, 1, 1, 1, 1, 1, 1]; var typeOneList = [10, 50, 100, 35, 55, 30, 20]; //上衣 var typeTwoList = [15, 25, 90, 40, 26, 30, 20]; //裤子 var standardValues = [40, 85, 230, 95, 100, 60, 50]; // 标准 var HighestList = []; var topList = []; for (let i = 0; i < typeOneList.length; i++) { HighestList.push(typeOneList[i] + typeTwoList[i]); } for (let i = 0; i < typeOneList.length; i++) { topList.push(typeOneList[i]); } option = { backgroundColor: \'#000E1A\', //背景色 tooltip: { trigger: \'axis\', borderColor: \'rgba(255,255,255,.3)\', backgroundColor: \'rgba(13,5,30,.6)\', textStyle: { color: \'white\', //设置文字颜色 }, borderWidth: 1, padding: 5, formatter: function (parms) { var str = \'年份：\' + parms[0].axisValue + \'</br>\' + parms[0].marker + \'上衣：\' + parms[0].value + \'</br>\' + parms[1].marker + \'裤子：\' + parms[1].value + \'</br>\' + parms[2].marker + \'标椎：\' + parms[2].value; return str; }, }, textStyle: { color: \'#C9C9C9\', }, // color: [\'#fbc292\', \'#06fbfe\', \'#f06e91\'], legend: { type: \'scroll\', orient: \'vertical\', selectedMode: false, //图例点击失效 right: \'10%\', top: \'15%\', textStyle: { color: \'#ffffff\', fontSize: 25, }, }, grid: { containLabel: true, left: \'10%\', top: \'20%\', bottom: \'10%\', right: \'10%\', }, xAxis: { type: \'category\', data: xList, axisLine: { show: false, lineStyle: { color: \'#B5B5B5\', }, }, axisTick: { show: false, }, axisLabel: { margin: 20, //刻度标签与轴线之间的距离。 textStyle: { fontFamily: \'Microsoft YaHei\', color: \'#FFF\', }, fontSize: 25, fontStyle: \'bold\', }, }, yAxis: [ { type: \'value\', axisLine: { show: false, lineStyle: { color: \'#B5B5B5\', }, }, splitLine: { show: false, // lineStyle: { // // 使用深浅的间隔色 // color: ["#B5B5B5"], // type: "dashed", // opacity: 0.5, // }, }, axisLabel: { show: false, textStyle: { fontFamily: \'Microsoft YaHei\', color: \'#FFF\', }, fontSize: 20, }, }, { show: false, type: \'value\', }, ], series: [ { type: \'bar\', name: \'上衣\', type: \'bar\', data: typeOneList, stack: \'zs\', barMaxWidth: \'auto\', barWidth: 60, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, type: \'linear\', global: false, colorStops: [ { offset: 0, color: \'#017ebb\', }, { offset: 1, color: \'#06fbfe\', }, ], }, }, }, { name: \'裤子\', type: \'bar\', data: typeTwoList, stack: \'zs\', type: \'bar\', barMaxWidth: \'auto\', barWidth: 60, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, type: \'linear\', global: false, colorStops: [ { offset: 0, color: \'#fbc292\', }, { offset: 1, color: \'#f06e91\', }, ], }, }, }, { name: \'标准\', type: \'line\', data: standardValues, smooth: true, symbol: \'none\', itemStyle: { normal: { lineStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: \'rgba(255, 227, 168, 0)\', }, { offset: 0.5, color: \'rgba(255, 227, 168, 1)\', }, { offset: 1, color: \'rgba(255, 227, 168, 0)\', }, ]), shadowColor: \'rgba(255, 120, 0,1)\', shadowBlur: 8, }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: \'rgba(197, 106, 255, 0.6)\', }, { offset: 0.6, color: \'rgba(255, 120, 0, 0)\', }, ]), }, }, }, }, { data: bottomList, // 最小面平面 type: \'pictorialBar\', barMaxWidth: \'20\', symbol: \'diamond\', symbolOffset: [0, \'50%\'], symbolSize: [60, 20], zlevel: 2, itemStyle: { normal: { color: \'#06fbfe\', }, }, }, { data: topList, // 第一个和第二个之间平面 type: \'pictorialBar\', barMaxWidth: \'20\', symbolPosition: \'end\', symbol: \'diamond\', symbolOffset: [0, \'-50%\'], symbolSize: [60, 20], zlevel: 2, itemStyle: { normal: { color: \'#06fbfe\', }, }, }, { data: HighestList, // 最上方平面 type: \'pictorialBar\', barMaxWidth: \'20\', symbolPosition: \'end\', symbol: \'diamond\', symbolOffset: [0, \'-50%\'], symbolSize: [60, 20], zlevel: 2, itemStyle: { normal: { color: \'#fbc292\', }, }, }, ], }; if (option && typeof option === \'object\') { myChart.setOption(option); } </script> </body> </html>