guopengfa
发布于 2020-05-27 / 746 阅读 / 0 评论 / 0 点赞

echarts标准代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echartsTYT</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="view1" style="height: 700%;width: 100%"></div>
<div id="view2" style="height: 700%;width: 100%"></div>
<script>
    sdtyt = echarts.init(document.getElementById("view1"))
    options1 = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossType:{
                    color:"#999"
                }
            }
        },
        toolbox:{
            feature:{
                dataView: {
                    show:true,readOnly:false
                },
                magicType: {
                    show: true,
                    type: ["line","bar"]
                },
                restore: {
                    show:true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend:{
            data:["蒸发量","降水量","平均温度"]
        },
        xAxis:[
            {
                type:"category",
                data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                axisPointer: {
                    type: "shadow"
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                name: "水量",
                min: 0,
                max: 250,
                interval: 5,
                axisLabel:{
                    formatter: "{value}ml"
                }
            },
            {
                type: "value",
                name: "温度",
                min: 0,
                max: 25,
                interval: 5,
                axisLabel:{
                    formatter: "{value}℃"
                }
            }
        ],
        series: [
            {
                name: "蒸发量",
                type: "bar",
                data: [2.0,4.9,3.5,5.6,7.6,4.9,12.3,23.2,12.4,1.4,4,2]
            },
            {
                name: "降水量",
                type: "bar",
                data: [23,21,4,5,45,21,1.2,3,5,6,9,19]
            },
            {
                name: "平均温度",
                type: "line",
                data: [23.6,23,5,6,23,18,14,21,9,7,23.8,3]
            }
        ]
    };
    sdtyt.setOption(options1)
</script>
<script>
    sdtyt = echarts.init(document.getElementById("view2"))
    options1 = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossType:{
                    color:"#999"
                }
            }
        },
        toolbox:{
            feature:{
                dataView: {
                    show:true,readOnly:false
                },
                magicType: {
                    show: true,
                    type: ["line","bar"]
                },
                restore: {
                    show:true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend:{
            data:["蒸发量","降水量","平均温度"]
        },
        xAxis:[
            {
                type:"category",
                data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                axisPointer: {
                    type: "shadow"
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                name: "水量",
                min: 0,
                max: 250,
                interval: 5,
                axisLabel:{
                    formatter: "{value}ml"
                }
            },
            {
                type: "value",
                name: "温度",
                min: 0,
                max: 25,
                interval: 5,
                axisLabel:{
                    formatter: "{value}℃"
                }
            }
        ],
        series: [
            {
                name: "蒸发量",
                type: "bar",
                data: [2.0,4.9,3.5,5.6,7.6,4.9,12.3,23.2,12.4,1.4,4,2]
            },
            {
                name: "降水量",
                type: "bar",
                data: [23,21,4,5,45,21,1.2,3,5,6,9,19]
            },
            {
                name: "平均温度",
                type: "line",
                data: [23.6,23,5,6,23,18,14,21,9,7,23.8,3]
            }
        ]
    };
    sdtyt.setOption(options1)
</script>
</body>
</html>


评论