鍍金池/ 問答/HTML/ vuejs axios獲取的后臺數(shù)據(jù),echarts渲染餅圖,后臺返回數(shù)據(jù)怎么和

vuejs axios獲取的后臺數(shù)據(jù),echarts渲染餅圖,后臺返回數(shù)據(jù)怎么和series的data對應

1.靜態(tài)數(shù)據(jù)可以顯示餅圖
2.動態(tài)獲取數(shù)據(jù)后是鍵值對形式,不知道怎么和series的data對應起來,形成動態(tài)生成的
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: '被評價次數(shù)分布情況',
            // subtext: '純屬虛構',
            x:'center'
            },
            tooltip : {
            trigger: 'item',
            formatter: "{a} <br/> : {c} (q2kog4c%)"
            },
            legend: {
            orient: 'vertical',
            left: 'left',
            data: ['華夏銀行','農業(yè)銀行','招商銀行']
            },
            series : [
                // {
                //     name: '評價次數(shù)',
                //     type: 'pie',
                //     radius : '55%',
                //     center: ['50%', '60%'],
                //     data:[
                //         {value:"1", name:'華夏銀行'},{value:"4", name:'農業(yè)銀行'},{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: '評價次數(shù)',
                     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: '分數(shù)分布情況'
            },
            tooltip : {},
            legend: {
                data:['銀行個數(shù)']
            },
            xAxis: {
               data: ["60分以下","60分到80分之間","80分以上"]
            },
            yAxis: {},
            series : [
                {
                  name: '銀行個數(shù)',
                  type: 'bar',
                  data: [0, 1, 1]
                }
            ]
        });
    }
  }
}
</script>
回答
編輯回答
任她鬧

ECHARTS收到數(shù)據(jù)后怎么渲染到頁面上面呢?ECHARTS是個組件。數(shù)據(jù)已經在組件接收到了?

2017年7月18日 12:28
編輯回答
夢若殤
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

這樣就好了

2017年4月26日 11:59