var data = { id: 'multipleThree', title: '简易单柱子', symbol: '%', //数值是否带百分号 --默认为空 '' yAxisLabel: false, //展示Y轴信息 --默认不展示 false seriesLabel: true, //柱子上方toplabel --默认展示 trur barWidth: 12, //柱子宽度 --默认12 scale: false, //y轴是否自动 --默认不自动 false xWidth: 55, //x轴label --默认像素宽度70 legendRight: '38%', //图例具右侧位置 --默认center居中 ysplitLine: '#F1F3F5', //y轴横向分割线颜色 --默认#F1F3F5 legendShow: false, //图例是否展示 --默认展示true splitNum: [4, 4, 5, 6], //x轴label换行 --默认值 3 3 4 6 四个阶段 <=4 | 5-7| 8-9 |10-14 legend: ['正面占比', '中立占比', '负面占比'], //必选参数 xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念'], yAxis: [ [20, 15, 12, 18, 17, 9, 8, 7, 7, 8, 7, 3, 5] ], color: ['#7091C4'] //柱子颜色必填参数 } var _this = this; var action = data.action || false var symbol = data.symbol || ' ' var splitNum = data.splitNum || [4, 4, 4, 6, 8, 10] let xAxis = data.xAxis // 保留一位小数，可选择性使用 function utilNumDecimal(x) { if (x == 0) return '0.0' if (!x) return '-' if (isNaN(x)) { return '--'; } let f = Math.round(x * 10) / 10; let s = f.toString(); let rs = s.indexOf('.'); if (rs < 0) { rs = s.length; s += '.'; } while (s.length <= rs + 1) { s += '0'; } return s; } var myData = (function test() { let yAxis = data.yAxis let legend = data.legend let seriesLabel = data.seriesLabel === false ? false : true let seriesArr = [] let legendArr = [] yAxis && yAxis.forEach((item, index) => { legendArr.push({ name: legend[index] }) var tempArr = []; let num = ''; item.forEach((value, _) => { if (value || value === 0) { num = value } else { num = 'null'; } tempArr.push(num); }) seriesArr.push({ name: legend[index], type: 'bar', barGap: .4, data: tempArr, barCategoryGap: '2%', barWidth: data.barWidth || 12, label: { normal: { show: seriesLabel, formatter: function(data) { return utilNumDecimal(data.value) }, position: 'top', textStyle: { color: '#414957', fontStyle: 'normal', fontFamily: '微软雅黑', textAlign: 'left', fontSize: 11, }, }, }, itemStyle: { //图形样式 normal: { barBorderRadius: 4, color: data.color[index] }, } }) }) return { seriesArr, legendArr } })() option = { backgroundColor: '#fff', title: { show: true, text: data.title, }, tooltip: { trigger: 'axis', formatter: function(params) { var time = ''; var str = ''; for (var i of params) { time = i.name.replace(/\n/g, '') + '
'; if (i.data == 'null' || i.data == null) { str += ' ' + i.seriesName + '：无数据' + '
' } else { str += ' ' + i.seriesName + '：' + i.data + symbol + '
' } } return time + str; }, axisPointer: { type: 'none' } }, legend: { show: data.legendShow === false ? false : true, right: data.legendRight || 'center', top: 20, itemWidth: 10, itemHeight: 10, itemGap: 10, borderRadius: 4, data: myData.legendArr, textStyle: { color: '#414957', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, } }, grid: { x: 46, y: 80, x2: 30, y2: 54, }, xAxis: { type: 'category', data: xAxis, axisTick: { show: false, }, axisLine: { show: false }, axisLabel: { show: true, interval: '0', textStyle: { color: '#687284', align: 'center', whiteSpace: 'wrap', lineHeight: 15, height: 50, fontSize: 10 }, rich: { normal: { height: 18, }, }, formatter: function(params, index) { var newParamsName = ""; var splitNumber = 5; var paramsNameNumber = params && params.length; if (paramsNameNumber && paramsNameNumber <= 4) { splitNumber = splitNum[0] || 4; } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) { splitNumber = splitNum[1] || 4; } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) { splitNumber = splitNum[2] || 4; } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) { splitNumber = splitNum[3] || 5; } else if (paramsNameNumber >= 15 && paramsNameNumber <= 16) { splitNumber = splitNum[4] || 6; } else if (paramsNameNumber >= 17 && paramsNameNumber <= 20) { splitNumber = splitNum[5] || 6; } else { params = params && params.slice(0, 21); } var provideNumber = splitNumber; //一行显示几个字 var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0; if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } let tag = 'normal' let arr = newParamsName.split('\n') let str = [] switch (arr.length) { case 3: arr.forEach((item, index) => { str.push('{' + tag + '|' + item + '}') }) break; case 2: arr.forEach((item, index) => { str.push('{' + tag + '|' + item + '}') }) str.push('{' + tag + '|' + ' ' + '}') break; case 1: arr.forEach((item, index) => { str.push('{' + tag + '|' + item + '}') }) str.push('{' + tag + '|' + ' ' + '}') str.push('{' + tag + '|' + ' ' + '}') break; default: } return str.join('\n'); }, color: '#687284', } }, yAxis: { scale: data.scale === true ? true : false, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: data.yAxisLabel || false, textStyle: { color: '#687284' } }, splitLine: { show: true, lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 color: data.ysplitLine || '#F1F3F5', type: 'solid' }, }, }, series: myData.seriesArr };

Echarts在线免费图表