一、项目中要求实现的效果

注意：其实做出来是有个bug的，联动效果2中点击左右滑动时虽然选中了饼图对应的数据，但是阴影效果没有添加上去，因为添加了之后之前阴影效果无法清空导致阴影会一圈一圈加重，故先去掉了（此处希望有大神给出建议，怎么清掉饼图阴影）

二、实现代码及思路

思路：

联动效果1：点击饼状图时获取对应柱状图信息并刷新柱状图
联动效果2：点击时根据chart.interaction更改饼状图选中数据，并刷新柱状图

html代码

<!-- 饼图 -->
<div class="chart-wrapper-income2">
    <canvas id="expendMountNode2" class="mountNode2"></canvas>
</div>
<div id="slider">
    <div id="expendLeft" class="expend-left">
        <img src="./assets/image/xzhd.png" alt="">
    </div>
    <span id="expend-slider-word"></span>-历年对比
    <div id="expendRight" class="expend-right"> <img src="./assets/image/xyhd.png" alt=""></div>
</div>
<!-- 柱状图 -->
<div class="chart-wrapper-income3">
    <div class="yXiosName">万元</div>
    <canvas id="expendMountNode3" class="mountNode3"></canvas>
</div>

js部分代码（包含饼状图及柱状图的基础配置信息，效果如图所示）

注意：饼状图及柱状图显示的数据必须为number类型

	var chart5
    var selectlabel
    var barChart2Id
    let initExpendF2Chart = function(data){

        var pieChartData = []
        var arr = []
        barChart2Id = data.pieAndBarChart.barId
        data.pieAndBarChart.data.forEach(item => {
            pieChartData.push({
                const: 'const',
                name: item.name,
                value: Number(item.value),
                lndb: item.lndb
            })
            arr.push(item.name)
        });
        initPieChart(pieChartData, data.pieAndBarChart.pieId)
        initBarChart2(data.pieAndBarChart.data[0].lndb, barChart2Id)
        
        var n=0;
        //向右滑动
        $("#expendRight").click(function(){
            n++;
            if(n==arr.length){
              n=0;
            }
            //判断是否点击饼图，若点击，则按照点击的下一项进行跳转，若不是，则按顺时针进行跳转
            if(selectlabel != undefined){
                arr.forEach(function(e,i){
                  if (selectlabel == e){
                     if(i==arr.length-1){
                        n=0
                     }else{
                        n= i+1;
                     }
                  }
                })
                selectlabel = undefined; //清空手动选择的label
            }
            chart5.interaction('pie-select', {
                defaultSelected: pieChartData[n]
            })
            $("#expend-slider-word").text(arr[n]);
            initBarChart2(data.pieAndBarChart.data[n].lndb, data.pieAndBarChart.barId)
        })
    
        //向左滑动
        $("#expendLeft").click(function(){
            n--;
            if(n==-1){
              n=arr.length-1
            }
            //判断是否点击饼图，若点击，则按照点击的下一项进行跳转，若不是，则按顺时针进行跳转
            if(selectlabel != undefined){
                arr.forEach(function(e,i){
                if (selectlabel == e){
                    if(i==0){
                        n = arr.length - 1
                    }else{
                        n= i-1;
                    }
                }
              })
              selectlabel = undefined; //清空手动选择的label
            }
            chart5.interaction('pie-select', { 
                // defaultSelected: pieChartData[n]
            })
            $("#expend-slider-word").text(arr[n]);
            initBarChart2(data.pieAndBarChart.data[n].lndb, data.pieAndBarChart.barId)
        })
    }
  
    //饼图---------
    function initPieChart(data5, id){
        chart5 = new F2.Chart({
            id: id,
            pixelRatio: window.devicePixelRatio
          });
          chart5.source(data5);
          chart5.coord('polar', {
            transposed: true,
            radius: 0.9,
            innerRadius: 0.5
          });
          chart5.axis(false);
          chart5.legend(false);
          chart5.tooltip(false);
          chart5.guide().html({
            position: ['50%', '50%'],
            html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="value"></p>\n      </div>'
          });
          chart5.interval().position('const*value').adjust('stack').color('name', ['#fe6f3d', '#fec442', '#ff7c7c', '#ff9c5a','#efb08a']);
          chart5.pieLabel({
            sidePadding: 30,
            activeShape: true,
            inflectionOffset: 7,
            // label1OffsetY: -1,
            label2OffsetY: 2,
            label1: function label1(data) {
              return {
                text:  data.value+'%',
                fill: '#333333',
                fontWeight: 'bold'
              };
            },
            label2: function label2(data) {
              return {
                text: data.name,
                fill: '#333333'
              };
            },
            onClick: function onClick(ev) {  //饼图点击事件
              var data = ev.data;
              selectlabel = data.name;
              if(data==undefined){
                return;
              }
              $("#expend-slider-word").text(data.name);
              let curlndb = data5.find(item=>{
                return item.name == data.name
              })
              initBarChart2(curlndb.lndb, barChart2Id)
            }
          });
          chart5.render();
    }

    // 柱状图2----------
    function initBarChart2(data, id){
        var data6 = []
        data.forEach(item=>{
          data6.push({
            name: item.name,
            value: Number(item.value)
          })
        })
        var chart6 = new F2.Chart({
            id: id,
            pixelRatio: window.devicePixelRatio
        });
  
        chart6.source(data6, {
            value: {
                tickCount: 5
            }
        });
        chart6.tooltip({
            showItemMarker: false,
            onShow: function onShow(ev) {
                var items = ev.items;
                items[0].name = null;
                items[0].name = items[0].title;
                items[0].value = items[0].value;
            }
        });
        chart6.legend(false);
        chart6.interval().position('name*value').size(14).color('name', (name) => { // 通过回调函数
            if (name === '2021') {
                return 'l(270) 0:#FF591E 0.5:#ff762f 1:#FF9240';
            }
            return 'l(270) 0:#FEC442 0.5:#fed55f 1:#FFE477';
        });
        chart6.render();
    }