javascript eCharts - Gauge is not showing

user_10264309 0
Viewed 1506

Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?

Hope I will get good answer from you friends.

<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);

And the html code is

  <canvas id="mychart"></canvas>
charts html jquery javascript
2 Answers

I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.

I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.

Also, I don't know why you are using a setInterval(), but for now, I removed it. I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen. The options object I let the same as you.

Check below to see it working.

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>

user_86912760

In your div, set the width and heigh values.

user_198322440
Related