vuejs axios获取的后台数据，echarts渲染饼图，后台返回数据怎么和series的data对应

Question

1.静态数据可以显示饼图
2.动态获取数据后是键值对形式，不知道怎么和series的data对应起来，形成动态生成的
html就是定义了一个容器
response.data是这样的：

[{"0":"B银行"},{"1":"华夏银行"},{"3":"中国银行"},{"4":"农行"}]

<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'evaluation'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('map'))
        let myPie = this.$echarts.init(document.getElementById('pie'))
        let _this = this
        // 绘制饼图
        myChart.setOption({
            title : {
            text: '被评价次数分布情况',
            // subtext: '纯属虚构',
            x:'center'
            },
            tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
            orient: 'vertical',
            left: 'left',
            data: ['华夏银行','农业银行','招商银行']
            },
            series : [
                // {
                //     name: '评价次数',
                //     type: 'pie',
                //     radius : '55%',
                //     center: ['50%', '60%'],
                //     data:[
                //         {value:"1", name:'华夏银行'},{value:"4", name:'农业银行'},{value:"3", name:'招商银行'}
                //     ],
                //     itemStyle: {
                //         emphasis: {
                //             shadowBlur: 10,
                //             shadowOffsetX: 0,
                //             shadowColor: 'rgba(0, 0, 0, 0.5)'
                //         }
                //     }
                // }
            ]
        });
        // _this.axios.post("/api/bank-lzg/oprtion/oprtionByAssess.do")
        axios({
          method: 'get',
          url: '/api/bank-lzg/oprtion/oprtionByAssess.do'
        })
        .then(function(response) {
             console.log(response.data[0])
             myChart.setOption({
               series:[
                 {
                     name: '评价次数',
                     type: 'pie',
                     radius : '55%',
                     center: ['50%', '60%'],
                     data:[
                         //response.data[0]
                         //这里不知道怎么写
                     ],
                     itemStyle: {
                         emphasis: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                         }
                     }
                 }
               ]
             })
        })
        .catch(function(error) {
             console.log(error);
        })
        // 绘制柱形图
        myPie.setOption({
            title: {
                text: '分数分布情况'
            },
            tooltip : {},
            legend: {
                data:['银行个数']
            },
            xAxis: {
               data: ["60分以下","60分到80分之间","80分以上"]
            },
            yAxis: {},
            series : [
                {
                  name: '银行个数',
                  type: 'bar',
                  data: [0, 1, 1]
                }
            ]
        });
    }
  }
}
</script>

Answer 1

let chartData = response.data;
let seriesData = [];
chartData.forEach(function(item){
    let outObj = {};
    let valueKey = Object.keys(item);
    outObj.name = item[valueKey[0]];
    outObj.value = valueKey[0];
    seriesData.push(outObj);
});

在series的

data:seriesData

这样就好了

Answer 2

ECHARTS收到数据后怎么渲染到页面上面呢？ECHARTS是个组件。数据已经在组件接收到了？

Answer 3

你是怎么解决了？