请求到数据后echarts图表的重新渲染问题

 export default{
    data(){
      return{
      //定义接受数据的空数组
        柱状图
        e2data1:[],
        e2data2:[],
      }
       mounted() {
       //加载图表
        this.drawLine();

    },
    created(){
        // 并发发送多个请求
        axios.all([this.getTable1Data1()])
            .then(axios.spread(function (acct, perms) {
                console.log("所有数据请求成功");
            }));
    },
      methods:{
        getTable1Data1(){
            let formData=new FormData;
            formData.append("companyName",this.chose);
            return axios.post('/StockFirstnfirstout/trendChart',formData)
                .then(response=> {
                    let list=response.data.trendChartOfMonth;
                    //每次加载前清空接口数据
                    this.e2data1=[];
                    this.e2data2=[];
                    list.forEach((value,i)=>{
                        this.e2data1.push(value.count);
                        this.e2data2.push(value.saleMonth);
                    });
                    //重新渲染图表
                        myChart2.setOption({
                            xAxis: {

                                data:this.e2data2
                            },
                        series: [
                            {name:'柱状图',
                                data: this.e2data1
                            }]
                    });
                    console.log(this.e2data1);
                    console.log(this.e2data2);
                })
                .catch(error=> {
                    console.log(error);

                });
        },
          // 基于准备好的dom,初始化echarts实例
          //注意出myChart2的作用域
          myChart2 = echarts.init(document.getElementById('zhLine'));
           myChart2.setOption({
                title: {text: '本月累计趋势图',
                    //
                    textStyle:{
                        color:'#000',        //颜色
                        fontStyle:'normal',     //风格
                        fontWeight:'normal',    //粗细
                        fontFamily:'Microsoft yahei',   //字体
                        fontSize:16,     //大小
                        align:'center',   //水平对齐
                        lineHeight:50

                    },
                    //     title位置
                    padding:[20, 0, 20, 30]
                },
                legend: {
                    data:['环比',],
                    //折点提示位置
                    left:'90%',
                    top:'5%'
                },
                grid:{          //显示数据的图表位于当前canvas的坐标轴
                    x:50,
                    y:80,
                    borderWidth:1,

                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor : '#ccc',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                xAxis : [
                    {   name:'日期',
                        type : 'category',
                        data :  this.e2data2,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                    },


                ],
                yAxis : [

                    {
                        type : 'value',
                        name:'台数',
                        interval: 30,
                        scale: true,
                        show:true,
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false
                        },
                        nameTextStyle:{
                            padding: [0,0,0,-20],
                            color:'#999999'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    {

                        type: 'value',
                        // name: '温度',
                        min: 0,
                        //取消y轴网格
                        interval: 25,
                        scale: true,
                        show:true,
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    }
                ],
                series : [
                    {
                        name:'环比',
                        type:'line',
                        stack: '总量',
                        color:'#fccd35',
                        symbolSize: 8,
                        //按右边y轴显示
                        yAxisIndex: 1,
                        data:[30, 15, 42, 65, 38, 40, 78,50]
                    },

                    {
                        name:'柱状图',
                        type:'bar',
                        //柱状图宽度
                        barWidth: '13%',
                        data:this.e2data1,
                        itemStyle:{
                            normal:{
                                color:'#84d1d3'
                            }
                        },
                    },



                ],

            });
      }
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值