分享几个echarts复杂结构和图例字体中数字显示不同颜色

先看几个效果图：

function labor_security(labor,ecid="labor_security",font_size) {let labor_security = echarts.init(document.getElementById(ecid));/*清除画布*/labor_security.clear();let Data=[] ,zd_num1=[],zd_num2=[],zd_num3=[],zd_num4=[],ja_num1=[],ja_num2=[],ja_num3=[],ja_num4=[]for(i in labor){Data[i]=labor[i].quarter}for(k in labor[0].content){zd_num1[k]=Number(labor[0].content[k].zd_num)ja_num1[k]=Number(labor[0].content[k].ja_num)}for(k in labor[1].content){zd_num2[k]=Number(labor[1].content[k].zd_num)ja_num2[k]=Number(labor[1].content[k].ja_num)}for(k in labor[2].content){zd_num3[k]=Number(labor[2].content[k].zd_num)ja_num3[k]=Number(labor[2].content[k].ja_num)}if(labor.length>3){for(k in labor[3].content){zd_num4[k]=Number(labor[3].content[k].zd_num)ja_num4[k]=Number(labor[3].content[k].ja_num)}}/*交叉两个数组合并一个新数组*/function aryJoinAry(ary,ary2) {var itemAry=[];var minLength;//先拿到两个数组中长度较短的那个数组的长度if(ary.length>ary2.length){minLength=ary2.length;}else{minLength=ary.length;}//将两个数组中较长的数组记录下来var longAry=arguments[0].length>arguments[1].length?arguments[0]:arguments[1];//循环范围为较短的那个数组的长度for (var i = 0; i < minLength; i++) {//将数组放入临时数组中itemAry.push(ary[i]);itemAry.push(ary2[i])}//itemAry和多余的新数组拼接起来并返回。return itemAry.concat(longAry.slice(minLength));}let yData1=aryJoinAry(zd_num1,ja_num1)let yData2=aryJoinAry(zd_num2,ja_num2)let yData3=aryJoinAry(zd_num3,ja_num3)let yData4=aryJoinAry(zd_num4,ja_num4)let data = {xData: ['主动', '结案', '主动', '结案','主动', '结案','主动', '结案','主动', '结案','主动', '结案',],yData1: yData1,yData2: yData2,yData3: yData3,yData4: yData4,}var data3 = function() {var datas = [];for (var i = 0; i < yData1.length; i++) {datas.push(Number(yData1[i])+Number(yData2[i])+Number(yData3[i]));}return datas;}();/**双X轴标签对应，伪实现思路：底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可*/let option2 = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {top: 0,right: 20,itemWidth:10,itemHeight:10,textStyle:{color:"#fff",fontSize:font_size},data:Data},grid: [{top: "10%",bottom: "20%"},{height: "10%",bottom: "5%"}],toolbox: {show: true,feature: {dataView: {show: false,readOnly: false,//增加导出Excellang: ['数据视图', '关闭', '导出Excel'],contentToOption: function (opts) {$("#tableExcel_Day").table2excel({exclude: ".noExl", //过滤位置的 css 类名filename:  '表格' + ".xls", //文件名称name: "Excel Document Name.xls",exclude_img: true,exclude_links: true,exclude_inputs: true});},//头部颜色backgroundColor:"rgb(11, 79, 174,0.8)",//按钮颜色buttonColor:"#2a66b5",//按钮字体颜色buttonTextColor:'#fff',//表格背景颜色textareaBorderColor:"#2a66b5",//表格字体颜色textColor:'#fff',optionToContent: function (opt) {console.log(opt);var axisData = opt.xAxis[0].data; //坐标数据var series = opt.series; //折线图数据var tdHeads = '<td  style="padding:5px 10px">类型</td>';var tdBodys = ''; //表数据//组装表头var nameData = new Array('第一季度', '第二季度', '第三季度');for (var i = 0; i < nameData.length; i++) {tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';}var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';//组装表数据var tableCount = [];for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series[0].data[j] ; j++) {var temp = series[j].data[i];if (temp != null && temp != undefined) {tdBodys += '<td>' + temp+ '</td>';console.log(temp);if (tableCount[j]) {tableCount[j] +=temp;} else {tableCount[j] = temp;}} else {tdBodys += '<td></td>';}}table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';tdBodys = '';}console.log(tableCount);let heji=''for(k in tableCount){heji+='<td>'+tableCount[k]+'</td>'}table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';table += '</tbody></table>';// console.log(table);return table;}},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}},iconStyle: {borderColor: 'white'}},xAxis: [{type: 'category',data: data.xData,gridIndex: 0,axisLabel: {color: '#fff',fontSize: font_size,},axisLine: {lineStyle: {color: '#e7e7e7'}},axisTick: {show:false},zlevel: 2}, {type: 'category',gridIndex: 1,axisLine: {show: false},zlevel: 1}],yAxis: [{name:'单位(个)',nameTextStyle:{color:"#fff",fontSize:font_size,},type: 'value',gridIndex: 0,axisLabel: {color: '#fff',fontSize: font_size,},splitLine: {lineStyle: {type: 'dashed'}},axisLine: {lineStyle: {color: '#fff'}},axisTick: {lineStyle: {color: '#fff'}}},{// name:'单位(个)',// nameTextStyle:{//     color:"#fff",//     fontSize:font_size,// },type: 'value',gridIndex: 1,axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false},axisTick: {show: false}}],//动画加载时长为3秒animationDuration: 3000,series: [{name: '第一季度',nameTextStyle:{fontSize:font_size,},data: data.yData1,type: 'bar',stack: 'sum',barWidth:font_size,/*  label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#0073D9",fontSize:15,/*  color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '第二季度',nameTextStyle:{fontSize:font_size,},data: data.yData2,barWidth:font_size,type: 'bar',stack: 'sum',/*  label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#02B0CE",fontSize:15,/* color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '第三季度',nameTextStyle:{fontSize:font_size,},data: data.yData3,barWidth:font_size,type: 'bar',stack: 'sum',/* label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#1D6892",fontSize:15,/* color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '第四季度',nameTextStyle:{fontSize:font_size,},data: data.yData4,type: 'bar',stack: 'sum',barWidth:font_size,/*   label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#1D925D",fontSize:15,/*  color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{                               //新的一个柱子 注意不设stackname: '总数',type: 'bar',barGap: '-200%',         // 左移100%，stack不再与上面两个在一列label: {normal: {show: true, //显示数值position: 'top',       //  位置设为topformatter: '{c}',textStyle: { color: '#fff' } //设置数值颜色}},itemStyle: {normal: {color: 'rgba(128, 128, 128, 0)'  // 设置背景颜色为透明}},data: data3,},{data: [{name: '制造业',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},{data: [{name: '建筑业',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',xAxisIndex: 1,itemStyle: {normal: {color: "#073fa4"}},yAxisIndex: 1},{data: [{name: '批发零售业',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',xAxisIndex: 1,itemStyle: {normal: {color: "#073fa4"}},yAxisIndex: 1},{data: [{name: '住宿餐饮业',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},{data: [{name: '居民服务业',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},{data: [{name: '其他',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '16.666%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1}]};labor_security.setOption(option2)
}

                    var axisData = opt.xAxis[0].data; //坐标数据var series = opt.series; //折线图数据var tdHeads = '<td  style="padding:5px 10px">类型</td>';var tdBodys = ''; //表数据//组装表头var nameData = new Array('第一季度', '第二季度', '第三季度');for (var i = 0; i < nameData.length; i++) {tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';}var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';//组装表数据var tableCount = [];for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series[0].data[j] ; j++) {var temp = series[j].data[i];if (temp != null && temp != undefined) {tdBodys += '<td>' + temp+ '</td>';console.log(temp);if (tableCount[j]) {tableCount[j] +=temp;} else {tableCount[j] = temp;}} else {tdBodys += '<td></td>';}}table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';tdBodys = '';}console.log(tableCount);let heji=''for(k in tableCount){heji+='<td>'+tableCount[k]+'</td>'}table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';table += '</tbody></table>';// console.log(table);return table;}},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}},iconStyle: {borderColor: 'white'}},legend: {top: "30%",right: 20,itemWidth:15,itemHeight:15,textStyle:{color:"#fff",fontSize:font_size},data: ['新办劳动合同备案手册', '接触劳动合同数','续签劳动合同数','新签劳动合同数']},grid: [{top: "45%",bottom: "20%"},{height: "10%",bottom: "5%"}],xAxis: [{type: 'category',data: data2.xData,gridIndex: 0,axisLabel: {color: '#fff',fontSize: font_size},axisLine: {lineStyle: {color: '#e7e7e7'}},axisTick: {show:false},zlevel: 2}, {type: 'category',gridIndex: 1,axisLine: {show: false},zlevel: 1}],yAxis: [{name:'单位(个)',nameTextStyle:{color:"#fff",fontSize:font_size,},type: 'value',gridIndex: 0,axisLabel: {color: '#fff'},splitLine: {lineStyle: {type: 'dashed'}},axisLine: {lineStyle: {color: '#fff'}},axisTick: {lineStyle: {color: '#fff'}}},{// name:'单位(个)',// nameTextStyle:{//     color:"#fff",//     fontSize:font_size,// },type: 'value',gridIndex: 1,axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false},axisTick: {show: false}}],//动画加载时长为3秒animationDuration: 3000,series: [{name: '新办劳动合同备案手册',data: data2.yData1,type: 'bar',stack: 'sum',barWidth:font_size,/*  label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#2CCC44"/*  color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '接触劳动合同数',data: data2.yData2,barWidth:font_size,type: 'bar',stack: 'sum',/*  label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#C074F3"/* color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '续签劳动合同数',data: data2.yData3,barWidth:font_size,type: 'bar',stack: 'sum',/* label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#42B1CC"/* color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{name: '新签劳动合同数',data: data2.yData4,type: 'bar',stack: 'sum',barWidth:font_size,/*   label: {show: true,position: 'top',textStyle: {color: '#fff'}},*/itemStyle: {normal: {color:"#FFBC32"/*  color: (params) => {let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']return colors[params.dataIndex]}*/}},xAxisIndex: 0,yAxisIndex: 0},{data: [{name: '第一季度',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '25%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},{data: [{name: '第二季度',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '25%',xAxisIndex: 1,itemStyle: {normal: {color: "#073fa4"}},yAxisIndex: 1},{data: [{name: '第三季度',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '25%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},{data: [{name: '第四季度',value: 1}],label: {show: true,position: 'inside',formatter: '{b}',offset: [0,10],textStyle: {color: '#fff',fontSize:font_size}},type: 'bar',barGap: 0,barWidth: '25%',itemStyle: {normal: {color: "#073fa4"}},xAxisIndex: 1,yAxisIndex: 1},]
};
labor_contract.setOption(option4)

}

function unit_endowment_insurance(endowment,ecid="unit_endowment_insurance",font_size) {let unit_endowment_insurance = echarts.init(document.getElementById(ecid));let  color=["#2297FE","#FFB432","#655DFF","#7AFF2A","#25FFFC","#FF3232"];const data1 =endowmentconsole.log("机关",data1);let option3 = {legend: {// selectedMode: false, // 取消图例上的点击事件type: 'plain',orient: 'vertical',left: '60%',top: '10%',align: 'left',right:'50',itemGap: 20,itemWidth: Number(font_size), // 设置宽度itemHeight: Number(font_size), // 设置高度symbolKeepAspect: false,textStyle: {color: '#fff',fontSize: font_size,rich: {name: {verticalAlign: 'right',align: 'left',width: 35,fontSize: font_size},value: {align: 'left',color:'#3dbfd1',fontSize: font_size},}},data: data1.map(item => item.name),formatter: function(name) {let tip1 = "";let tip = "";let le = name.length  //图例文本的长度if(le > 15){   //几个字换行大于几就可以了let l = Math.ceil(le/15)  //有些不能整除，会有余数，向上取整for(let i = 1;i <= l;i++){ //循环if(i < l){ //最后一段字符不能有\ntip1 += name.slice(i*15-15,i*15)+'\n'; //字符串拼接}else if(i === l){  //最后一段字符不一定够9个tip = tip1 + name.slice((l-1)*15,le) //最后的拼接在最后}}if (data1 && data1.length) {for (var i = 0; i < data1.length; i++) {if (name === data1[i].name) {return (tip +':'+  '{value| ' +data1[i].value +'}'+'个')}}}}else{tip = name  //前面定义了tip为空，这里要重新赋值，不然会替换为空if (data1 && data1.length) {for (var i = 0; i < data1.length; i++) {if (name === data1[i].name) {return (tip +':'+  '{value| ' +data1[i].value +'}'+'个')}}}}}},toolbox: {show: true,feature: {dataView: {show: true,readOnly: false,//增加导出Excellang: ['数据视图', '关闭', '导出Excel'],contentToOption: function (opts) {$("#tableExcel_Day").table2excel({exclude: ".noExl", //过滤位置的 css 类名filename:  '表格' + ".xls", //文件名称name: "Excel Document Name.xls",exclude_img: true,exclude_links: true,exclude_inputs: true});},//头部颜色backgroundColor:"rgb(11, 79, 174,0.8)",//按钮颜色buttonColor:"#2a66b5",//按钮字体颜色buttonTextColor:'#fff',//表格背景颜色textareaBorderColor:"#2a66b5",//表格字体颜色textColor:'#fff',optionToContent: function (opt) {console.log(opt);var axisData =opt.legend[0].data; //坐标数据var series = opt.series[0].data; //折线图数据var tdHeads = '<td  style="padding:5px 10px">机关事业单位养老保险指标</td>';var tdBodys = ''; //表数据//组装表头var nameData = new Array('数量');for (var i = 0; i < nameData.length; i++) {tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';}var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';//组装表数据var tableCount = [];tdBodys1=[]for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series.length ; j++) {var temp = Number(series[j].value);if (temp != null && temp != undefined) {tdBodys1[j] = '<td>' + temp+ '</td>';console.log(temp);if (tableCount[j]) {tableCount[j] =temp;} else {tableCount[j] = temp;}} else {tdBodys1[j]= '<td></td>';}}table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys1[i] + '</tr>';tdBodys = '';}console.log(tableCount);let heji=0for(p in tableCount){if(tableCount[p]){heji +=Number(tableCount[p])}}heji=hejitable += '<tr><td style="padding: 5px 10px">合计：</td>' + '<td>' + heji+ '</td>'+ '</tr>';table += '</tbody></table>';// console.log(table);return table;}},// magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true,backgroundColor: '#073fa4f7'}},iconStyle: {borderColor: 'white'}},series: [{name: '数量',type: 'pie',color:color,radius: ['60%', '80%'],center: ['30%', '50%'],data: data1,label: {normal: {show: false,position: 'inside',formatter: '{c}',},emphasis: {show: true,textStyle: {fontSize:font_size}}},labelLine: {normal: {show: true}}}]};unit_endowment_insurance.on('click', function (params) {console.log(params);let that=vm.$datathat.name = params.name;console.log(params.name);that.head="机关事业单位养老保险指标数据"//弹窗$('#goodcover').show();$('#middle_tab').fadeIn();//动态加载弹窗距离that.echarts_left=1200that.dt_left = 1690;that.dt_map=2270;//锁定表格that.table = true;//    请求接口$.ajax({type: 'GET',url:ajax_url,data: {model_id:54,},dataType: 'JSON',success: function (res) {console.log("机关事业单位养老保险指标数据",res);let head_title=[];fields = res.field;for (key in fields) {head_title.push({label:fields[key],property:key})}that.head_title_total=[{label:"指标名称",property:"zbmc"},{label:"考核标准",property:"khbz"},{label:"发布时间",property:"addtime"},]let content = {content:res.data};console.log(head_title)that.title=head_titlethat.goodtxt=contentthat.model_id=54},error: function () {}});});unit_endowment_insurance.setOption(option3)
}

    function personnel_arbitration(personnel,ecid="personnel_arbitration",font_size) {let personnel_arbitration = echarts.init(document.getElementById(ecid));/*清除画布*/personnel_arbitration.clear();var xData = [],yData1 = [],yData2 = [],yData3 = [],yData4 = [],yData5 = [],borderData = [],legend = ["受理案件件数", "当期不予受理案件数", "结案数","涉案金额", "当期结案率"],colorArr = [{start: "rgba(0, 234, 255,",end: "rgba(0, 234, 255)"},{start: "rgba(2, 176, 206,",end: "rgba(2, 176, 206)"},{start: "rgba(29, 104, 146,",end: "rgba(29, 104, 146)"},{start: "rgba(255, 176, 63,",end: "rgba(255, 176, 63)"},{color: "#6BBB2D"}];for(i in personnel){xData[i]=personnel[i].quarteryData1[i]=Number(personnel[i].content[0].num)yData2[i]=Number(personnel[i].content[1].num)yData3[i]=Number(personnel[i].content[2].num)yData4[i]=Number(personnel[i].content[3].num)yData5[i]=Number(personnel[i].content[4].num)}var normalColor = "#fff";//   var fontSize = 20;let seriesData = [];// var borderHeight = 4;xData.forEach(element => {// borderData.push(borderHeight);});[yData1, yData2, yData3, yData4,yData5].forEach((item, index) => {var obj1 = {};var obj2 = {};if (index < 4) {obj1 = {name: legend[index],type: "bar",stack: legend[index],data: item,barWidth: "15%",itemStyle: {normal: {fontSize: font_size/2,color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: colorArr[index].start + "1)"},{offset: 0.5,color: colorArr[index].start + "1)"},{offset: 1,color: colorArr[index].end}],globalCoord: false},label: {show: true, //开启显示position: 'inside', //在上方显示textStyle: { //数值样式color: '#fff',fontSize: font_size}}}}};obj2 = {name: "",type: "bar",stack: legend[index],itemStyle: {normal: {color: colorArr[index].start + "1)",}},data: borderData};seriesData.push(obj1);seriesData.push(obj2);} else {var obj3 = {name: legend[index],type: "line",yAxisIndex: 1,smooth: false,symbol: "circle",symbolSize: 10,lineStyle: {normal: {width: 2}},itemStyle: {normal: {color: colorArr[index].color,borderColor: "#fff",borderWidth: 1}},data: item,label: {normal: {show: false}}};seriesData.push(obj3);}});console.log(seriesData);let  option = {grid: {left: "8%",top: "20%",right: "20",bottom: "2%",containLabel: true},toolbox: {show: true,feature: {dataView: {show: true,readOnly: false,//增加导出Excellang: ['数据视图', '关闭', '导出Excel'],contentToOption: function (opts) {$("#tableExcel_Day").table2excel({exclude: ".noExl", //过滤位置的 css 类名filename:  '表格' + ".xls", //文件名称name: "Excel Document Name.xls",exclude_img: true,exclude_links: true,exclude_inputs: true});},//头部颜色backgroundColor:"rgb(11, 79, 174,0.8)",//按钮颜色buttonColor:"#2a66b5",//按钮字体颜色buttonTextColor:'#fff',//表格背景颜色textareaBorderColor:"#2a66b5",//表格字体颜色textColor:'#fff',optionToContent: function (opt) {console.log(opt);let opt_num=[]for(key in opt.series){if(key%2===0){opt_num.push(opt.series[key])}}console.log(opt_num);var axisData = opt.xAxis[0].data; //坐标数据var series = opt_num; //折线图数据var tdHeads = '<td  style="padding:5px 10px">季度</td>';var tdBodys = ''; //表数据//组装表头var nameData = new Array("受理案件件数", "当期不予受理案件数", "结案数","涉案金额", "当期结案率");for (var i = 0; i < nameData.length; i++) {tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';}var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';//组装表数据var tableCount = [];for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series.length ; j++) {var temp = series[j].data[i];if (temp != null && temp != undefined) {tdBodys += '<td>' + temp+ '</td>';console.log(temp);if (tableCount[j]) {tableCount[j] +=temp;} else {tableCount[j] = temp;}} else {tdBodys += '<td></td>';}}table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';tdBodys = '';}console.log(tableCount);let heji=''for(k in tableCount){heji+='<td>'+tableCount[k]+'</td>'}table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';table += '</tbody></table>';// console.log(table);return table;}},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true,backgroundColor: '#073fa4f7'}},iconStyle: {borderColor: 'white'}},legend: {show: true,icon: "rect",itemWidth: Number(font_size),itemHeight: Number(font_size),x: 'center',textStyle: {color: "#fff",fontSize:font_size,},data: legend},tooltip: {trigger: "axis",textStyle: {fontSize:font_size,},formatter: function(params) {var str = "";for (var i = 0; i < params.length; i++) {if (params[i].seriesName !== "") {str +=params[i].name +":" +params[i].seriesName +params[i].value +"<br/>";}}return str;}},xAxis: [{type: "category",data: xData,axisPointer: {type: "shadow"},axisLabel: {textStyle: {color: normalColor,fontSize: font_size}},axisLine: {lineStyle: {color: normalColor}},axisTick: {show: false},splitLine: {show: false}}],yAxis: [{type: "value",name: "万元",position: 'left',nameTextStyle: {color: normalColor,fontSize: font_size},// "min": 0,// "max": 50,axisLabel: {formatter: "{value}",textStyle: {color: normalColor,fontSize: font_size}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false,lineStyle: {type: "dashed",color: normalColor}}},{type: "value",name: "件数",offset: 80,position: 'left',nameTextStyle: {color: normalColor,fontSize: font_size},// "min": 0,// "max": 50,axisLabel: {formatter: "{value}",textStyle: {color: normalColor,fontSize: font_size}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false,lineStyle: {type: "dashed",color: normalColor}}},{type: "value",name: "%",position: 'right',nameTextStyle: {color: normalColor,fontSize: font_size},min: 0,max: 100,show:true,axisLabel: {formatter: "{value}",textStyle: {color: normalColor,fontSize: font_size}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: true,lineStyle: {type: "dashed",color: "rgba(255,255,255,0.2)"}}}],//动画加载时长为3秒animationDuration: 3000,series: seriesData};personnel_arbitration.on('click', function (params) {console.log(params);let that=vm.$datathat.name = params.name;console.log(params.name);that.head="劳动人事争议仲裁情况"//弹窗$('#goodcover').show();$('#middle_tab').fadeIn();//动态加载弹窗距离that.echarts_left=1200that.dt_left = 1690;that.dt_map=2270;//锁定表格that.table = true;//    请求接口$.ajax({type: 'GET',url:ajax_url,data: {model_id:51,},dataType: 'JSON',success: function (res) {console.log("劳动人事",res);let head_title=[];fields = res.field;for (key in fields) {head_title.push({label:fields[key],property:key})}that.head_title_total=[{label:"季度",property:"jidu"},{label:"受理案件数",property:"slajs"},{label:"结案数",property:"jieanshu"},]console.log(that.head_title_total);let content = {content:res.data};console.log(head_title)that.title=head_titlethat.goodtxt=contentthat.model_id=51},error: function () {}});});personnel_arbitration.setOption(option)}

分享几个echarts复杂结构和图例字体中数字显示不同颜色相关推荐

Echarts数据可视化legend图例，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
使用Echarts饼图时将图例图标变成圆形
使用Echarts饼图时将图例图标变成圆形在echarts官方实例里,图例都是方形,今天碰到需求,需要是圆形图标,在此记录一下直接在legend中设置 icon:'circle' legend: ...
echarts地图不显示图例
如果你的 echarts 地图不显示图例,可能是以下几个原因导致的: 没有启用图例.在配置项中,可以使用 legend.show 属性来控制是否显示图例.如果将其设置为 false,则不会显示图例. ...
echarts图表设置关于图例legend，限制图例可点击时最少保留显示一个图例
echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例 echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例,亲测有效: 代码如下: // 初始化 ...
好程序员Python培训分享Python系列之分支结构
好程序员Python培训分享Python系列之分支结构,应用场景:迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种代码结构通常称之为顺序结构.然而仅有顺序结构并不能解决所有的问题,比如 ...
【唠叨两句】如何将一张树型结构的Excel表格中的数据导入到多张数据库表中...
小弟昨天遇到一个相对比较棘手的问题,就像标题说的那样.如何将一张树型结构的Excel表格中的数据导入到多张数据库表中,在现实中实际是七张数据库表,这七张表之间有着有着相对比较复杂的主外键关系,对于我这 ...
解决王爽写的汇编语言的第七个验七- 寻址方式在结构化数据访问中的应用
原文: 汇编语言-(第三版) 王爽-著 (实验七) 寻址方式在结构化数据访问中的应用 https://www.52pojie.cn/thread-1241289-1-1.html (出处: 吾爱破解论 ...
R语言ggplot2可视化增大图例字体实战
R语言ggplot2可视化增大图例字体实战目录 R语言ggplot2可视化增大图例字体实战 #ggplot2可视化增大图例字体(小号字
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...

分享几个echarts复杂结构和图例字体中数字显示不同颜色

分享几个echarts复杂结构和图例字体中数字显示不同颜色相关推荐

最新文章

热门文章