/
githubmirror
/
echarts
Обзор
Документация
Войти
/
githubmirror
/
echarts
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
5.3.3
test/stackBar-dataZoom.html
1 431 строка
57 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:47
8544dd7
Код
Авторство
О чём код?
<!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="lib/simpleRequire.js"></script> <script src="lib/config.js"></script> <script src="lib/jquery.min.js"></script> <script src="lib/facePrint.js"></script> <script src="lib/testHelper.js"></script> <!-- <script src="ut/lib/canteen.js"></script> --> <link rel="stylesheet" href="lib/reset.css" /> </head> <body> <style> </style> <h1>Bar/Line chart stack normal with dataZoom in the toolbox(should not exceed the range of coord)</h1> <div id="main0"></div> <div id="main1"></div> <div id="main2"></div> <div id="main3"></div> <div id="main4"></div> <div id="main5"></div> <div id="main6"></div> <script> require([ 'echarts' ], function (echarts) { var option = { top: '30%', title: { text: 'ECharts test' }, tooltip: {}, legend: { data:['test'] }, xAxis: { data: ["AA","BB","CC","DD","EE","FF"] }, yAxis: {}, series: [{ name: 'Y', type: 'bar', data: [5, 20, 36, 10, 10, 20], stack: 1, }, { name: 'X', type: 'bar', data: [1, 2, 30, 10, 8, 2], stack: 1, }], toolbox: { feature: { dataZoom: {show: true} } } }; var chart = testHelper.create(echarts, 'main0', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { "backgroundColor": "#fff", "legend": { "orient": "horizontal", "x": "center", "left": "2%", "top": "2%" }, "textStyle": { "fontFamily": "Lato" }, "tooltip":{ "show": true, "trigger": "axis", "backgroundColor": "#fff", "borderColor": "#e0e5ec", "borderWidth": 1, "textStyle": { "color": "#495057", "fontSize": 10 }, "enterable": true, "axisPointer": { "lineStyle": { "color": "#e0e5ec" } } }, "toolbox":{ "feature":{ "dataZoom":{ "show":true, "title":{ "zoom":"Zoom", "back":"Restore Zoom" } } } }, "color": [ "rgba(101,116, 205, 0.9 )", "rgba(246,109, 155, 0.9 )", "rgba(43,203, 186, 0.9 )", "rgba(253,150, 68, 0.9 )", "rgba(205,32, 31, 0.9 )", "rgba(165,94, 234, 0.9 )", "rgba(123,210, 53, 0.9 )", "rgba(241,196, 15, 0.9 )", "rgba(70,127, 207, 0.9 )", "rgba(23,162, 184, 0.9 )", "rgba(69,170, 242, 0.9 )", "rgba(94,186, 0, 0.9 )", "rgba(33,150, 243, 0.9 )", "rgba(0,150, 136, 0.9 )", "rgba(244,67, 54, 0.9 )", "rgba(156,39, 176, 0.9 )", "rgba(0,150, 136, 0.9 )", "rgba(103,58, 183, 0.9 )", "rgba(63,81, 181, 0.9 )", "rgba(76,175, 80, 0.9 )", "rgba(233,30, 99, 0.9 )", "rgba(96,125, 139, 0.9 )", "rgba(255,87, 34, 0.9 )", "rgba(28,147, 99, 0.9 )", "rgba(255,113, 91, 0.9 )", "rgba(43,89, 195, 0.9 )", "rgba(33,91, 86, 0.9 )", "rgba(0,188, 212, 0.9 )", "rgba(255,87, 34, 0.9 )", "rgba(255,193, 7, 0.9 )", "rgba(48,25, 102, 0.9 )", "rgba(211,101, 130, 0.9 )", "rgba(130,6, 70, 0.9 )", "rgba(100,155, 193, 0.9 )", "rgba(75,63, 114, 0.9 )", "rgba(219,51, 64, 0.9 )", "rgba(223,81, 76, 0.9 )", "rgba(92,45, 80, 0.9 )", "rgba(94,52, 72, 0.9 )", "rgba(83,187, 244, 0.9 )", "rgba(89,196, 197, 0.9 )", "rgba(191,240, 115, 0.9 )", "rgba(228,95, 86, 0.9 )", "rgba(201,27, 38, 0.9 )", "rgba(115,116, 149, 0.9 )", "rgba(92,45, 80, 0.9 )", "rgba(32,69, 124, 0.9 )", "rgba(15,89, 89, 0.9 )", "rgba(159,146, 170, 0.9 )", "rgba(255,162, 0, 0.9 )", "rgba(36,168, 172, 0.9 )", "rgba(255,76, 101, 0.9 )", "rgba(233,76, 111, 0.9 )", "rgba(53,68, 88, 0.9 )", "rgba(105,210, 231, 0.9 )", "rgba(220,39, 66, 0.9 )", "rgba(58,2, 86, 0.9 )", "rgba(23,166, 151, 0.9 )", "rgba(6,71, 137, 0.9 )", "rgba(255,195, 60, 0.9 )" ], "xAxis": { "show": true, "type": "category", "name": "Inserted_at By Day", "nameLocation": "center", "nameTextStyle": { "padding": 8, "color": "#495057", "fontSize": 12 }, "axisLine": { "onZero": false, "lineStyle": { "color": "#e0e5ec" } }, "axisLabel": { "color": "#495057", "fontSize": 10 }, "splitLine": { "show": false } }, "yAxis": { "show": true, "type": "value", "name": false, "nameLocation": "center", "nameTextStyle": { "padding": 8, "color": "#495057", "fontSize": 12 }, "axisLine": { "onZero": false, "lineStyle": { "color": "#e0e5ec" } }, "axisLabel": { "color": "#495057", "fontSize": 10 }, "splitLine": { "show": false } }, "series": [ { "type": "bar", "name": "count", "itemStyle": null, "stack": true, "data": [ [ "2018-03-08 05:30:00.000", 156 ], [ "2018-03-23 05:30:00.000", 24 ], [ "2018-04-18 05:30:00.000", 513 ], [ "2018-05-16 05:30:00.000", 7 ], [ "2018-05-20 05:30:00.000", 21 ], [ "2018-05-31 05:30:00.000", 7 ], [ "2018-06-07 05:30:00.000", 7 ], [ "2018-06-08 05:30:00.000", 2 ], [ "2018-06-10 05:30:00.000", 6 ] ] }, { "type": "bar", "name": "?column?", "itemStyle": null, "stack": true, "data": [ [ "2018-03-08 05:30:00.000", 9 ], [ "2018-03-23 05:30:00.000", "1" ], [ "2018-04-18 05:30:00.000", 356 ], [ "2018-05-16 05:30:00.000", 5 ], [ "2018-05-20 05:30:00.000", 15 ], [ "2018-05-31 05:30:00.000", 5 ], [ "2018-06-07 05:30:00.000", 5 ], [ "2018-06-08 05:30:00.000", "1" ], [ "2018-06-10 05:30:00.000", 4 ] ] } ] }; var chart = testHelper.create(echarts, 'main1', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { "calculable": false, "renderAsImage": false, "series": [ { "largeThreshold" : 2000, "legendHoverLink" : true, "smooth" : false, "barCategoryGap" : "30%", "clickable" : true, "z" : 2, "dataFilter" : "nearest", "showAllSymbol" : false, "yAxisIndex" : 0, "type" : "bar", "data" : [ 23756.529999999999, 26716.48, 9424.25, 9530.8999999999996, 6035.3400000000001, 0, 3381.3499999999999, 6528.8599999999997, 3760.21, 3502.3800000000001, 1194.3599999999999, 4612.3400000000001, 0, 1296.3800000000001, 3743.4499999999998, 26284.240000000002, 1809.24, 0, 1947.3199999999999, 2511, 15559.23, 0, 5936.9399999999996, 0, 0, 0, 4760.2700000000004, 0, 0, 0, 0, 0, 0, 0, 0, 3428.1500000000001, 2521.0999999999999, 1607.8599999999999, 2441.52, 4354.8100000000004, 2960.9899999999998, 10408.42, 0, 0, 0, 0, 0, 0, 0 ], "barGap" : "30%", "itemStyle" : { "emphasis" : { "color" : "#1886E3", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } }, "normal" : { "color" : "#1886E3", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } } }, "large" : false, "name" : "51周平均日用量" }, { "largeThreshold" : 2000, "legendHoverLink" : true, "smooth" : false, "barCategoryGap" : "30%", "clickable" : true, "z" : 2, "dataFilter" : "nearest", "showAllSymbol" : false, "yAxisIndex" : 0, "type" : "bar", "data" : [ 30489.049999999999, 36026.639999999999, 8183.5699999999997, 14145.48, 7167.7200000000003, 880.82000000000005, 6253.9200000000001, 8826.25, 4777.7399999999998, 3638.1700000000001, 3584.2800000000002, 5062.5, 1168.51, 1114.8299999999999, 11842.41, 30060.919999999998, 706.26999999999998, 3996.46, 4380.8100000000004, 5187.4099999999999, 3824.5999999999999, 2262.4499999999998, 2967.6999999999998, 4495.6300000000001, 4126.5699999999997, 0, 3858.75, 2924.0999999999999, 1746.75, 1975.5, 2082, 3088.5, 0, 0, 0, 1785.53, 4356.0100000000002, 8033.8199999999997, 4208.71, 13157.700000000001, 12462.93, 13743.9, 0, 0, 0, 0, 0, 0, 0 ], "barGap" : "30%", "itemStyle" : { "emphasis" : { "color" : "#F6A623", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } }, "normal" : { "color" : "#F6A623", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } } }, "large" : false, "name" : "52周平均日用量" }, { "largeThreshold" : 2000, "legendHoverLink" : true, "smooth" : false, "barCategoryGap" : "30%", "clickable" : true, "z" : 2, "dataFilter" : "nearest", "showAllSymbol" : false, "yAxisIndex" : 0, "type" : "bar", "data" : [ 29524.110000000001, 14007.120000000001, 8411.6900000000005, 10003.469999999999, 11589.879999999999, 896.50999999999999, 4791.6000000000004, 6617.21, 7026.1099999999997, 5556.4899999999998, 3061.27, 8506.9099999999999, 416.82999999999998, 1337.75, 12256.059999999999, 22903.669999999998, 1427.8, 1533.5699999999999, 27902.540000000001, 5579.8100000000004, 28220.360000000001, 754.44000000000005, 3196.9299999999998, 6200.3400000000001, 6716.3900000000003, 0, 939.21000000000004, 803.39999999999998, 0, 11446.959999999999, 2096.5599999999999, 4544.4799999999996, 3509.3200000000002, 0, 761.25, 4916.1400000000003, 3039.4000000000001, 6166.8000000000002, 3378.46, 8787.6399999999994, 5666.96, 12500.610000000001, 5281.7299999999996, 8854.1399999999994, 328.94999999999999, 0, 0, 0, 0 ], "barGap" : "30%", "itemStyle" : { "emphasis" : { "color" : "#90AFE4", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } }, "normal" : { "color" : "#90AFE4", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } } }, "large" : false, "name" : "1周平均日用量" }, { "largeThreshold" : 2000, "legendHoverLink" : true, "smooth" : false, "barCategoryGap" : "30%", "clickable" : true, "z" : 2, "dataFilter" : "nearest", "showAllSymbol" : false, "yAxisIndex" : 0, "type" : "bar", "data" : [ 35376.440000000002, 21978.869999999999, 6576.0299999999997, 8786.5499999999993, 10064.26, 2063.1399999999999, 6502.3400000000001, 13495.48, 5614.5100000000002, 6085.6499999999996, 2312.5799999999999, 8553.2600000000002, 8796.3999999999996, 1880.26, 8418.7900000000009, 49651.620000000003, 1466.8, 6279.8599999999997, 7088.9499999999998, 8273.3099999999995, 12138.690000000001, 7607.8699999999999, 5459.1599999999999, 4296.71, 5477.7399999999998, 1249.6300000000001, 5644.4700000000003, 1487.8099999999999, 2465.04, 6923.5200000000004, 5541.7799999999997, 2260.6999999999998, 2172.1500000000001, 1944, 8513.8600000000006, 10300.84, 2953.7600000000002, 10124.91, 12560.67, 7698.3199999999997, 9854.2099999999991, 11715.85, 3042.8299999999999, 11900.15, 19656.810000000001, 2519.0900000000001, 3384.0500000000002, 1441.74, 690.61000000000001 ], "barGap" : "30%", "itemStyle" : { "emphasis" : { "color" : "#6ED4DA", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } }, "normal" : { "color" : "#6ED4DA", "label" : { "distance" : 10, "show" : false, "position" : "outer", "rotate" : false }, "labelLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "length" : 40 } } }, "large" : false, "name" : "2周平均日用量" } ], "grid" : { "y" : 75, "x2" : 45, "z" : 0, "x" : 45, "zlevel" : 0, "y2" : 40 }, "xAxis" : [ { "splitLine" : { "show" : true, "onGap" : false, "lineStyle" : { "type" : "solid" } }, "scale" : false, "position" : "'bottom'|'left'", "axisLabel" : { "interval" : "auto", "show" : true, "clickable" : false, "rotate" : 0, "margin" : 8 }, "show" : true, "z" : 0, "type" : "category", "data" : [ "小华1号普通A+C", "小华2号A+C两层加硬", "小华3号170gA+B", "小华4号170gA+A", "小华5号（美牛双加硬）", "10号（Q636B）\/BE瓦", "11号（H737B）\/BC瓦", "12号（H737H）\/BC瓦", "13号（H636B）\/BC瓦", "14号（M535B）\/BC瓦", "15号（M536B）\/BC瓦", "16号（M636B）\/BC瓦", "17号（M535B）\/BE瓦", "18号（M536B）\/BE瓦", "19号（A5B）\/单B瓦", "1号（A535B）\/BC瓦", "20号（Q5B）\/单B瓦", "21号（Q6B）\/单B瓦", "22号（5B）\/E瓦", "23号（6B）\/E瓦", "24号（535B）\/BE瓦", "25号（A5B）\/E瓦", "26号（W5C）\/E瓦", "27号（H7H）\/单B瓦", "28号（636A）\/BE瓦", "29号（6A）\/E瓦", "2号（A536B）\/BC瓦", "30号（B53）\/单E瓦", "31号（B63）\/单E瓦", "32号（M33）\/单B瓦", "33号（B3C）\/单B瓦", "34号（M3C）\/单B瓦", "35号（B333C）\/BC瓦", "36号（M3333）\/BC瓦", "37号（M333C）\/BC瓦", "3号（A636B）\/BC瓦", "4号（A535B）\/BE瓦", "5号（A536B）\/BE瓦", "6号（A636B）\/BE瓦", "7号（Q535B）\/BC瓦", "8号（Q536B）\/BC瓦", "9号（Q636B）\/BC瓦", "38号（Q6B）\/单E层", "39号（B33）\/单B瓦", "40号（Q536B）\/BE瓦", "小华6号(A+C一层加硬)", "小华7号(A+C单B瓦)", "小华6号(120gA+C \/BE)", "43号（536B）\/BE瓦" ], "nameLocation" : "end", "zlevel" : 0, "axisLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "onZero" : true }, "name" : "" } ], "tooltip" : { "transitionDuration" : 0.40000000000000002, "borderColor" : "rgba(3,3,3,1.00)", "padding" : 5, "axisPointer" : { "show" : false, "type" : "shadow" }, "position" : "(function (p){return ['50%', p[1] - 10]} )", "islandFormmater" : "{a} < br\/>{b} : {c}", "backgroundColor" : "rgba(0,0,0,0.70)", "trigger" : "axis", "show" : true, "z" : 8, "showContent" : true, "showDelay" : 20, "enterable" : false, "hideDelay" : 100, "borderWidth" : 0, "zlevel" : 1, "borderRadius" : 4 }, "dataZoom" : { "handleColor" : "rgba(70,130,180,0.80)", "start" : 0, "fillerColor" : "rgba(144,197,237,0.20)", "dataBackgroundColor" : "rgba(14,14,14,1.00)", "backgroundColor" : "rgba(0,0,0,0.00)", "realtime" : false, "show" : false, "z" : 4, "type" : "inside", "minSpan" : 5, "orient" : "horizontal", "zlevel" : 0, "handleSize" : 8, "end" : 100, "zoomLock" : false, "showDetail" : true }, "title" : { "padding" : 5, "borderColor" : "rgba(12,12,12,1.00)", "textStyle" : { "fontFamily" : "Arial, Verdana, sans-serif", "fontStyle" : "normal", "fontWeight" : "bolder", "decoration" : "none", "fontSize" : 17 }, "subtextStyle" : { "fontFamily" : "Arial, Verdana, sans-serif", "fontSize" : 12, "fontStyle" : "normal", "fontWeight" : "normal", "decoration" : "none", "color" : "rgba(10,10,10,1.00)" }, "sublink" : "", "x" : "left", "backgroundColor" : "rgba(0,0,0,0.00)", "y" : "top", "link" : "", "itemGap" : 5, "show" : true, "z" : 0, "borderWidth" : 0, "text" : "", "subtext" : "", "zlevel" : 0 }, "animation" : true, "toolbox" : { "padding" : 5, "borderColor" : "rgba(12,12,12,1.00)", "disableColor" : "rgba(13,13,13,0.00)", "x" : "right", "backgroundColor" : "rgba(0,0,0,0.00)", "effectiveColor" : "rgba(255,0,0,1.00)", "y" : "top", "itemSize" : 16, "itemGap" : 10, "show" : false, "z" : 6, "color" : [ "rgba(30,144,255,1.00)", "rgba(34,187,34,1.00)", "rgba(75,0,130,1.00)", "rgba(210,105,30,1.00)" ], "showTitle" : true, "borderWidth" : 0, "feature" : { "dataView" : { "title" : "数据视图", "show" : false, "readOnly" : false, "lang" : [ "数据视图", "关闭", "刷新" ] }, "magicType" : { "show" : false, "title" : { "bar" : "柱形图切换", "chord" : "和弦图切换", "funnel" : "漏斗图切换", "force" : "力导向布局图切换", "tiled" : "平铺", "stack" : "堆积", "pie" : "饼图切换", "line" : "折线图切换" } }, "mark" : { "show" : false, "title" : { "markClear" : "清空辅助线", "mark" : "辅助线开关", "markUndo" : "删除辅助线" }, "lineStyle" : { "color" : "rgba(30,144,255,1.00)", "type" : "dashed", "width" : 2 } }, "restore" : { "show" : false, "title" : "还原" }, "dataZoom" : { "show" : true, "title" : { "dataZoom" : "区域缩放", "dataZoomReset" : "区域缩放后退" } } }, "orient" : "horizontal", "zlevel" : 0 }, "yAxis" : [ { "splitLine" : { "show" : true, "onGap" : false, "lineStyle" : { "type" : "solid" } }, "scale" : true, "position" : "'bottom'|'left'", "show" : true, "z" : 0, "type" : "value", "data" : [ ], "nameLocation" : "end", "zlevel" : 0, "axisLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "onZero" : true }, "name" : "㎡" }, { "splitLine" : { "show" : true, "onGap" : false, "lineStyle" : { "type" : "solid" } }, "scale" : true, "position" : "'bottom'|'left'", "axisLabel" : { "formatter" : "(function (params) {if(params >= 10000000) { return (params\/ 10000000 + '千万' );} if (params >= 10000) { return (params\/ 10000 + '万' );} else {return params;}})", "interval" : "auto", "show" : true, "clickable" : false, "rotate" : 0, "margin" : 8 }, "show" : true, "z" : 0, "type" : "value", "data" : [ ], "nameLocation" : "end", "zlevel" : 0, "axisLine" : { "show" : true, "lineStyle" : { "type" : "solid" }, "onZero" : true }, "name" : "" } ], "legend" : { "borderColor" : "#ccc", "textStyle" : { "fontFamily" : "Arial, Verdana, sans-serif", "fontSize" : 12, "fontStyle" : "normal", "fontWeight" : "normal", "decoration" : "none", "color" : "rgba(3,3,3,1.00)" }, "x" : "center", "y" : 29, "itemGap" : 5, "show" : true, "z" : 4, "itemWidth" : 20, "data" : [ "51周", "52周", "1周", "2周" ], "selectedMode" : true, "orient" : "horizontal", "itemHeight" : 14 } }; var chart = testHelper.create(echarts, 'main2', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { "title": { "text": "option传入的title" }, "tooltip": { "trigger": "axis" }, "legend": { "data": ["邮件营销", "联盟广告"] }, "grid": { "containLabel": true }, "series": [{ "type": "line", "stack": "all", "data": [120, 132, 101, 134, 90, 230, 210], "name": "邮件营销" }, { "type": "line", "stack": "all", "data": [220, 182, 191, 234, 290, 330, 310], "name": "联盟广告" }], "yAxis": { "type": "category", "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, "xAxis": { "type": "value", }, "toolbox": { "feature": { "saveAsImage": { "type": "jpeg", "title": "保存保存" }, "dataZoom": { show:true } } } }; var chart = testHelper.create(echarts, 'main3', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { "xAxis": [{ "type": "category", "name": "COLUMN_NAME", "gridIndex": 0 }], "yAxis": [{ "gridIndex": 0 }], "series": [{ "type": "bar", "stack": "COLUMN_NAME", "xAxisIndex": 0, "yAxisIndex": 0, "encode": { "x": "COLUMN_NAME", "y": "SUB_TYPE" } }, { "type": "bar", "stack": "COLUMN_NAME", "xAxisIndex": 0, "yAxisIndex": 0, "encode": { "x": "COLUMN_NAME", "y": "s1" } }], "brush": { "toolbox": ["rect", "polygon", "lineX", "lineY", "clear"], "throttleType": "debounce", "throttleDelay": 300 }, "toolbox": { "feature": { "saveAsImage": { "show": true }, "dataZoom": { "show": true } }, "show": true, "left": "40px" }, "axisPointer": { "show": false }, "tooltip": { "show": true }, "color": ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"], "dataset": { "source": [ ["COLUMN_NAME", "SUB_TYPE", "s1"], ["column_name_0", 394, 394], ["column_name_1", 426.5, 426.5], ["column_name_2", 285, 285], ["column_name_3", 404, 404], ["column_name_4", 496.53846153846155, 496], ["column_name_5", 244, 244], ["column_name_6", 543, 543], ["column_name_7", 528, 528], ["column_name_8", 393, 393], ["column_name_9", 539, 539] ], "dimensions": ["COLUMN_NAME", "SUB_TYPE", "s1"] }, "grid": [{ "left": "2%", "top": "8%", "width": "90%", "height": "90%", "containLabel": true }], "dataZoom": [{ "type": "inside", "xAxisIndex": 0, "disabled": true }, { "type": "inside", "yAxisIndex": 0, "disabled": true }] } var chart = testHelper.create(echarts, 'main4', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, dataZoom: [{ type: 'slider', xAxisIndex: 0, start: 0, end: 100, filterMode: 'filter', },{ type: 'inside', start: 0, end: 100, filterMode: 'filter', }], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [ { name:'邮件营销', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; var chart = testHelper.create(echarts, 'main5', { option: option, // recordCanvas: true }); }); </script> <script> require([ 'echarts' ], function (echarts) { var option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'邮件营销', type:'bar', stack: '广告', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'bar', stack: '广告', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'bar', stack: '广告', data:[150, 232, 201, 154, 190, 330, 410] }], dataZoom: [ { show: true, filterMode: 'filter', } ] }; var chart = testHelper.create(echarts, 'main6', { option: option, // recordCanvas: true }); }); </script> </body> </html>