蒙自零度科技_游游网

使用JS修改Echarts中的数据

蒙自零度科技_游游网 https://www.hhtc.cc 2021-07-01 16:50 出处:原创 作者:老游编辑:@老游
使用JS修改Echarts中的数据

下面截取了一段Echarts代码:

    xAxis: [{
        type: 'category',
        axisLine: {
            show: true
        },
        splitArea: {
            show: true,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            textStyle:{fontSize:20},
            color: '#fff'
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: ['0', '2', '4', '6', '8', '10','12', '14', '16', '18', '20', '22'],
    }],

这段是Echarts中xAxis(X轴)的代码,我们现在要修改data: ['0', '2', '4', '6', '8', '10','12', '14', '16', '18', '20', '22']这段数据。
xAxis以数组的形式存储数据,而xAxis又包含在option属性中,因此我们修改的代码如下:

<script>
  option.xAxis[0].data=['1', '3', '5', '7', '9', '11','13', '15', '17', '19', '21', '23']
</script>

我们还可以扩展一下,比如当前小时是单数时,将data修改成单数;是双数时修改为双数:

<script>
var ctime = new Date().getHours();
        if (ctime%2==1){
                option.xAxis[0].data=['1', '3', '5', '7', '9', '11','13', '15', '17', '19', '21', '23'];
        } else{
                option.xAxis[0].data=['0', '2', '4', '6', '8', '10','12', '14', '16', '18', '20', '22'];
        }
</script>

当然,我们还可以每个小时的单独控制:

<script>
        switch(new Date().getHours()){
            case 0:
                option.xAxis[0].data=['0', '2', '4', '6', '8', '10','12', '14', '16', '18', '20', '22'];
                break;
            case 1:
                option.xAxis[0].data=['1', '3', '5', '7', '9', '11','13', '15', '17', '19', '21', '23'];
                break;
            case 2:
                option.xAxis[0].data=['0', '2', '4', '6', '8', '10','12', '14', '16', '18', '20', '22'];
                break;
            case 3:
                option.xAxis[0].data=['1', '3', '5', '7', '9', '11','13', '15', '17', '19', '21', '23'];
                break;
                ……
        }
</script>

skyyx2002
2021.07.01

0
×
给作者送弹药
¥1 ,用微信支付更换
立即支付
×

微信扫码支付

赞赏金额:¥2

精彩评论

暂无评论...
验证码 换一张
取 消