echart实现文字状态效果（0正常1异常）

最新推荐文章于 2023-08-04 10:18:04 发布

月小满

最新推荐文章于 2023-08-04 10:18:04 发布

阅读量364

点赞数

分类专栏： echart

本文链接：https://blog.csdn.net/weixin_44110923/article/details/119001738

版权

ECharts 文字提示状态指示图表展示类别轴

关键词由CSDN通过智能技术生成

有时根据项目需要，使用echart展示当前状态效果，不能用0和1数字表示，必须使用文字提示。搜索了很久找到了解决方案，效果如下：

废话不多说直接上代码：

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <style>
            body{
                background-color: #111f44;
            }
        </style>
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

        <script type="text/javascript">
        var jsonData = [
            {
                style:'符合开关状态',
                state:'合闸',
                time:['7-22 5:00', '7-22 6:00', '7-22 7:00', '47-22 8:00', '7-22 9:00', '7-22 12:00', '7-22 15:00'],
                data:[1, 0, 1, 0, 0, 0, 0]
            }
        ];

            var echartsDataset = echarts.init(document.getElementById('container'), 'walden');
                    var optionDataset = {
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: "none"
                                },
                                dataView: {

最低0.47元/天解锁文章

月小满

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echart实现文字状态效果（0正常1异常）

有时根据项目需要，使用echart展示当前状态效果，不能用0和1数字表示，必须使用文字提示。搜索了很久找到了解决方案，效果如下：废话不多说直接上代码：<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <style> body{ backg.
复制链接

扫一扫

专栏目录