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

我不知道您要使用哪个版本的df <- read.table(text = "Cell Ident Count Clonality C1 A 5 Expanded C2 B 3 Expanded C3 A 5 Expanded C4 C 2 Unexpanded C5 A 5 Expanded C6 B 3 Expanded C7 C 2 Unexpanded C8 A 5 Expanded C9 A 5 Expanded C10 B 3 Expanded", header = T)，但是对于我的示例，我使用的是4.1。

我认为您忘记了eCharts文档中显示的eCharts方法（init），至少在您的代码中您没有使用它，而当我将其放入示例中时，有效。

此外，我不知道您为什么使用echarts.init(...)，但是现在，我将其删除了。我还选择使用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;
}

javascript eCharts-仪表未显示

1 个答案: