Echarts图表 多表联动及图表数据还原

项目场景：

提示：多表联动、地市下区县数据联动、图表数据还原

例如：

---

需求描述

需求一：例如点击南昌市展示该市下所有的区县的系统总数，同时【部门图表】展示对应南昌市下所有区下部门系统数量排行前15；点击南昌市某个区县，【部门图表】展示对于某个区县下所有区下部门系统数量排行前15；

需求二：点击重置按钮，一切回到最初的起点

---

需求分析：

需求一代码：

需求二代码

---

解决方案：

代码一：

<template>
  <div :id="echartId" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
  export default {
    name: "EchartPic",
    props:{
      echartId: '',
      echartData:[]
    },
    data() {
      return {};
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let data = new Array();
        for (let x of this.echartData) {
          let y = {
            name : x.name,
            value : x.number
          }

          data.push(y)
        }
        var echarts = require("echarts");
        var myChart = echarts.init(document.getElementById(this.echartId));
        let that = this
        myChart.setOption({
          grid: {
            left: "6%",
            right: "4%",
            bottom: "10%",
            top: "8%",
            containLabel: true
          },
          tooltip: {
            //提示框，可以在全局也可以在
            trigger: "item", //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            color: "#000", //提示框的背景色
            textStyle: {
              //提示的字体样式
              color: "#fff"
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              myTool1: {
                show: true,
                title: "还原",