echarts注释

最新推荐文章于 2021-11-24 21:20:32 发布

动心.

最新推荐文章于 2021-11-24 21:20:32 发布

阅读量964

点赞数

本文链接：https://blog.csdn.net/weixin_43893437/article/details/85257463

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>eChart图表入门</title>
    <style>
        #main {
            width: 1000px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
<script src="../js/echarts4.2.js"></script>
<script>
    /*初始化*/
    var myChart = echarts.init(document.getElementById("main"));
    /*提供配置项*/
    option = {
        title: {
            text: '未来一周气温变化',
//            link:'http://www.baidu.com',
            /*主标题链接  可写可不写*/
            subtext: '纯属虚构',
//            sublink:'http://www.baidu.com',
            /*副标题链接  可写可不写*/
            x: "left",
            /*水平放置位置 默认左侧 left center right*/
            y: 'top'
            /*垂直放置位置，默认顶端  top center bottom*/
        },
        //提示框，鼠标悬浮交互时的信息提示
        tooltip: {
            trigger: 'axis'
            /* 触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'*/
            /*直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型*/
            /*item 只有提示文本  没有坐标轴*/
        },
        legend: {
            data: ['最高气温', '最低气温']
            /*
            * show: true,
              //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
              x: 'center',
              //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
             y: 'top',
            * */
        },
        /*图例，用数组*/

        //工具箱，每个图表最多仅有一个工具箱
        toolbox: {
            show: true,
            /*启用功能*/
            feature: {
                /*辅助线标志*/
                mark: {show: true},
                //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
                dataView: {show: true, readOnly: false},
//                类型切换
                magicType: {show: true, type: ['line', 'bar']},
//                还原 复位
                restore: {show: true},
//                保存为图片  图片类型为png
                saveAsImage: {show: true}
                /* //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
                            dataZoom: {
                                show: true,
                                 title: {
                                    dataZoom: '区域缩放',
                                    dataZoomReset: '区域缩放后退'
                                }
                            },
                */
            }
        },
        //是否启用拖拽重计算特性，默认关闭(即值为false)
        calculable: true,
        //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
        //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
        xAxis: [
            {
                //坐标轴类型，横轴默认为类目型'category'
                type: 'category',
                boundaryGap: false,
                /*坐标轴两侧是否留白*/
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
        //纵轴通常为数值型，但条形图时则纵轴为类目型
        yAxis: [
            {
                //坐标轴类型，纵轴默认为数值型'value'
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                },
               /* //分隔区域，默认不显示
                splitArea: {show: true}
*/
            }
        ],
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                /*显示最大值 最小值*/
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '最低气温',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    /*画图*/
    myChart.setOption(option)
</script>
</html>

动心.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts注释

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;eChart图表入门&lt;/title&gt; &lt;style&gt; #main { w
复制链接

扫一扫

echarts注释

“相关推荐”对你有帮助么？