Echarts 简单的柱形+折线+饼图

 

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>echarts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="width: 100%;height: 100%"></div>
    <script crossorigin="anonymous" integrity="sha384-et+fqdf7kslHL5Ip8rXSJPUPODLa7eMfpFTBaCfnlMzrcAz/wxI5Xm/mNTZwd+7H"
        src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2"
        src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var colors = ["#5793f3", "#d14a61", "#675bba", "#cccccc"];
            const optMap = {
                color: colors,
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '50%', top: '55%'
                },
                legend: {
                    data: ['蒸发量', '降水量', '平均温度']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 25,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '平均温度',
                        type: 'line',
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    },
                    {
                        type: 'pie',
                        radius: ['0%', '30%'],
                        center: ['30%', '75%'],
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [
                            { value: 1, name: '1' },
                            { value: 2, name: '2' },
                            { value: 3, name: '3' },
                            { value: 4, name: '4' },
                        ]
                    }
                ]
            };
            const pieLineBar = echarts.init(document.querySelector("#container"));
            pieLineBar.setOption(optMap);
        });
    </script>
</body>
</html>

 

参考

https://echarts.apache.org/zh/option.html#title

 

posted @ 2020-08-31 11:26  -e  阅读(301)  评论(0)    收藏  举报