Echarts 多图表共用legend
// 参考地址:https://www.isqqw.com/echartsdetail?id=31404
//加载数据 function LoadDataX() { GetApiDataSync2("url" , 'POST' , { annual: 2022 } , function (result) { if (result.Success) { setMap(result.data, "map1","line");//使用折线 } }, true ); } function LoadData() { GetApiDataSync2("url" , 'POST' , { annual:2022 } , function (result) { if (result.Success) { setMap(result.data, "map2","bar");//柱状图 } }, true ); } function setMap(data,chartid,type) { var x_data = []; var legendData = []; var selected = {}; var seriesData = []; avalon.each(data, function (index, el) { legendData.push(el.name); selected[el.name] = index < 2; var leftdata = [], rightdata = []; avalon.each(el.children, function (idx, item) { if (index === 0) { x_data.push(item.name); } leftdata.push(item.dfje); rightdata.push(item.corpnum); }); seriesData.push({ name: el.name, type: type, xAxisIndex: 0, yAxisIndex: 0, data: leftdata }); seriesData.push({ name: el.name, type: type, xAxisIndex: 1, yAxisIndex: 1, data: rightdata }); }); /* var dataAll = { "leftdata": { //leftdata "y_data": leftdata, "total": 8000 }, "rightdata": { //rightdata "y_data": rightdata, "total": 8000 }, "x_data": x_data }; */ var markLineOpt = { animation: false, label: { normal: { //formatter: 'y = 0.5 * x + 3', textStyle: { align: 'right' } } }, lineStyle: { normal: { type: 'solid' } }, tooltip: { //formatter: 'y = 0.5 * x + 3' }, data: [ [{ coord: [0, 3], symbol: 'none' }, { coord: [20, 13], symbol: 'none' }] ] }; var markxAxis = function (len) { var Axis = []; for (var i = 0; i < len; i++) { Axis.push(createxAxis(x_data,i)); } return Axis; }; var markyAxis = function (len) { var Axis = []; for (var i = 0; i < len; i++) { Axis.push(createyAxis(i)); } return Axis; }; option = { title: [{ top: '0%', x: '25%', textStyle: { fontSize: 14, color:"#fff" }, textAlign: 'center', text: '投入金额' }, { x: '75%', textStyle: { fontSize: 14, color: "#fff" }, textAlign: 'center', top: '0%', text: '覆盖企业' }], grid: [{ left: '3%', top: '20%', width: '45%', //height: '20%' }, { left: '53%', top: '20%', width: '45%', //height: '20%' } ], legend: { data: legendData, selected: selected, top: '', left: 'center', textStyle: { color: '#fff', fontSize: 12, }, }, tooltip: { show: 'true', trigger: "axis", axisPointer: { type: "cross" }, }, xAxis: markxAxis(2), yAxis: markyAxis(2), series: seriesData }; var chartDom = document.getElementById(chartid); if (chartDom) { var myChart = echarts.init(chartDom); option && myChart.setOption(option,true); } } function createxAxis(data, gridIndex) { return { data: data, gridIndex: gridIndex , axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: "#7B7F9C", // width: 1, //type: 'dashed', }, }, splitLine: { show: false, interval: 'auto', lineStyle: { color: ['#502297'], //type: 'dashed', }, }, axisTick: { show: false, //隐藏X轴刻度 alignWithLabel: true, }, axisLabel: { show: true, textStyle: { color: '#FFFFFF', //X轴文字颜色 fontSize: 12, }, margin: 12, interval: 0, rotate: 30, /* formatter: function (value) { if (value.length > 3) { return value.substring(0, 3); } return value; }, */ }, } } function createyAxis(gridIndex) { return { type: 'value', gridIndex: gridIndex, name: '单位:万元', nameTextStyle: { color: "#00b09b", fontSize: 12, }, splitLine: { show: true, interval: 'auto', lineStyle: { color: '#2D3A52' }, }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#7b7f9c', }, }, axisLabel: { show: true, textStyle: { color: '#FFFFFF', fontSize: 12, }, }, } }