echarts饼图与折线图联动点击饼图，折线图随其改变给饼图的图例设置格式化

<template>
  <div class="Mymodule">
    <div class="midWrap" id="lines" style="width: 536px; height: 256px"></div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts');
// 引入折线图和饼图组件
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
// 引入提示框和title等组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/component/grid');
require('echarts/lib/component/title');
export default {
  name: 'Myfooter',
  data() {
    return {
      //x轴的数据
      datax: ['周一', '周二', '周三', '周四', '周五'],
      // 给折线图渲染的数据
      sources: [
        ['合', 5, 6, 7, 8, 9],
        ['宽', 9, 4, 6, 8, 7],
        ['其', 3, 3, 5, 7, 9],
        ['视', 8, 4, 6, 7, 9],
        ['流', 2, 9, 3, 6, 7],
      ],
      // 饼图的数据
      datapie: [
        { value: 35, name: '合' },
        { value: 34, name: '宽' },
        { value: 27, name: '其' },
        { value: 34, name: '视' },
        { value: 27, name: '流' },
      ],
      // 图例名称
      dataLegend: ['合', '宽', '其', '视', '流'],
    
    };
  },
  computed: {},
  mounted() {
    this.drawLine();
    // this.getCurrentTime();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let da = this.datapie;
      let sou = this.sources;
      let datax = this.datax;
      let myChart = echarts.init(document.getElementById('lines'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          // showContent: true
        },
        dataset: {
          source: this.sources,
        },
        title: [
          {
            subtext: '量\n占比', //副标题
            left: '15%',
            top: '36%',
            textAlign: 'center',
            subtextStyle: {
              fontSize: 12,
              color: 'rgba(0,0,0,.65)',
            },
          },
        ],
        // 饼图的图例
        legend: {
          itemWidth: 8,//图例的图标直径，圆点的直径大小
          itemGap: 20,
          icon: 'circle',
          top: 'bottom',
          bottom: 0,
          left: 'left',
          padding: [0, 20],
          textStyle: {
            color: 'rgba(0,0,0,.65)',
          },
          //图例的格式化
          formatter: name => {
            // 计算总量
            let p1, p2;
            function countTotal(arr, keyName) {
              let $total = 0;
              $total = arr.reduce(function(
                total,
                currentValue,
                currentIndex,
                arr,
              ) {
                return currentValue[keyName]
                  ? total * 1 + currentValue[keyName] * 1 //转换为number类型
                  : total * 1;
              },
              0);
              return $total;
            }
            let total = countTotal(da, 'value');
            for (let i in da) {
              if (da[i]['name'] == name) {
                let da1 = da[i]['value'];
                //  百分比小数
                let da2 = ((da1 / total) * 100).toFixed(2);
                p1 = da2 + '%';
                p2 = da[i]['value'];
              }
            }
            return name + '\t' + p2 + '\t ' + p1;
            // return name
          },
          data: this.dataLegend,
        },
        grid: {
          top: '6%',
          left: '32%',
          right: '3%',
          bottom: '26%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false, //默认值为true,false时标尺在中间
            data: datax,
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,.3)',
              },
            },
            axisTick: {
              alignWithLabel: true, //使刻度与折线点对齐
            },
            // x轴网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.1)',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,.3)',
              },
            },
            axisTick: {
              length: 0, //刻度线长度
            },
          },
        ],
        series: [
          {
            name: '合',
            type: 'line',
            id: 'line',
            data: [], //初始化折线图
            symbol: 'circle', //使点变实心，symbol符合、标志；circle圆形
            symbolSize: 8,
            // 折线图提示框
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br />{a}量 {c}',
              backgroundColor: '#fff',
              borderColor: 'rgba(0,0,0,.45)',
              color: 'rgba(0,0,0,.45)',
              borderWidth: 0,
              padding: [6, 12],
              textStyle: {
                color: 'rgba(0,0,0,.65)',
                fontSize: 12,
                align: 'left',
                lineHeight: 20,
              },
              extraCssText: 'box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);',
            },

            encode: {
              x: [0],
            },
          },
          // pie图
          {
            type: 'pie',
            hoverOffset: 5,
            hoverAnimation: true, //开启放大效果
            radius: ['45%', '63%'], //radius半径
            center: ['16%', '48%'],
            top: 22,
            bottom: 40,
            data: this.datapie,
            selectedOffset: 4, //选中时偏移的距离
            selectedMode: 'single', //单选，点击向外偏移
            tooltip: {
              trigger: 'item',
              formatter: '{b}占比：{d}%',
              backgroundColor: 'rgba(255,255,255,.8)',
              borderColor: 'rgba(0,0,0,.45)',
              color: 'rgba(0,0,0,.45)',
              borderWidth: 0,
              padding: 6,
              textStyle: {
                color: 'rgba(0,0,0,.65)',
                fontSize: 12,
              },
              extraCssText: 'box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);',
            },
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 0.6,
                label: {
                  show: false,
                  // formatter: '{b}： {d}%',
                },
                labelLine: {
                  show: false,
                  smooth: 0.2,
                  length: 0,
                  length2: 16,
                },
              },
            },
            // 是否显示标签label
            emphasis: {
              label: {
                show: false,
              },
            },
          },
        ],
      });

      myChart.on('click', function(e) {
        var a1 = e.name;
        for (let i in sou) {
          var sou1 = sou[i];
          for (let j in sou1) {
            //  console.log(sou1);
            var sou2 = sou1[0];
            if (a1 == sou2) {
              //获取除第一项以外的其余项
              var dimension = sou1.slice(1);
              // console.log(dimension);
              myChart.setOption({
                series: {
                  type: 'line',
                  label: {
                    formatter: '{b}: ({d}%)',
                  },
                  data: dimension,
                  name: sou1[0],
                  tooltip: {
                    formatter: function(e) {
                      var na = e.seriesName;
                      return e.name + '<br/>' + na + '量&nbsp;' + e.value;
                    },
                  },
                },
              });
            }
          }
        }
      });
    },
  },
};
</script>

<style>

</style>

2.效果图