/* 数据 */ // 饼图 const pieName = ["常任职教师", "常任教职"]; // 类型 const pieValue = [648, 324]; // 数量 // 柱状图 const barName = ["正高级", "副高级", "中级", "初级", "其他", "正高级", "初级", "其他"]; // 类型 const barValue = [150, 120, 100, 180, 98, 124, 100, 100]; // 数量 const barNum = [5, 3]; // 柱子数量 /* 容器渲染 */ // EUI.include("vfs/root/echarts/echarts5.js"); // var chartDom = document.getElementById('HHH17'); // var myChart = echarts.init(chartDom); /* 数据整合 */ let pieData = []; // 饼图数据 let barData = []; // 柱状图数据 let currentIndex = 0; // 当前岗位下标 const colorPie = ["#73A0FB", "#73DEB4", "#2F467A", "#FACA42", "#F98973"];// 饼图颜色系列 pieName.map((item, index) => { // 饼图数据整合 pieData.push({ name: item, value: pieValue[index] }) // 柱状图数据整合 let list = []; for (let i = currentIndex; i < currentIndex + barNum[index]; i++) { list.push({ name: barName[i], value: barValue[i], }) } currentIndex += barNum[index] barData[item] = list }) /* 函数 */ // 数字分割：1653 => 1,653 const formatNum = (value) => { if (!value && value !== 0) return 0; let str = value.toString(); let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; return str.replace(reg, "$1,"); } //获取当前类型的柱状图数据 const getBarData = (type) => { return barData[type] }; // 获取当前类型x轴数据 const getXData = (type) => { let list = barData[type]; return list.map(item => item.name) } /* 当前数据 */ // 柱状图当前数据 let currentBarData = getBarData(pieName[0]); // 当前类型 let currentType = pieName[0] // 当前x轴数据 let xData = getXData(pieName[0]); // 当前柱子颜色 let barColor = colorPie[0] /* series整合 */ let seriesData = []; // 饼图 seriesData.push({ name: "pie", id: "pie", type: "pie", left: "16", top: "center", width: "35%", color: colorPie, label: { show: false }, itemStyle: { borderColor: "#fff", borderWidth: 2 }, radius: ['80%', '100%'], data: pieData, tooltip: { formatter: params => { let pieColor = params.color; return `

${params.name}

${formatNum(params.value)}人${params.percent}%

` }, } }); // 柱状图 seriesData.push({ name: "bar", id: "bar", type: "bar", data: currentBarData, itemStyle: { color: barColor, borderRadius: [2, 2, 0, 0] }, barWidth: 12, tooltip: { formatter: params => { let pieColor = params.color; return `

${params.name}

${formatNum(params.value)}人

` }, } }) option = { grid: { left: "40%", right: "16", bottom: "16", containLabel: true, }, title: { text: `{bm| ${currentType}}{txt|职称级别分布}`, textStyle: { rich: { bm: { color: 'rgba(151, 30, 35, 1)', fontFamily: 'Source Han Sans CN-Regular', fontSize: 14, }, txt: { color: 'rgba(0, 0, 0, 0.85)', fontFamily: 'Source Han Sans CN-Regular', fontSize: 14, padding: [0, 0, 0, 8] } } }, backgroundColor: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgba(151, 30, 35, 0.2)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(151, 30, 35, 0)' // 100% 处的颜色 }], global: false // 缺省为 false }, left: "40%", top: 0 }, graphic: [ { type: 'image', top: "center", left: "39%", style: { image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAOhJREFUOE9jZGBgYJgho6Sa8eTebRCbWMAIUjhdTnkHw3+GU8KP7zaGMTD8JUYzQiMDgzsDA8MDhv8MjZmP7y4gpBldI0z9Psb//xozHt8/hMsAXBph6uew/GVsTH165wm6AYQ0gtT/ZGRgbMx4dKcdWTMxGmHqr//7z9CY/fjuSpAAKRohBvxnaM18fLeGeI2MDMuZmf83pN27d4soG/8z/j/JwMDYmPXw7nbi/MjI8Po/WMOdqdiiBKtT/zP+7/vDytSYd+fOJ6LikZGRYcNfRqbG7Ae3LxCdchgZ/8/KeHhvHSENMHkAvNRhD4R/LDUAAAAASUVORK5CYII=" } }, { type: "group", x: 16, top: 6, children: [ { type: "text", silent: true, // 不响应鼠标 top: 'middle', left: 0, style: { text: "常任职教师数量", font: '12px "Source Han Sans CN-Regular"', fill: "rgba(0, 0, 0, 1)", } }, { type: "text", silent: true, // 不响应鼠标 top: 'middle', left: 92, style: { text: pieValue[0] + "人", font: '16px "HarmonyOS Sans-Medium"', fill: "rgba(151, 30, 35, 1)", } }, ] }, { type: "group", x: 16, top: 22, children: [ { type: "text", silent: true, // 不响应鼠标 left: 0, top: 32, style: { text: "常任教职人数", font: '12px "Source Han Sans CN-Regular"', fill: "rgba(0, 0, 0, 1)" } }, { type: "text", silent: true, // 不响应鼠标 left: 92, top: 30, style: { text: pieValue[1] + "人", font: '16px "HarmonyOS Sans-Medium"', fill: "rgba(151, 30, 35, 1)" } } ] }, ], tooltip: { trigger: 'item', axisPointer: { type: 'none' }, position: function (point, params, dom, rect, size) { // 提示框位置 let x = 0; let y = 0; // 提示框位置 if (point[0] + size.contentSize[0] < size.viewSize[0]) { x = point[0] } else if (point[0] > size.contentSize[0]) { x = point[0] - size.contentSize[0] } else { x = "30%" } if (point[1] > size.contentSize[1]) { y = point[1] - size.contentSize[1] } else if (point[1] + size.contentSize[1] < size.viewSize[1]) { y = point[1] } else { y = "30%" } return [x, y]; }, extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;' }, xAxis: { type: 'category', data: xData, axisTick: { show: false //隐藏X轴刻度 }, axisLine: { lineStyle: { color: "#CCCCCC" } }, axisLabel: { show: true, color: 'rgba(0,0,0,0.65)', fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', }, }, yAxis: [{ type: 'value', name: "单位：人", nameTextStyle: { color: 'rgba(0,0,0,0.65)', fontSize: 14, fontFamily: 'Source Han Sans CN-Regular', align: "left", verticalAlign: "center", }, boundaryGap: ['0%', '20%'], axisLabel: { fontSize: 14, color: 'rgba(0,0,0,0.65)', fontFamily: 'HarmonyOS Sans-Regular', }, axisLine: { show: false, }, axisTick: { show: false }, splitLine: { lineStyle: { color: 'rgba(223, 223, 223, 1)', type: "dashed", } } }], series: seriesData }; // option && myChart.setOption(option); // 事件 myChart.on("mouseover", "series.pie", (param) => { console.log(param) let index = param.dataIndex; // 改变当前数据 currentType = pieName[index]; currentBarData = getBarData(pieName[index]); xData = getXData(pieName[index]); barColor = colorPie[index]; // 改变option myChart.setOption({ title: { text: `{bm| ${currentType}}{txt|职称级别分布}`, }, xAxis: { data: xData }, series: [{ id: 'bar', data: currentBarData, itemStyle: { color: barColor, }, }], }); })

饼图联动柱状图