var titleText; if (window.FR) { titleText = window.FR && window.FR.remoteEvaluate("$zd"); }; /*try {var nf = FR.remoteEvaluate('$nf');} catch(err){}//试用于决策报表控件*/ var TABLE_DATA = getData('data1'); var seriesNames = ['最高','最低']; // 获取系列名 var columnValues = TABLE_DATA.slice(1); var categoryNames = columnValues.map(function(value){ return value[0]; }); // 获取分类名 var data = columnValues.map(function(value){ return value[1]; }); // 获取分类名 var max = data.reduce((total,value,index,array)=>total>value?total:value); for (var i = 0,dataShadow = []; i < columnValues.length; i++) { dataShadow.push(0.5); }; //将最大值存入空数组形成阴影 option = { grid: { //图表位置 left:'5%', top:'10%', width:"92%", // 宽度 height:"83%"// 高度 }, /* legend: { // icon: "emptyCircle", itemGap: 20, x:'right', y:'top', data:[{ name: seriesNames[0], icon: "image:///webroot/help/picture/store/icon-压力.png" },{ name: seriesNames[1], icon: "image:///webroot/help/picture/store/icon-流量.png" }], padding:[-2,200,0,0], textStyle:{ color: '#90D3FF', fontSize: '28', fontFamily: 'regular' } },*/ tooltip: { //提示框 trigger: 'axis', extraCssText: 'background: rgba(1,22,46,0.8);box-shadow: inset 0px 0px 40px rgba(7, 48, 89, 0.8);border-radius: 0px 0px 0px 0px;border: 2px solid #073059;', //边框阴影 axisPointer: { //指示线为线 type: 'line', lineStyle: { type: 'dashed', width: 1, //设置线宽度 color: 'rgba(10, 167, 255, 0.2)' } }, icon: "emptyCircle", formatter: function(params) { var pc = ["",""]; var aa=[" "," "]; var tip = '  '+params[0].name; return tip += '  '+params[1].marker+'  '+params[1].seriesName + ": " + params[1].value[1] + '  Mpa'+'  '+params[2].marker+'  '+params[2].seriesName + ": " + params[1].value[3] + '  Mpa'; }, textStyle:{ /* rich: { a: {height: 28}, b: {height: 28}, c: {height: 28} },*/ color: 'rgba(255, 255, 255, 1)', fontSize: '11', lineheight:'11', fontFamily: 'Arial' } }, dataset: {source: TABLE_DATA}, xAxis: { type: 'category', axisLine: {"show":false},//轴线 axisTick:{"show":false }, //刻度线 data: categoryNames, axisLabel: { //轴标签 show: true, // interval:0, //标签强制全部显示不重叠则设置为0 rotate:0, //标签倾斜 formatter:function(value){ return `${value.slice(11,16)}`; //截取前5位 }, textStyle: { color: 'rgba(167, 227, 255, 0.3)', fontSize:'11', fontFamily: 'Arial' } } }, yAxis: { name:'(Mpa)', //轴标题 nameTextStyle: { //标题字体样式 color: 'rgba(167, 227, 255, 0.3)', fontSize:'11', fontFamily: 'Arial', padding:[0,0,-4,-30] }, splitLine: { show: true, lineStyle: { type: 'dashed', width: 1, //设置线宽度 color: 'rgba(10, 167, 255, 0.2)' } }, //网格线 axisLine: {show:false}, axisTick: {show:false}, axisLabel: { show: true, formatter:function(value){ return `${value.toFixed(2)}`; }, textStyle: { color: 'rgba(167, 227, 255, 0.3)', fontSize:'11', fontFamily: 'Arial' } } }, // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。 series: [{ // For shadow type: 'bar', // xAxisIndex: 0, //选用哪个Y轴 name:'', itemStyle: { barBorderRadius: 0, //柱子圆角 color: 'rgba(10,167,255,0.2)' }, barWidth:2, //柱子粗细 barGap: '-160%', //不同系列的柱间距离 data: dataShadow, animation: false },{ name:seriesNames[1], type: 'bar', stack: 'Ad', //yAxisIndex: 0, //选用哪个Y轴 barWidth: 5, //柱子宽度 // barGap: '0%', //两个柱子间距 itemStyle: { barBorderRadius: 1, //柱子圆角 color: 'transparent' } },{ name:seriesNames[0], type: 'bar', stack: 'Ad', //yAxisIndex: 0, //选用哪个Y轴 barWidth: 5, //柱子宽度 // barGap: '0%', //两个柱子间距 itemStyle: { barBorderRadius: 10, //柱子圆角 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{offset: 0, color: '#E04D4E'}, {offset: 0.5, color: '#3791E0'}, {offset: 1, color: '#8D74F5'}] ) } }] }; |
最佳回答 |
||||
0
|
|