ajax 更新 Echarts

ajax

干货警告！在ajax回调函数里设置更新的那部分配置即可

$.ajax({
        url: "http://www.example.com",
        type: "POST",
        success: function (data) {
            myChart.setOption({
                series: [{
                    axisLine: {
                        lineStyle: {
                            width: 3,
                            color: [
                                [0.8, '#ff802c'],
                            ]
                        }
                    },
                    data: [{
                        value: 80
                    }]
                }]
            });
        }
    });

Echarts

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // Echarts 指定图表的配置项和数据
    option = {
        backgroundColor: '',
        grid: {
            top: 10,
        },
        series: [{
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: '100%',
            center: ['50%', '80%'],
            z: -9,
            axisTick: {
                show: false,
            },

            splitLine: {
                show: false,
            },

            axisLabel: {
                show: false,
            },

            detail: {
                //文字的高度
                offsetCenter: [0, -40],
                textStyle: {
                    fontSize: 30,
                    fontWeight: '700',
                    color: '#ff802c'
                },
                formatter: function (value) {
                    return value;
                },

            },

            pointer: {
                show: false
            },

            min: 0,
            max: 100,
            //   ---------   比如说我只想更新这一块代码   ---------   开始   ---------
            axisLine: {
                lineStyle: {
                    width: 3,
                    color: [
                        [0, '#ff802c'],
                    ]
                }
            },

            data: [{
                value: 0
            }]
          //   ---------   比如说我只想更新这一块代码   ---------   结束   ---------
        },
            {
                "name": 'backgroundColor',
                "type": 'pie',
                "hoverAnimation": false,
                "legendHoverLink": false,
                "radius": '100%',
                "center": ['50%', '80%'],
                "z": -10,
                "startAngle": 0,
                "hoverAnimation": false,
                "legendHoverLink": false,
                "label": {
                    "normal": {
                        "show": false,
                        "position": 'center'
                    },
                    "emphasis": {
                        "show": false
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": false
                    }
                },
                "data": [{
                    "value": 100,
                    "name": '1',
                    itemStyle: {
                        normal: {
                            color: "transparent"
                        }
                    }
                }, {
                    "value": 100,
                    "name": '2',
                    itemStyle: {
                        normal: {
                            color: "#FBE6D7"
                        }
                    }
                }]
            }
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);