echarts使用总结

最新推荐文章于 2023-06-09 11:12:16 发布

zhener09

最新推荐文章于 2023-06-09 11:12:16 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/sinat_41747081/article/details/100898127

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:500px;"></div>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
            'title' : {
                text: '一周发消息总数',
                subtext: '估计'
            },
            'tooltip': {
                'show': 'true',
                'trigger': 'axis',
                'axisPointer': { // 坐标轴指示器
                    'type': 'shadow', // 默认为直线，可以设置为：'line' | 'shadow'
                    'lineStyle': {
                        'color': 'rgba(150, 150, 150, 0.3)' // 坐标轴指示器颜色
                    },
                    z: 0   // 层级低
                },
                'background': 'rgba(0, 0, 0, .60)',
                'padding': 16,
                'textStyle': {
                    'color': '#2c8fff',
                    'lineHeight': 22
                }
            },
            'legend': {
                data: ['发送消息总条数']
            },
            toolbox: {
                'show': true,
                'feature': {
                    'dataView': {show: true, readOnly: false},
                    'magicType': {show: true, type: ['line', 'bar']},
                    'restore': {show: true},
                    'saveAsImage': {show: true}
                }
            },
            'calculable': false,
            'animation ': false,
            'xAxis': [{
                'type': 'category',
                'name': '（时间）',
                'axisLine': {
                    'show': true,
                    'lineStyle': {
                        'color': '#000' // 更改坐标轴颜色
                    },
                    'textStyle': {
                        'fontSize': 12,
                        'color': '#ccc'
                    }
                },
                'axisTick': { // x轴刻度线
                    'show': true
                },
                'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                'offset': 20   // x轴距离星期的距离
            }],
            'yAxis': [{
                'type': 'value',
                'name': '（条）',
                'axisLine': {
                    'show': true,
                    'lineStyle': {
                        'color': '#000' // 更改坐标轴颜色
                    },
                    'textStyle': {
                        'fontSize': 12,
                        'color': '#ccc'
                    }
                },
                'axisTick': { // y轴刻度线
                    'show': true
                },
                'splitLine': {  // 网络线
                    'show': true,
                    'lineStyle': {
                        'type': 'line' // 虚线
                    }
                },
                'max': 150  // Y轴最大值
            }],
            'series': [{
                'name': '发送消息总条数',
                'type': 'line',
                'lineStyle': {
                    'color': '#2C8FFF' // 更改坐标轴颜色
                },
                'itemStyle': {
                    'normal': {
                        'color': '#FFB6C1', // 拐点颜色
                        'borderColor': '#FFB6C1', // 拐点边框颜色
                        'borderWidth': 3 // 拐点边框大小
                    }
                },
                'symbol': 'circle',  // 圆点
                'showAllSymbol': false,   // 如果数据很多，不显示所有的圆点
                'data': [10, 15, 20, 40, 70, 100, 120]  // 渲染的数据
            }]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

显示效果：
在这里插入图片描述

zhener09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts使用总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫