//以下为测试数据，实际开发中肯定要从后台获取。 //x轴月份 var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; //单位数组 var dwArr = [23, 27, 28, 30, 34, 36, 39, 41, 45, 46, 56, 60]; //职工数组 var zgArr = [1500, 1700, 1750, 1800, 1850, 1900, 1910, 1941, 1980, 2000, 2100, 2200]; //金额数组 var jeArr = [3500, 3600, 4200, 4800, 5500, 6500, 4900, 3500, 5400, 5500, 6500, 7000]; var colors = ['#FD2446', '#248EFD', '#C916F2', '#6669B1']; //自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组 // 指定图表的配置项和数据 var option = { color: colors, title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: months }, yAxis: {}, toolbox: { show: true, orient: 'horizontal', showTitle: true, feature: { magicType: { type: ['line', 'bar'] }, dataView: { show: true, title: '某地区单位人数金额统计', readOnly: false, optionToContent: function(opt) { var colName = "序号"; var typeName = "月份"; var dataview = opt.toolbox[0].feature.dataView; //获取dataview var table = '

' + dataview.title + '

' table += getTable(opt, colName, typeName); return table; } }, saveAsImage: { type: 'png', show: true, title: '保存为图片', }, restore: { show: true } } }, series: [{ name: '单位数', type: 'bar', barMaxWidth: '20%', label: { normal: { show: true, position: 'top' } }, data: dwArr }, { name: '职工数', type: 'bar', barMaxWidth: '20%', label: { normal: { show: true, position: 'top' } }, data: zgArr }, { name: '平均工资', type: 'bar', barMaxWidth: '20%', label: { normal: { show: true, position: 'top' } }, data: jeArr } ] }; function getTable(opt, colName, typeName) { var axisData = opt.xAxis[0].data; //获取图形的data数组 var series = opt.series; //获取series var num = 0; //记录序号 var sum = new Array(); //获取合计数组（根据对应的系数生成相应数量的sum） for (var i = 0; i < series.length; i++) { sum[i] = 0; } var table = '

' + '' + ''; for (var i = 0; i < series.length; i++) { table += '' } table += ''; for (var i = 0, l = axisData.length; i < l; i++) { num += 1; for (var n = 0; n < series.length; n++) { if (series[n].data[i]) { sum[n] += Number(series[n].data[i]); } else { sum[n] += Number(0); } } table += '' + '' + ''; for (var j = 0; j < series.length; j++) { if (series[j].data[i]) { table += ''; } else { table += ''; } } table += ''; } //最后一行加上合计 table += '' + '' + ''; for (var n = 0; n < series.length; n++) { if (String(sum[n]).indexOf(".") > -1) table += ''; else table += ''; } table += '

' + colName + '	' + typeName + '	' + series[i].name + '
' + num + '	' + axisData[i] + '	' + series[j].data[i] + '	' + 0 + '
' + (num + 1) + '	合计	' + (Number(sum[n])).toFixed(2) + '	' + Number(sum[n]) + '

'; return table; }

Echarts在线免费图表