关于echarts一个实例修改，来请教_JavaScript_论坛

关于echarts一个实例修改，来请教

bi***am 分类：JavaScript 人气：1463 回帖：1 发布于6年前收藏

我想要还原设计图的效果

总分100分，如果得分是80分，半圆就会有80%红色,20%白色

问题

如何不动态的变数据，并且达到我想要的效果

echarts社区上的效果

对应代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<!--<script src="echarts.js"></script>-->
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    function detectionData(str) {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: 'rgba(243, 238,67, 1)'
        }, {
            offset: 0.5,
            color: 'rgba(225, 128,78, 1)'
        }, {
            offset:1,
            color: 'rgba(237, 92,79, 1)'
        }]);
        if (str >= 30 && str <= 60) {
            color =  new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: 'rgba(243, 238,67, 1)'
            }, {
                offset: 0.5,
                color: 'rgba(225, 128,78, 1)'
            }, {
                offset:1,
                color: 'rgba(237, 92,79, 1)'
            }]);
        } else if (str > 60) {
            color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: 'rgba(243, 238,67, 1)'
            }, {
                offset: 0.5,
                color: 'rgba(225, 128,78, 1)'
            }, {
                offset:1,
                color: 'rgba(237, 92,79, 1)'
            }]);
        }
        return color;
    }
    var option = {
        backgroundColor:'#333333',
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
            name: "仪盘表",
            type: "gauge",
            splitNumber:60,
            axisLine: {
                "lineStyle": {
                    "color": [
                        [0.31, "#333"],
                        [1, "#333"]
                    ],
                    "width": 20
                },

            },
            axisTick: {
                lineStyle: {
                    color:'#ccc',
                    width: 2
                },
                length: 20,
                splitNumber:2
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                show:false
            },
            axisLabel: {
                distance: 10,
                textStyle: {
                    color: "#fff"
                },
                show:false,
            },
            splitLine: {
                "show": false
            },
            itemStyle: {
                normal: {
                    color: "#494f50"
                }
            },
            detail: {
                formatter: "{value}%",
                offsetCenter: [0, "30%"],
                textStyle: {
                    fontSize: 60,
                    color: "#F37B1D"
                }
            },
            title: {
                offsetCenter: [0, "60%"]
            },
            data: [{
                name: "CPU",
                value: 31
            }]
        }]
    }
    myChart.timeTicket = setInterval(function() {
        var value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[0].value = value;
        option.series[0].axisLine.lineStyle.color[0][0] = value / 100;
        option.series[0].axisLine.lineStyle.color[0][1] = detectionData(value);
        myChart.setOption(option, true);
    }, 500);
    myChart.setOption(option);
</script>
</body>
</html>

我现在已经修改后，做到的效果

对应代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<!--<script src="echarts.js"></script>-->
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    function detectionData(str) {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: 'rgba(243, 238,67, 1)'
        }, {
            offset: 0.5,
            color: 'rgba(225, 128,78, 1)'
        }, {
            offset:1,
            color: 'rgba(237, 92,79, 1)'
        }]);
        if (str >= 30 && str <= 60) {
            color =  new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: 'rgba(243, 238,67, 1)'
            }, {
                offset: 0.5,
                color: 'rgba(225, 128,78, 1)'
            }, {
                offset:1,
                color: 'rgba(237, 92,79, 1)'
            }]);
        } else if (str > 60) {
            color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: 'rgba(243, 238,67, 1)'
            }, {
                offset: 0.5,
                color: 'rgba(225, 128,78, 1)'
            }, {
                offset:1,
                color: 'rgba(237, 92,79, 1)'
            }]);
        }
        return color;
    }
    var option = {
        backgroundColor:'#333333',
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
            name: "仪盘表",
            type: "gauge",
            splitNumber:60,
            axisLine: {
                "lineStyle": {
                    "color": [
                        [0.31, "#333"],
                        [1, "#333"]
                    ],
                    "width": 20
                },

            },
            axisTick: {
                lineStyle: {
                    color:'#ccc',
                    width: 2
                },
                length: 20,
                splitNumber:2
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                show:false
            },
            axisLabel: {
                distance: 10,
                textStyle: {
                    color: "#fff"
                },
                show:false,
            },
            splitLine: {
                "show": false
            },
            itemStyle: {
                normal: {
                    color: "#494f50"
                }
            },
            detail: {
                formatter: "{value}%",
                offsetCenter: [0, "30%"],
                textStyle: {
                    fontSize: 60,
                    color: "#F37B1D"
                }
            },
            title: {
                offsetCenter: [0, "60%"]
            },
            data: [{
                name: "CPU",
                value: 31
            }]
        }]
    }
    myChart.timeTicket = setInterval(function() {
        var value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[0].value = value;
        option.series[0].axisLine.lineStyle.color[0][0] = value / 100;
        option.series[0].axisLine.lineStyle.color[0][1] = detectionData(value);
        myChart.setOption(option, true);
    }, 50000);
//    myChart.setOption(option, true);
    myChart.setOption(option);
</script>
</body>
</html>

标签：echarts c javascript java php

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv3 码奴

ch***26 技术总监 6年前#1

没太理解，你在获取到分数以及总分后，通过这两个数值初始化echarts图表就可以了啊

color: [[(currentNum / totalNum), '#4bbd4b'], [1, '#ec3434']],

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取