一、官网
官网: http://www.echartsjs.com/
上手：http://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
二、例子
实例：
1. 先引入：echarts.common.min.js /或者： echarts.js
1 <head>2 ????<meta charset="utf-8">3 ????<title>ECharts</title>4 ?????<script src="echarts.common.min.js"></script>5 </head>
2. 为ECharts准备一个具备大小的DIV容器
<body> ???<!-- 为ECharts准备一个具备大小（宽高）的Dom --> ???<div style="width: 600px;height:400px;"></div></body>
3. js:设置参数初始化图表
1 <script> 2 ????window.onload = function () { loadChasrt() }; 3 ????function loadChasrt() { 4 ????????// 基于准备好的dom，初始化echarts实例 5 ????????var myChart = echarts.init(document.getElementById(‘main‘)); 6 ?7 ????????// 指定图表的配置项和数据 8 ????????var nameDevice = ‘设备‘, barName = ‘水位‘, X = [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘], 9 ????dataValue = [820, 932, 901, 934, 1290, 1330, 1320];10 ????????var yMax = 1320;11 ????????var xMax = 6;12 ????????var yMin = 820;13 ????????var xMin = 0;14 ????????var option = {15 ????????????title: {16 ????????????????text: nameDevice,17 ????????????????subtext: barName, x: ‘center‘, y: ‘top‘18 ????????????},19 ????????????tooltip: {20 ????????????????trigger: ‘axis‘21 ????????????},22 ????????????legend: {23 ????????????????data: [barName], x: ‘left‘, y: ‘top‘24 ????????????},25 ????????????toolbox: {26 ????????????????feature: {27 ????????????????????saveAsImage: {}28 ????????????????}29 ????????????},30 ????????????calculable: true,31 ????????????xAxis: [32 ????????????????{33 ????????????????????type: ‘category‘,34 ????????????????????data: X35 ????????????????}36 ????????????],37 ????????????yAxis: [38 ????????????????{39 ????????????????????type: ‘value‘40 ????????????????}41 ????????????],42 ????????????series: [43 ????????????????{44 ????????????????????name: barName,45 ????????????????????barWidth: 30,46 ????????????????????itemStyle: {47 ????????????????????????normal: {48 ????????????????????????????color: ‘#3FA7DC‘,49 ????????????????????????????barBorderRadius: [6, 6, 0, 0]50 ????????????????????????}51 ????????????????????},52 ????????????????????type: ‘bar‘,53 ????????????????????data: dataValue,54 ????????????????????markPoint: {55 ????????????????????????data: [56 ????????????????????????????{ name: ‘最高‘, value: yMax, xAxis: xMax, yAxis: yMax },57 ????????????????????????????{ name: ‘最低‘, value: yMin, xAxis: xMin, yAxis: yMin }58 ????????????????????????]59 ????????????????????}60 ????????????????????, markLine: {61 ????????????????????????data: [62 ????????????????????????????{ type: ‘average‘, name: ‘平均值‘ }63 ????????????????????????]64 ????????????????????}65 ????????????????}66 ????????????]67 ????????};68 69 70 ????????// 使用刚指定的配置项和数据显示图表。71 ????????myChart.setOption(option);72 ????}73 74 ???75 76 </script>三、测试使用
在官网->实例里面编辑数据参数，查看网页效果
进入网站：输入以下测试数据
//折线图：
1 var nameDevice = ‘设备‘, 2 ????barName = ‘水位‘, 3 ????X = ?[‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘], 4 ????dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; 5 ?6 option = { 7 ????title: { 8 ????????text: nameDevice, 9 ????????subtext: barName,10 ????????x: ‘center‘,11 ????????y: ‘top‘12 ????},13 ????tooltip: {14 ????????trigger: ‘axis‘,15 ????????axisPointer: {16 ????????????type: ‘cross‘,17 ????????????label: {18 ????????????????backgroundColor: ‘#6a7985‘19 ????????????}20 ????????}21 ????},22 ????legend: {23 ????????data: [barName],24 ????????x: ‘left‘,25 ????????y: ‘top‘26 ????},27 ????toolbox: {28 ????????feature: {29 ????????????saveAsImage: {}30 ????????}31 ????},32 ????calculable: true,33 34 35 ????xAxis: {36 ????????type: ‘category‘,37 ????????boundaryGap: false,38 ????????data: X39 ????},40 ????yAxis: {41 ????????type: ‘value‘42 ????},43 ????series: [{44 ????????name: barName,45 ?????????type: ‘line‘,46 ??????????data: dataValue,47 ????????areaStyle: {48 ????????????normal: {49 ????????????????color: {50 ????????????????????type: ‘linear‘,51 ????????????????????x: 0,52 ????????????????????y: 0,53 ????????????????????x2: 0,54 ????????????????????y2: 1,55 ????????????????????colorStops: [{56 ????????????????????????offset: 0,57 ????????????????????????color: ‘rgba(88,160,253,1)‘58 ????????????????????}, {59 ????????????????????????offset: 0.5,60 ????????????????????????color: ‘rgba(88,160,253,0.7)‘61 ????????????????????}, {62 ????????????????????????offset: 1,63 ????????????????????????color: ‘rgba(88,160,253,0)‘64 ????????????????????}]65 ????????????????}66 ????????????}67 ????????},68 ????????lineStyle: {69 ????????????normal: {70 ????????????????color: ‘rgba(88,160,253,1)‘71 ????????????}72 ????????},73 ????????itemStyle: {74 ????????????normal: {75 ????????????????color: ‘rgba(88,160,253,1)‘76 ????????????}77 ????????}78 ????}]79 }; 1 var nameDevice = ‘设备‘, 2 ????barName = ‘水位‘, 3 ????X = [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘], 4 ????dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; 5 ?6 option = { 7 ????title: { 8 ????????text: ‘折线图堆叠‘ 9 ????},10 ????tooltip: {11 ????????trigger: ‘axis‘12 ????},13 ????legend: {14 ????????data: [‘邮件营销‘, barName, ‘视频广告‘, ‘直接访问‘, ‘搜索引擎‘]15 ????},16 ????grid: {17 ????????left: ‘3%‘,18 ????????right: ‘4%‘,19 ????????bottom: ‘3%‘,20 ????????containLabel: true21 ????},22 ????toolbox: {23 ????????feature: {24 ????????????saveAsImage: {}25 ????????}26 ????},27 ????xAxis: {28 ????????type: ‘category‘,29 ????????boundaryGap: false,30 ????????data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]31 ????},32 ????yAxis: {33 ????????type: ‘value‘34 ????},35 ????series: [{36 ????????????name: ‘邮件营销‘,37 ????????????type: ‘line‘,38 ????????????stack: ‘总量‘,39 ????????????data: [120, 132, 101, 134, 90, 230, 210]40 ????????},41 ????????{42 ????????????name: barName,43 ????????????type: ‘line‘,44 ????????????stack: ‘总量‘,45 ????????????data: dataValue,46 ????????????areaStyle: {47 ???????????????normal: {48 ????????????????????color: {49 ????????????????????????type: ‘linear‘,50 ????????????????????????x: 0,51 ????????????????????????y: 0,52 ????????????????????????x2: 0,53 ????????????????????????y2: 1,54 ????????????????????????colorStops: [{55 ????????????????????????????offset: 0,56 ????????????????????????????color: ‘rgba(88,160,253,1)‘57 ????????????????????????}, {58 ????????????????????????????offset: 0.5,59 ????????????????????????????color: ‘rgba(88,160,253,0.7)‘60 ????????????????????????}, {61 ????????????????????????????offset: 1,62 ????????????????????????????color: ‘rgba(88,160,253,0)‘63 ????????????????????????}]64 ????????????????????}65 ????????????????}66 ????????????},67 ????????????lineStyle: {68 ????????????????normal: {69 ????????????????????color: ‘rgba(88,160,253,1)‘70 ????????????????}71 ????????????},72 ????????????itemStyle: {73 ????????????????normal: {74 ????????????????????color: ‘rgba(88,160,253,1)‘75 ????????????????}76 ????????????}77 ????????},78 ????????{79 ????????????name: ‘视频广告‘,80 ????????????type: ‘line‘,81 ????????????stack: ‘总量‘,82 ????????????data: [150, 232, 201, 154, 190, 330, 410]83 ????????},84 ????????{85 ????????????name: ‘直接访问‘,86 ????????????type: ‘line‘,87 ????????????stack: ‘总量‘,88 ????????????data: [320, 332, 301, 334, 390, 330, 320]89 ????????},90 ????????{91 ????????????name: ‘搜索引擎‘,92 ????????????type: ‘line‘,93 ????????????stack: ‘总量‘,94 ????????????data: [820, 932, 901, 934, 1290, 1330, 1320]95 ????????}96 ????]97 };//添加bar:柱状图
?1 app.title = ‘多 Y 轴示例‘; ?2 var colors = [‘#5793f3‘, ‘#d14a61‘, ‘#675bba‘]; ?3 ??// 指定图表的配置项和数据 ?4 ????var nameDevice = ‘设备‘, barName = ‘水位‘, X = [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘], ?5 dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; ?6 ????var yMax = 1320; ?7 ????var xMax = 6; ?8 ????var yMin = 820; ?9 ????var xMin = 0; 10 option = { 11 ????color: colors, 12 ?13 ????tooltip: { 14 ????????trigger: ‘axis‘, 15 ????????axisPointer: { 16 ????????????type: ‘cross‘ 17 ????????} 18 ????}, 19 ????grid: { 20 ????????right: ‘20%‘ 21 ????}, 22 ????toolbox: { 23 ????????feature: { 24 ????????????dataView: {show: true, readOnly: false}, 25 ????????????restore: {show: true}, 26 ????????????saveAsImage: {show: true} 27 ????????} 28 ????}, 29 ????legend: { 30 ????????data:[‘蒸发量‘,‘降水量‘,‘平均温度‘] 31 ????}, 32 ????xAxis: [ 33 ????????{ 34 ????????????type: ‘category‘, 35 ????????????axisTick: { 36 ????????????????alignWithLabel: true 37 ????????????}, 38 ????????????data: [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘ ] 39 ????????} 40 ????], 41 ????yAxis: [ 42 ????????{ 43 ????????????type: ‘value‘, 44 ????????????name: ‘蒸发量‘, 45 ????????????min: 0, 46 ????????????max: 250, 47 ????????????position: ‘right‘, 48 ????????????axisLine: { 49 ????????????????lineStyle: { 50 ????????????????????color: colors[0] 51 ????????????????} 52 ????????????}, 53 ????????????axisLabel: { 54 ????????????????formatter: ‘{value} ml‘ 55 ????????????} 56 ????????}, 57 ????????{ 58 ????????????type: ‘value‘, 59 ????????????name: barName, 60 ????????????min: 0, 61 ????????????max: 250, 62 ????????????position: ‘right‘, 63 ????????????offset: 80, 64 ????????????axisLine: { 65 ????????????????lineStyle: { 66 ????????????????????color: colors[1] 67 ????????????????} 68 ????????????}, 69 ????????????axisLabel: { 70 ????????????????formatter: ‘{value} ml‘ 71 ????????????} 72 ????????}, 73 ????????{ 74 ????????????type: ‘value‘, 75 ????????????name: ‘温度‘, 76 ????????????min: 0, 77 ????????????max: 25, 78 ????????????position: ‘left‘, 79 ????????????axisLine: { 80 ????????????????lineStyle: { 81 ????????????????????color: colors[2] 82 ????????????????} 83 ????????????}, 84 ????????????axisLabel: { 85 ????????????????formatter: ‘{value} °C‘ 86 ????????????} 87 ????????} 88 ????], 89 ????series: [ 90 ????????{ 91 ????????????name:‘蒸发量‘, 92 ????????????type:‘line‘, 93 ????????????data:[2.0, 4.9, 17.0, 23.2, 25.6, 76.7, 135.6 ] 94 ????????}, 95 ???????96 ?????????????97 ????????{ 98 ????????????name: barName, 99 ????????????100 ?????????????barWidth: 30,101 ????????????????itemStyle: {102 ????????????????????normal: {103 ????????????????????????color: ‘#3FA7DC‘,104 ????????????????????????barBorderRadius: [6, 6, 0, 0]105 ????????????????????}106 ????????????????},107 ????????????????type: ‘bar‘,108 ?????????????????markPoint: {109 ????????????????????data: [110 ????????????????????????{ name: ‘最高‘, value: yMax, xAxis: xMax, yAxis: yMax },111 ????????????????????????{ name: ‘最低‘, value: yMin, xAxis: xMin, yAxis: yMin }112 ????????????????????]113 ????????????????}114 ????????????????,115 ????????????yAxisIndex: 1,116 ????????????data:[2.6, 5.9, 9.0, 26.4, 228.7, 70.7, 175.6 ]117 ????????},118 ????????{119 ????????????name:‘平均温度‘,120 ????????????type:‘line‘,121 ????????????yAxisIndex: 2,122 ????????????data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3 ]123 ????????}124 ????]125 };//混合多图：相同X刻度不同y变量类型的多图
?1 var ValueList = [{ ?2 ????????"value": [‘2010-10-01 19:00‘, 21] ?3 ????}, ?4 ????{ ?5 ????????"value": [‘2010-10-03 19:00‘, 21] ?6 ????}, ?7 ????{ ?8 ????????"value": [‘2010-10-04 19:00‘, 200] ?9 ????}, { 10 ????????"value": [‘2010-10-05 11:00‘, 2] 11 ????}, 12 ????{ 13 ????????"value": [‘2010-10-06 12:00‘, 21] 14 ????}, 15 ????{ 16 ????????"value": [‘2010-10-07 18:00‘, 21] 17 ????}, { 18 ????????"value": [‘2010-10-09 09:00‘, 21] 19 ????} 20 ]; 21 ?22 var aValueList = [{ 23 ????????"value": [‘2010-10-01 19:00‘, 21] 24 ????}, 25 ????{ 26 ????????"value": [‘2010-10-03 19:00‘, 61] 27 ????}, 28 ????{ 29 ????????"value": [‘2010-10-04 19:00‘, 40] 30 ????}, { 31 ????????"value": [‘2010-10-05 11:00‘, 41] 32 ????}, 33 ????{ 34 ????????"value": [‘2010-10-06 12:00‘, 61] 35 ????}, 36 ????{ 37 ????????"value": [‘2010-10-07 18:00‘, 61] 38 ????}, { 39 ????????"value": [‘2010-10-09 09:00‘, 71] 40 ????} 41 ]; 42 ?43 var bValueList = [{ 44 ????????"value": [‘2010-10-01 19:00‘, 91] 45 ????}, 46 ????{ 47 ????????"value": [‘2010-10-03 19:00‘, 81] 48 ????}, 49 ????{ 50 ????????"value": [‘2010-10-04 19:00‘, 80] 51 ????}, { 52 ????????"value": [‘2010-10-05 11:00‘, 1] 53 ????}, 54 ????{ 55 ????????"value": [‘2010-10-06 12:00‘, 51] 56 ????}, 57 ????{ 58 ????????"value": [‘2010-10-07 18:00‘, 11] 59 ????}, { 60 ????????"value": [‘2010-10-09 09:00‘, 71] 61 ????} 62 ];; 63 var objP = [{}]; 64 var m = 0; 65 objP[m].yAxisIndex = 0; 66 var sname = "", 67 ????name = ""; 68 ?var listYaxis = [{ 69 ????type: "value", 70 ????name: "y轴刻度01" 71 ?72 }, { 73 ?74 ????type: "value", 75 ????name: "y轴刻度02" 76 ?77 }, { 78 ?79 ????type: "value", 80 ????name: "3" 81 ?82 }]; 83 ?84 ?85 var yMax = 200; 86 var xMax = 2; 87 var yMin = 2; 88 var xMin = 3; 89 ?90 // xAxis: { ?type: ‘time‘ , splitLine: { show: false } }, 91 option = { 92 ????title: { 93 ????????text: name, 94 ????????x: ‘center‘, 95 ????????y: ‘top‘ 96 ????}, 97 ????tooltip: { 98 ????????trigger: ‘axis‘ 99 ????},100 ????legend: {101 ????????data: [],102 ????????x: ‘left‘,103 ????????y: ‘top‘,104 ????????right: 50,105 ????????type: ‘scroll‘106 ????},107 ????dataZoom: {108 ????????show: true,109 ????????start: 0110 ????},111 ????calculable: true,112 ????color: [‘#3398DB‘],113 114 ????grid: {115 ????????left: ‘0%‘,116 ????????right: ‘0%‘,117 ????????bottom: ‘0%‘,118 ????????containLabel: true119 ????},120 ????toolbox: {121 ????????y: ‘top‘,122 ????????right: 15,123 ????????top: -3,124 ????????feature: {125 ????????????saveAsImage: {}126 ????????}127 ????},128 129 ????xAxis: {130 ????????type: ‘category‘,131 ????????itLine: {132 ????????????show: false133 ????????}134 ????},135 ????yAxis: [{136 ????????type: ‘value‘137 ????}],138 139 ????series: []140 };141 142 143 //加载Y轴，并设定位置144 option.yAxis = []145 for (var y = 0; y < listYaxis.length; y++) {146 ???option.yAxis.push(listYaxis[y])147 }148 option.grid.left = 10149 if (listYaxis.length > 1) {150 ????option.grid.right = ((option.yAxis.length - 2) * 30)151 }152 ?153 154 option.legend.data.push(sname + "-采集值")155 option.series.push({156 ????name: sname + "-采集值",157 ????type: ‘line‘,158 ????stack: ‘‘,159 ????data: bValueList,160 ????yAxisIndex: objP[m].yAxisIndex,161 ????symbolSize: 0162 })163 164 165 option.legend.data.push(sname + "-水位")166 option.series.push({167 ????name: sname + "-水位",168 ????type: ‘line‘,169 ????stack: ‘‘,170 ????data: aValueList,171 ????yAxisIndex: objP[m].yAxisIndex,172 ????symbolSize: 0,173 ????areaStyle: {174 ????????normal: {175 ????????????color: {176 ????????????????type: ‘linear‘,177 ????????????????x: 0,178 ????????????????y: 0,179 ????????????????x2: 0,180 ????????????????y2: 1,181 ????????????????colorStops: [{182 ????????????????????offset: 0,183 ????????????????????color: ‘rgba(88,160,253,1)‘184 ????????????????}, {185 ????????????????????offset: 0.5,186 ????????????????????color: ‘rgba(88,160,253,0.7)‘187 ????????????????}, {188 ????????????????????offset: 1,189 ????????????????????color: ‘rgba(88,160,253,0)‘190 ????????????????}]191 ????????????}192 ????????}193 ????},194 ????lineStyle: {195 ????????normal: {196 ????????????color: ‘rgba(88,160,253,1)‘197 ????????}198 ????},199 ????itemStyle: {200 ????????normal: {201 ????????????color: ‘rgba(88,160,253,1)‘202 ????????}203 ????}204 })205 206 207 208 209 option.legend.data.push(sname + "-降雨量");210 option.series.push({211 ????name: sname + "-降雨量",212 ????type: ‘bar‘,213 ????itemStyle: {214 ????????normal: {215 ????????????color: ‘#3FA7DC‘,216 ????????????barBorderRadius: [6, 6, 0, 0]217 ????????}218 ????},219 ????stack: ‘‘,220 ????barWidth: 30,221 ????markPoint: {222 ????????data: [{223 ????????????????name: ‘最高‘,224 ????????????????value: yMax,225 ????????????????xAxis: xMax,226 ????????????????yAxis: yMax227 ????????????},228 ????????????{229 ????????????????name: ‘最低‘,230 ????????????????value: yMin,231 ????????????????xAxis: xMin,232 ????????????????yAxis: yMin233 ????????????}234 ????????]235 ????},236 ????data: ValueList,237 ????yAxisIndex: objP[m].yAxisIndex,238 ????symbolSize: 0239 240 });// X轴为时间：xAxis: { type: ‘time‘ ...
?1 var ValueList = [{ ?2 ????????"value": [‘2010-09-29 01:00‘, 21] ?3 ????}, ?4 ????{ ?5 ????????"value": [‘2010-10-03 05:00‘, 21] ?6 ????}, ?7 ????{ ?8 ????????"value": [‘2010-10-04 08:00‘, 200] ?9 ????}, { 10 ????????"value": [‘2010-10-05 011:00‘, 2] 11 ????}, 12 ????{ 13 ????????"value": [‘2010-10-06 12:00‘, 21] 14 ????}, 15 ????{ 16 ????????"value": [‘2010-10-07 18:00‘, 21] 17 ????}, { 18 ????????"value": [‘2010-10-09 09:00‘, 21] 19 ????} 20 ]; 21 ?22 var aValueList = [{ 23 ????????"value": [‘2010-10-01 07:00‘, 21] 24 ????}, 25 ????{ 26 ????????"value": [‘2010-10-03 09:00‘, 61] 27 ????}, 28 ????{ 29 ????????"value": [‘2010-10-04 11:00‘, 40] 30 ????}, { 31 ????????"value": [‘2010-10-05 11:00‘, 41] 32 ????}, 33 ????{ 34 ????????"value": [‘2010-10-06 12:00‘, 61] 35 ????}, 36 ????{ 37 ????????"value": [‘2010-10-07 16:00‘, 61] 38 ????}, { 39 ????????"value": [‘2010-10-09 19:00‘, 71] 40 ????} 41 ]; 42 ?43 var bValueList = [{ 44 ????????"value": [‘2010-10-01 06:00‘, 91] 45 ????}, 46 ????{ 47 ????????"value": [‘2010-10-03 09:00‘, 81] 48 ????}, 49 ????{ 50 ????????"value": [‘2010-10-04 09:00‘, 80] 51 ????}, { 52 ????????"value": [‘2010-10-05 11:00‘, 1] 53 ????}, 54 ????{ 55 ????????"value": [‘2010-10-06 12:00‘, 51] 56 ????}, 57 ????{ 58 ????????"value": [‘2010-10-07 13:00‘, 11] 59 ????}, { 60 ????????"value": [‘2010-10-09 16:00‘, 71] 61 ????} 62 ]; 63 var listYaxis = []; 64 listYaxis.push({ 65 ????boundaryGap: [0, ‘50%‘], 66 ????axisLine: { 67 ????????lineStyle: { 68 ????????????color: "#000000" 69 ????????} 70 ????}, 71 ????type: ‘value‘, 72 ????name: "默认", 73 ????axisLabel: { 74 ????????formatter: ‘{value}‘, 75 ????????textStyle: { 76 ????????????color: ‘#000000‘ 77 ????????} 78 ????}, 79 ????position: ‘left‘, 80 ????offset: 0, 81 ????splitNumber: 0, 82 ????splitLine: { 83 ????????show: true, 84 ????}, 85 ????tooltip: { 86 ????????show: true, 87 ????????trigger: ‘axis‘ 88 ????}, 89 ????triggerEvent: true 90 }); 91 listYaxis.push({ 92 ????boundaryGap: [0, ‘50%‘], 93 ????type: ‘value‘, 94 ????name: "默认22" 95 }); 96 ?97 var objP = [{}], 98 ????m = 0; 99 objP[m].yAxisIndex = 0;100 var sname = "",101 ????name = "";102 103 104 var yMax = 200;105 var xMax = 2;106 var yMin = 21;107 var xMin = 3;108 109 // xAxis: { ?type: ‘category‘ , splitLine: { show: false } },110 111 option = {112 ????title: {113 ????????text: name,114 ????????x: ‘center‘,115 ????????y: ‘top‘116 ????},117 ????tooltip: {118 ????????trigger: ‘axis‘119 ????},120 ????legend: {121 ????????data: [],122 ????????x: ‘left‘,123 ????????y: ‘top‘,124 ????????right: 50,125 ????????type: ‘scroll‘126 ????},127 ????dataZoom: {128 ????????show: true,129 ????????start: 0130 ????},131 ????calculable: true,132 ????grid: {133 ????????left: ‘0%‘,134 ????????right: ‘0%‘,135 ????????bottom: ‘0%‘,136 ????????containLabel: true137 ????},138 ????toolbox: {139 ????????y: ‘top‘,140 ????????right: 15,141 ????????top: -3,142 ????????feature: {143 ????????????saveAsImage: {}144 ????????}145 ????},146 ????xAxis: {147 ????????type: ‘time‘,148 ????????splitLine: {149 ????????????show: false150 ????????}151 ????},152 ????yAxis: {153 ????????type: ‘value‘154 ????},155 ????series: []156 };157 158 159 //加载Y轴，并设定位置160 option.yAxis = []161 for (var y = 0; y < listYaxis.length; y++) {162 ????option.yAxis.push(listYaxis[y])163 }164 option.grid.left = 10165 if (listYaxis.length > 1) {166 ????option.grid.right = ((option.yAxis.length - 2) * 30)167 }168 169 170 171 option.legend.data.push(sname + "-采集值")172 option.series.push({173 ????name: sname + "-采集值",174 ????type: ‘line‘,175 ????stack: ‘‘,176 ????data: bValueList,177 ????yAxisIndex: objP[m].yAxisIndex,178 ????symbolSize: 0179 })180 181 182 option.legend.data.push(sname + "-水位")183 option.series.push({184 ????name: sname + "-水位",185 ????type: ‘line‘,186 ????stack: ‘‘,187 ????data: aValueList,188 ????yAxisIndex: objP[m].yAxisIndex,189 ????symbolSize: 0,190 ????areaStyle: {191 ????????normal: {192 ????????????color: {193 ????????????????type: ‘linear‘,194 ????????????????x: 0,195 ????????????????y: 0,196 ????????????????x2: 0,197 ????????????????y2: 1,198 ????????????????colorStops: [{199 ????????????????????offset: 0,200 ????????????????????color: ‘rgba(88,160,253,1)‘201 ????????????????}, {202 ????????????????????offset: 0.5,203 ????????????????????color: ‘rgba(88,160,253,0.7)‘204 ????????????????}, {205 ????????????????????offset: 1,206 ????????????????????color: ‘rgba(88,160,253,0)‘207 ????????????????}]208 ????????????}209 ????????}210 ????},211 ????lineStyle: {212 ????????normal: {213 ????????????color: ‘rgba(88,160,253,1)‘214 ????????}215 ????},216 ????itemStyle: {217 ????????normal: {218 ????????????color: ‘rgba(88,160,253,1)‘219 ????????}220 ????}221 })222 223 224 option.legend.data.push(sname + "-降雨量");225 option.series.push({226 ????name: sname + "-降雨量",227 ????type: ‘bar‘,228 ????itemStyle: {229 ????????normal: {230 ????????????color: ‘#3FA7DC‘,231 ????????????barBorderRadius: [6, 6, 0, 0]232 ????????}233 ????},234 ????stack: ‘‘,235 ????barWidth: 30,236 // ???markPoint: {237 // ???????data: [{ ????name: ‘最高‘, ????value: yMax, ????xAxis: xMax, ????yAxis: yMax238 // ???????????},239 // ???????????{ ????name: ‘最低‘, ????value: yMin, ????xAxis: xMin, ????yAxis: yMin240 // ???????????}241 // ???????]242 // ???} ,243 ??????????markPoint: {244 ????????????????data: [245 ????????????????????{type: ‘max‘, name: ‘最大值‘},246 ????????????????????{type: ‘min‘, name: ‘最小值‘}247 ????????????????]248 ????????????},249 ????data: ValueList,250 ????yAxisIndex: objP[m].yAxisIndex,251 ????symbolSize: 0252 });JS插件：ECharts-数据图表化
原文地址：https://www.cnblogs.com/July-/p/9717969.html