echarts 统计图 下钻 vue 接口数据

echarts 统计图 使用下钻 vue

普通的 统计图

参考官网 echarts 官网

大部分常用的 已经都封装改好了 直接c v 完事

template>
                
  <div id="echart1"></div>   //放他的盒子 id 很重要


</template>

<script>
export default {
name: "",
data(){
return
},

mounted() {      
this.echarts();

},

methods: {
echarts（）{
var chartDom = document.getElementById('echart1');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);
},

}
}
</script>

<style scoped>
//样式自己写去 

#echart1 {
height: 350px;
width: 800px;
margin: 0 auto;
}


</style>

想要钻取 就得给他添加点击 然后传入对应的数据调用方法

template>
                
  <div id="echart1"></div>   //放他的盒子 id 很重要


</template>

<script>
export default {
name: "",
data(){
return
},

mounted() {      
this.echarts();

},

methods: {
echarts（）{
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    data: ['Animals', 'Fruits', 'Cars']
  },
  yAxis: {},
  dataGroupId: '',
  animationDurationUpdate: 500,
  series: {
    type: 'bar',
    id: 'sales',
    data: [
      {
        value: 5,
        groupId: 'animals'
      },
      {
        value: 2,
        groupId: 'fruits'
      },
      {
        value: 4,
        groupId: 'cars'
      }
    ],
    universalTransition: {
      enabled: true,
      divideShape: 'clone'
    }
  }
};
const drilldownData = [
  {
    dataGroupId: 'animals',
    data: [
      ['Cats', 4],
      ['Dogs', 2],
      ['Cows', 1],
      ['Sheep', 2],
      ['Pigs', 1]
    ]
  },
  {
    dataGroupId: 'fruits',
    data: [
      ['Apples', 4],
      ['Oranges', 2]
    ]
  },
  {
    dataGroupId: 'cars',
    data: [
      ['Toyota', 4],
      ['Opel', 2],
      ['Volkswagen', 2]
    ]
  }
];
myChart.on('click', function (event) {
  if (event.data) {
    var subData = drilldownData.find(function (data) {
      return data.dataGroupId === event.data.groupId;
    });
    if (!subData) {
      return;
    }
    myChart.setOption({
      xAxis: {
        data: subData.data.map(function (item) {
          return item[0];
        })
      },
      series: {
        type: 'bar',
        id: 'sales',
        dataGroupId: subData.dataGroupId,
        data: subData.data.map(function (item) {
          return item[1];
        }),
        universalTransition: {
          enabled: true,
          divideShape: 'clone'
        }
      },
      graphic: [
        {
          type: 'text',
          left: 50,
          top: 20,
          style: {
            text: 'Back',
            fontSize: 18
          },
          onclick: function () {
            myChart.setOption(option);
          }
        }
      ]
    });
  }
});

option && myChart.setOption(option);
},

}
}
</script>

<style scoped>
//样式自己写去 

#echart1 {
height: 350px;
width: 800px;
margin: 0 auto;
}


</style>

对比一下 显而易见

如果有后端写好的接口 点击下钻 可以方法中 不需要写上面的代码 直接在 点击方法中 调用接口 刷新列表即可

目前我遇到的问题是 需要传入id 就是目前点击下钻的名称id 然后调用接口
这个id可以从 data 中传入 平常的data ：[1,2,3,3,3,]这样子
只需要把他写成对象的那种 key value 即可传入[{id:‘111’,value:‘xxxx’}]

这个id 就可以从 这个点击事件传入的 event.data 获取