protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { String html = "<!DOCTYPE html>\n" + "<html lang=\"en\">\n" + "<head>\n" + " <meta charset=\"UTF-8\">\n" + " <title>Title</title>\n" + "</head>\n" + "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js\"></script>\n" + "<body>\n" + "<div id='main' style='width: 100vw;height: 100vh'></div>\n" + "<script type=\"text/javascript\">\n" + " var chartDom = document.getElementById('main');\n" + " var myChart = echarts.init(chartDom);\n" + " var option = {\n" + " color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],\n" + " title: {\n" + " text: 'Gradient Stacked Area Chart'\n" + " },\n" + " tooltip: {\n" + " trigger: 'axis',\n" + " axisPointer: {\n" + " type: 'cross',\n" + " label: {\n" + " backgroundColor: '#6a7985'\n" + " }\n" + " }\n" + " },\n" + " legend: {\n" + " data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']\n" + " },\n" + " toolbox: {\n" + " feature: {\n" + " saveAsImage: {}\n" + " }\n" + " },\n" + " grid: {\n" + " left: '3%',\n" + " right: '4%',\n" + " bottom: '3%',\n" + " containLabel: true\n" + " },\n" + " xAxis: [\n" + " {\n" + " type: 'category',\n" + " boundaryGap: false,\n" + " data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n" + " }\n" + " ],\n" + " yAxis: [\n" + " {\n" + " type: 'value'\n" + " }\n" + " ],\n" + " series: [\n" + " {\n" + " name: 'Line 1',\n" + " type: 'line',\n" + " stack: 'Total',\n" + " smooth: true,\n" + " lineStyle: {\n" + " width: 0\n" + " },\n" + " showSymbol: false,\n" + " areaStyle: {\n" + " opacity: 0.8,\n" + " color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n" + " {\n" + " offset: 0,\n" + " color: 'rgb(128, 255, 165)'\n" + " },\n" + " {\n" + " offset: 1,\n" + " color: 'rgb(1, 191, 236)'\n" + " }\n" + " ])\n" + " },\n" + " emphasis: {\n" + " focus: 'series'\n" + " },\n" + " data: [140, 232, 101, 264, 90, 340, 250]\n" + " },\n" + " {\n" + " name: 'Line 2',\n" + " type: 'line',\n" + " stack: 'Total',\n" + " smooth: true,\n" + " lineStyle: {\n" + " width: 0\n" + " },\n" + " showSymbol: false,\n" + " areaStyle: {\n" + " opacity: 0.8,\n" + " color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n" + " {\n" + " offset: 0,\n" + " color: 'rgb(0, 221, 255)'\n" + " },\n" + " {\n" + " offset: 1,\n" + " color: 'rgb(77, 119, 255)'\n" + " }\n" + " ])\n" + " },\n" + " emphasis: {\n" + " focus: 'series'\n" + " },\n" + " data: [120, 282, 111, 234, 220, 340, 310]\n" + " },\n" + " {\n" + " name: 'Line 3',\n" + " type: 'line',\n" + " stack: 'Total',\n" + " smooth: true,\n" + " lineStyle: {\n" + " width: 0\n" + " },\n" + " showSymbol: false,\n" + " areaStyle: {\n" + " opacity: 0.8,\n" + " color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n" + " {\n" + " offset: 0,\n" + " color: 'rgb(55, 162, 255)'\n" + " },\n" + " {\n" + " offset: 1,\n" + " color: 'rgb(116, 21, 219)'\n" + " }\n" + " ])\n" + " },\n" + " emphasis: {\n" + " focus: 'series'\n" + " },\n" + " data: [320, 132, 201, 334, 190, 130, 220]\n" + " },\n" + " {\n" + " name: 'Line 4',\n" + " type: 'line',\n" + " stack: 'Total',\n" + " smooth: true,\n" + " lineStyle: {\n" + " width: 0\n" + " },\n" + " showSymbol: false,\n" + " areaStyle: {\n" + " opacity: 0.8,\n" + " color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n" + " {\n" + " offset: 0,\n" + " color: 'rgb(255, 0, 135)'\n" + " },\n" + " {\n" + " offset: 1,\n" + " color: 'rgb(135, 0, 157)'\n" + " }\n" + " ])\n" + " },\n" + " emphasis: {\n" + " focus: 'series'\n" + " },\n" + " data: [220, 402, 231, 134, 190, 230, 120]\n" + " },\n" + " {\n" + " name: 'Line 5',\n" + " type: 'line',\n" + " stack: 'Total',\n" + " smooth: true,\n" + " lineStyle: {\n" + " width: 0\n" + " },\n" + " showSymbol: false,\n" + " label: {\n" + " show: true,\n" + " position: 'top'\n" + " },\n" + " areaStyle: {\n" + " opacity: 0.8,\n" + " color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n" + " {\n" + " offset: 0,\n" + " color: 'rgb(255, 191, 0)'\n" + " },\n" + " {\n" + " offset: 1,\n" + " color: 'rgb(224, 62, 76)'\n" + " }\n" + " ])\n" + " },\n" + " emphasis: {\n" + " focus: 'series'\n" + " },\n" + " data: [220, 302, 181, 234, 210, 290, 150]\n" + " }\n" + " ]\n" + " };\n" + " myChart.setOption(option);\n" + "</script" + ">\n" + "</body>\n" + "</html>"; // 设置响应类型: resp.setContentType("text/html;charset=UTF-8"); // 获取输出流: PrintWriter pw = resp.getWriter(); // 写入响应: pw.write(html); // 最后不要忘记flush强制输出: pw.flush();}
回头看Java基础 - 字符和字符串 - 多行字符串
Sign in to make a reply
勿忘我