eCharts javascript - датчик не показывает

Question

Привет я пытаюсь измерить счетчик в сценарии.Я получил этот код от echarts.com, и теперь я включаю этот код с asp.В консоли это не показывает никакой ошибки, но это не показывает?

Надеюсь, я получу хороший ответ от ваших друзей.

<script>
    option = {
        series: [{
            name: 'Machine Time',
            type: 'gauge',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [0.2, '#228b22'],
                        [0.8, '#48b'],
                        [1, '#ff4500']
                    ],
                    width: 8
                }
            },
            axisTick: {
                splitNumber: 10,
                length: 12,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                textStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                show: true,
                length: 30,
                lineStyle: {
                    color: 'auto'
                }
            },
            pointer: {
                width: 5
            },

            detail: {
                formatter: '{value}%',
                textStyle: {
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            data: [{
                value: 50,
                name: 'Process'
            }]
        }]
    };

    timeTicket = setInterval(function() {
        option.series[0].data[0].value = 72;
        myChart.setOption(option, true);
    }, 2000)
    clearInterval(timeTicket);

И HTML-код

  <canvas id="mychart"></canvas>

Answer 1

Я не знаю, какую версию eCharts вы пытаетесь использовать, но для моего примера я использую 4.1.

Я думаю, вы забыли метод init (echarts.init(...)), что показано в документации eCharts, по крайней мере, в вашем коде здесь вы не используете его, и когда я помещаю его в мой пример, это работает.

Кроме того, я не знаю, почему вы используетеsetInterval(), но пока я его убрал.Я также решил использовать div вместо canvas для рендеринга датчика, он лучше отображается на моем экране.options объект, который я даю так же, как и вы.

Проверьте ниже, чтобы увидеть, как он работает.

option = {
    series: [{
        name: 'Machine Time',
        type: 'gauge',
        splitNumber: 10,
        axisLine: {
            lineStyle: {
                color: [
                    [0.2, '#228b22'],
                    [0.8, '#48b'],
                    [1, '#ff4500']
                ],
                width: 8
            }
        },
        axisTick: {
            splitNumber: 10,
            length: 12,
            lineStyle: {
                color: 'auto'
            }
        },
        axisLabel: {
            textStyle: {
                color: 'auto'
            }
        },
        splitLine: {
            show: true,
            length: 30,
            lineStyle: {
                color: 'auto'
            }
        },
        pointer: {
            width: 5
        },

        detail: {
            formatter: '{value}%',
            textStyle: {
                color: 'auto',
                fontWeight: 'bolder'
            }
        },
        data: [{
            value: 50,
            name: 'Process'
        }]
    }]
};
  
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);

#mychart{
  width: 350px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>