Echarts做仪表图-含HTML直接保存加个JS文件就可以用

最新推荐文章于 2021-11-24 23:26:53 发布

xcagy

最新推荐文章于 2021-11-24 23:26:53 发布

阅读量470

点赞数

分类专栏： HTML

本文为博主原创文章，未经博主允许可以转载。

本文链接：https://blog.youkuaiyun.com/ccagy/article/details/108696102

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body style="background-color:#F0F8FF; text-align:left">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '业务指标',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 50, name: '完成率'}]
        }
    ]
};
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);


    </script>
</body>
</html>