荆棘从死亡中来，死亡又包含着新生。
      •  2 回帖  •  7.3K 浏览  •  5 年前
   

markdown 由简入繁，上手跟我做（十）echarts 图表 - 折线（面积）图

语法

```echarts

json代码

```

可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码

示例 1

效果
{

 "title" : {  
 "text": "简单的折线图",  
 "subtext": "纯属虚构"  
 },  
 "tooltip" : {  
 "trigger": "axis"  
 },  
 "toolbox": {  
 "show" : true,  
 "feature" : {  
 "mark" : {"show": true},  
 "dataView" : {"show": true, "readOnly": false},  
 "magicType" : {"show": true, "type": ["line", "bar"]},  
 "restore" : {"show": true},  
 "saveAsImage" : {"show": true}  
 }  
 },  
 "calculable" : true,  
    "xAxis": {
        "type": "category",
            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": [820, 932, 901, 934, 1290, 1330, 1320],
        "type": "line"
    }]
}
json
{

 "title" : {  
 "text": "简单的折线图",  
 "subtext": "纯属虚构"  
 },  
 "tooltip" : {  
 "trigger": "axis"  
 },  
 "toolbox": {  
 "show" : true,  
 "feature" : {  
 "mark" : {"show": true},  
 "dataView" : {"show": true, "readOnly": false},  
 "magicType" : {"show": true, "type": ["line", "bar"]},  
 "restore" : {"show": true},  
 "saveAsImage" : {"show": true}  
 }  
 },  
 "calculable" : true,  
    "xAxis": {
        "type": "category",
            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": [820, 932, 901, 934, 1290, 1330, 1320],
        "type": "line"
    }]
}

示例 2

效果
{
    "title" : {
        "text": "未来一周气温变化",
        "subtext": "纯属虚构"
    },
    "tooltip" : {
        "trigger": "axis"
    },
    "legend": {
        "data":["最高气温","最低气温"]
    },
    "toolbox": {
        "show" : true,
        "feature" : {
            "mark" : {"show": true},
            "dataView" : {"show": true, "readOnly": false},
            "magicType" : {"show": true, "type": ["line", "bar"]},
            "restore" : {"show": true},
            "saveAsImage" : {"show": true}
        }
    },
    "calculable" : true,
    "xAxis" : {
            "type" : "category",
            "boundaryGap" : "false",
            "data" : ["周一","周二","周三","周四","周五","周六","周日"]
        },
    "yAxis" : {
            "type" : "value",
            "axisLabel" : {
                "formatter": "{value} °C"
            }
        },
    "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" : "平均值"}
                ]
            }
        }
    ]
}
json
{  
 "title" : {  
 "text": "未来一周气温变化",  
 "subtext": "纯属虚构"  
 },  
 "tooltip" : {  
 "trigger": "axis"  
 },  
 "legend": {  
 "data":["最高气温","最低气温"]  
 },  
 "toolbox": {  
 "show" : true,  
 "feature" : {  
 "mark" : {"show": true},  
 "dataView" : {"show": true, "readOnly": false},  
 "magicType" : {"show": true, "type": ["line", "bar"]},  
 "restore" : {"show": true},  
 "saveAsImage" : {"show": true}  
 }  
 },  
 "calculable" : true,  
 "xAxis" : {  
 "type" : "category",  
 "boundaryGap" : "false",  
 "data" : ["周一","周二","周三","周四","周五","周六","周日"]  
 },  
 "yAxis" : {  
 "type" : "value",  
 "axisLabel" : {  
 "formatter": "{value} °C"  
 }  
 },  
 "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" : "平均值"}  
 ]  
 }  
 }  
 ]  
}

上一篇 markdown 由简入繁，上手跟我做（九）甘特图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（十一）echarts 图表 - 柱状（条形）图