let dataAll= [ { value: "1", name: "惠及企业" }, { value: "1", name: "惠及人员" }, { value: "1", name: "资金" }, ] let wwDate = [ { value: "11", name: "今年数据" }, { value: "22", name: "去年数据" }, ] const that = this; let falgindexont = 0; option = { backgroundColor:'#031a47', tooltip: { show: true, trigger: "item", backgroundColor: "rgba(14,45,103,0.7)", // 提示框浮层的背景颜色。 borderColor: "#333", // 提示框浮层的边框颜色。 borderWidth: 0, // 提示框浮层的边框宽。 padding: 8, // 提示框浮层内边距， textStyle: { color: "#fff" //设置文字颜色 }, formatter: function (parms) { let res = '' res = `

${parms.name}

今年数据

${wwDate[0].value} 万人

去年数据

${wwDate[1].value} 万人

` return res }, position: function (point) { // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下 // 提示框位置 var x = 0; // x坐标位置 var y = 0; // y坐标位置 // 当前鼠标位置 var pointX = point[0]; var pointY = point[1]; // 外层div大小 // var viewWidth = size.viewSize[0]; // var viewHeight = size.viewSize[1]; // 提示框大小 // var boxWidth = size.contentSize[0]; // var boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左边放不下提示框 // 左边放的下 x = pointX; // boxHeight > pointY 说明鼠标上边放不下提示框 // 上边放得下 y = pointY; return [x, y]; }, }, legend: { padding: [0, 0, 40, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离] data: ["今年数据", "去年数据"], orient: 'horizontal', x: 'center', y: 'bottom', itemWidth: 10, itemHeight: 10, textStyle: { color: "#fff", fontSize: "12", }, }, color: ["#0091ff", "#1bfd84"], series: [ { name: "", type: "pie", center: ["50%", "40%"], radius: ["20%", "60%"], data: dataAll, label: { show: true, position: 'inside', rotate:'tangential', // formatter: '{b}{c}', textStyle: { color: '#b8cff0', fontSize:11 }, emphasis: { show: true, textStyle: { color: '#50b8ef', fontSize:13 }, } }, itemStyle: { borderColor: '#0262b5', borderWidth: 2, color: '#023c69' }, }, { type: "pie", color: '#014e8b', silent: true, clockwise: true, radius: ["53%", "54%"], center: ["50%", "40%"], label: { show: false, }, labelLine: { show: false, }, data: [0], }, { type: "pie", color: '#014e8b', silent: true, clockwise: true, radius: ["11%", "20%"], center: ["50%", "40%"], label: { show: false, }, labelLine: { show: false, }, data: [0], }, { name: "", type: "pie", clockWise: false, // 顺时加载 hoverAnimation: false, // 鼠标移入变大 center: ["50%", "40%"], radius: ["70%", "85%"], data: wwDate, tooltip: { show: false, }, label: { show: false, }, }, ], } let zl = []; myChart.on("mouseover", function (a) { let falgindex = 0; if (a.name === '资金') { falgindex++; zl = [{ value: "22", name: "今年数据" }, { value: "20", name: "去年数据" }]; } else if (a.name === "惠及企业") { falgindex++; zl = [{ value: "4", name: "今年数据" }, { value: "56", name: "去年数据" }]; } else if (a.name === "惠及人员") { falgindex++; zl = [{ value: "33", name: "今年数据" }, { value: "45", name: "去年数据" }]; } else { zl = []; } const bjlAll = []; zl.forEach((element) => { bjlAll.push({ name: element.name, value: element.value, }); }); if (falgindex === 1) { // that.getCareer(zl); } }); myChart.on("mouseout", function () { falgindexont++; if (falgindexont === 1) { // that.getCareer(that.wwDate); } });

切换饼图数据