vue echarts柱状图圆饼联动

  <div>
    <!-- 2. 饼状图Dom -->
    <div id="main1" style="width: 800px; height: 500px"></div>
    <!-- 3. 饼状图Dom -->
    <div id="main2" style="width: 800px; height: 500px"></div>
  </div>
</div>

export default {

  name: "echarts",
  components: {
    comButton
  },
  data () {
    return {
      echartsData: echartsData,
      moneyUnit: '笔',
      myChart: null,
      cssColor: ['#086fa7']
    };
  },
  created () { },
  mounted () {
    window.addEventListener("resize", this.resize)
    this.drawChart()
  },
  methods: {
    goback () {
      window.history.go(-1);
    },

    drawChart () {
      const builderJson = {
        all: 10887,
        components: {
          "澳元": 2739,
          "日元": 2744,
          "港币": 2466,
          "美元": 3034,
          "人民币": 1945
        },
        ie: 9743
      };

      // 指定饼状图图表的配置项和数据
      let option1 = {
        // 图表标题
        title: {
          text: '某站点用户访问来源',  // 标题内容
          subtext: '纯属虚构',
          x: 'center'                 // 居中显示
        },
        // 鼠标触发提示
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"  // 展示格式
        },
        graphic: [
          { //设置饼状图内部文字
            type: 'text',
            left: 'center', //设置偏移量
            top: '40%',
            style: {
              text: `${builderJson.all}\n境内结算量`,
              x: 100,
              y: 100,
              textAlign: 'center',
              fill: '#89D4ED',
              width: 200,
              height: 200,
              textFont: 'bold 20px verdana'
            }
          }
        ],
        // 图例
        legend: {
          orient: 'vertical',    // 垂直显示
          x: 'left',             // 显示位置--左上
          data: Object.keys(builderJson.components),
        },
        // calculable: true,
        series: [
          {
            // name: '访问来源',
            type: 'pie',
            radius: ['30%', '40%'],
            center: ['50%', 225],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // },
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: (item) => {
                  console.log(item)
                  return `${item.value}\n${item.name}`
                },
                align: 'center',
                color: '#000',
                verticalAlign: 'middle',
                // 此处重点，字体大小设置为0
                textStyle: {
                  fontSize: 24,
                },
              },
              emphasis: {//中间文字显示
                // show: true,
                label: {
                  show: true,
                  rich: {
                    percent: {
                      fontSize: 32,
                      color: '#fff',
                    },
                    sexName: {
                      fontSize: 16,
                      color: '#ccc',
                    },
                  },
                },
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              },
              tooltip: {
                show: false
              }
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: builderJson.components[key]
              };
            }),
          }
        ]
      };
      let option2 = {
        // 图表标题
        title: {
          text: '某站点用户访问来源',  // 标题内容
          subtext: '纯属虚构',
          x: 'center'                 // 居中显示
        },
        // 鼠标触发提示
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"  // 展示格式
        },
        // 图例
        legend: {
          orient: 'vertical',    // 垂直显示
          x: 'left',             // 显示位置--左上
          data: Object.keys(builderJson.components),
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', 225],
            data: Object.keys(builderJson.components).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: builderJson.components[key]
              };
            })
          }
        ]
      };

      // 指定柱状图图表的配置项和数据
      let option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 指示器类型，shadow为阴影指示器
            type: 'shadow'
          }
        },
        legend: {
          data: Object.keys(builderJson.components),
        },
        calculable: true,
        xAxis: [
          {
            type: 'value',
            show: false,
            // axisLabel: {
            //   show: false
            // },
            // splitLine: {
            //   show: false
            // }
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: { // y轴
              show: false
            },
            data: Object.keys(builderJson.components),
          }
        ],
        grid: {
          x2: 40
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.all - builderJson.components[key];
            })
          },
        ],
      };

      // 对饼状图dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'));
      myChart1.setOption(option1);    // 按option1展示myChart1图表

      // 对饼状图dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('main2'));
      myChart2.setOption(option2);    // 按option1展示myChart1图表

      // 对柱状图dom，初始化echarts实例
      var myChart3 = echarts.init(document.getElementById('main3'));
      myChart3.setOption(option3);

      echarts.connect([myChart1, myChart2, myChart3])
    },
    resize () {
      this.myChart.resize();
    }
  },
  beforeDestroy () {
    window.removeEventListener("resize", this.resize);
  },

};
</script>
<style lang="less" scoped>
.DEMO0014 {
  width: 100%;
  height: 100vh;
  // background: #002035;

  .risk-button {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 100px;
    height: 30px;
    font-size: 12px;
  }

  h1 {
    text-align: center;
    font-size: 40px;
  }
  .demo14-echarts {
    display: flex;
  }
}
</style>