Echarts绘制仪表图

作者: ssttIsme | 来源:发表于2020-01-30 22:57 被阅读0次

Echarts绘制仪表图
echarts绘制条形图-添加总数
Echarts 3.x仪表盘常用API示例
Python强大的pyecharts绘画优美图形<三>
Flutter-绘制自定义仪表盘
tip01
ECharts仪表盘样式
Echarts关系图demo
echarts自适应
Echarts图表变形与自适应解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表图</title>
    <script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
    //初始化ehcharts实例
    var myChart=echarts.init(document.getElementById("box"));
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
            show:true,
            x:'center',
            text:'cpu使用率',//主标题
        },
        //工具栏组件
        toolbox:{
            show:true, //是否显示
            feature:{ //要显示的具体功能
                saveAsImage:{ //保存图片
                    show:true
                }
            }
        },
        //弹窗组件
        tooltip:{
            formatter:"{b}:{c}%"
        },
        //数据-data是最终要显示的数据
        series:[{
            name:'cpu使用率',//图例名称
            type:'gauge',
            detail:{formatter:'{value}%'},
            data:[
                    {value:85,name:'cpu使用率'},
            ]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);
</script>
</body>
</html>

动态修改仪表图的值

    setInterval(function () {
        option.series[0].data[0].value=parseInt(Math.random()*(100-15+1)+15,10);
        myChart.setOption(option,true);
    },1000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表图</title>
    <script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
    //初始化ehcharts实例
    var myChart=echarts.init(document.getElementById("box"));
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
            show:true,
            x:'center',
            text:'cpu使用率',//主标题
        },
        //工具栏组件
        toolbox:{
            show:true, //是否显示
            feature:{ //要显示的具体功能
                saveAsImage:{ //保存图片
                    show:true
                }
            }
        },
        //弹窗组件
        tooltip:{
            formatter:"{b}:{c}%"
        },
        //数据-data是最终要显示的数据
        series:[{
            name:'cpu使用率',//图例名称
            type:'gauge',
            detail:{formatter:'{value}%'},
            data:[
                    {value:85,name:'cpu使用率'},
            ]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);
    setInterval(function () {
        option.series[0].data[0].value=parseInt(Math.random()*(100-15+1)+15,10);
        myChart.setOption(option,true);
    },1000);
</script>
</body>
</html>