在vue中绘制echart图表无结果

创建echart图没显示内容

<template>
    <div id="123" style="width: 1000px;height: 600px;">div>
template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default{
    name:'BarGraph',
    data(){
        return{
            items:''
        }
    },
mounted () {
    var mychat = echarts.init(document.getElementById('123'));
    var url ='http://localhost:8081/vueData/details'
    var citys=[],confirm=[];
    axios.get(url).then(function(json){
        citys=json.data.city;
        confirm=json.data.confirm;
        console.log(citys);
        console.log(confirm);
    })
    mychat.setOption({
        legend: {
    top: '5%',
    left: 'center'
  },
        xAxis:{
            type:'category',
            data:citys
        },
        yAxis: {
              type: 'value'
            },
            
        series: [
    {
             type:'bar',
             data:confirm
        },
        ]
    })
}
}
script>

运行结果就是这样，该怎么办啊

setOption放在then里面就好

你 setOption 放到请求外面 会先执行 的。你需要等数据回来了再设置。 所以 放到 then里就行