鍍金池/ 問答/Java  HTML/ Echarts 動態(tài)改變X軸數(shù)據(jù)量

Echarts 動態(tài)改變X軸數(shù)據(jù)量

1、我使用Echarts3在一個頁面渲染3張圖(柱狀圖,餅狀圖,折線圖),通過ajax根據(jù)選項(xiàng)動態(tài)獲取相關(guān)數(shù)據(jù),但是清除不掉原有的X軸多余出來的數(shù)據(jù)。使用了setOption(option,true)和clear();沒有效果

圖片描述

圖片描述

var name = "";
var ydata = [];
var xdata = [];
var bydata = [];
var myChartBing,optionZhu;
var myChartZhe,optionZhe;
var myChartZhu,optionBing;


myChartZhu = echarts.init(document.getElementById('dazhu'));
myChartZhe = echarts.init(document.getElementById('dazhe'));
myChartBing = echarts.init(document.getElementById('dabing'));

optionZhu = {
        title: {
            text: name,
            left: '8%'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
                type: 'shadow'        // 默認(rèn)為直線,可選為:'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: '60%',
                data: []
            }
        ]
    };

    optionZhe = {
        title: {
            text: name,
            left: '8%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['選擇情況']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '選擇情況',
                type: 'line',
                stack: '總量',
                areaStyle: {normal: {}},
                data: []
            }
        ]
    };
    optionBing = {
        title: {
            text: name,
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/> : {c} (h3hlbjt%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChartZhu.setOption(optionZhu,{ notMerge:true});
    myChartZhe.setOption(optionZhe,{ notMerge:true});
    myChartBing.setOption(optionBing,{ notMerge:true});
 function ajaxGetData() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'system/getDataByQuestionIdOrCountyId',
            data: {'questionid': currentQuestionId, 'countyid': currentCountyId},
            success: function (result) {
                optionZhu.title.text=result.data.questionname;
                optionZhe.title.text=result.data.questionname;
                optionBing.title.text=result.data.questionname;
                $(result.data.optionDTOS).each(function (index, item) {
                    ydata[index]=item.count;
                    xdata[index]=item.name;
                    bydata[index]={};
                    bydata[index].value=item.count;
                    bydata[index].name=item.name;
                });
                optionZhu.xAxis[0].data=xdata;
                optionZhu.series[0].data=ydata;
                optionZhe.xAxis[0].data=xdata;
                optionZhe.series[0].data=ydata;
                optionBing.legend.data=xdata;
                optionBing.series[0].data=bydata;
                myChartZhu.setOption(optionZhu,{ notMerge:true});
                myChartZhe.setOption(optionZhe,{ notMerge:true});
                myChartBing.setOption(optionBing,{ notMerge:true});
            },
            error: function (data) {
                layer.alert("出現(xiàn)異常!");
            }
        });
    }
    ajaxGetData();
回答
編輯回答
礙你眼

問題解決了,我的程序有點(diǎn)問題,不應(yīng)該將xdata,ydata設(shè)置成全局變量,這樣數(shù)組的長度就會是所有請求中最多的,導(dǎo)致數(shù)據(jù)錯亂

2018年6月27日 22:24