折线柱形混合统计图

最新推荐文章于 2022-11-15 16:13:48 发布

liu程序员

最新推荐文章于 2022-11-15 16:13:48 发布

阅读量552

点赞数 1

文章标签：统计图

本文链接：https://blog.csdn.net/liugenrong/article/details/82892584

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 让IE浏览器用最高级内核渲染页面 有用 Chrome 框架的页面用webkit 内核 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="Keywords" content="网站建设,网页设计"/>
    <meta name="Description" content="首页"/>
    <title></title>
    <meta name="renderer" content="webkit">
    <!--Win8 or 10 -->
    <meta name="msapplication-TileImage" content="images/i/logo2.png">
    <meta name="msapplication-TileColor" content="#e1652f">
    <!--normal-->
    <link rel="icon" type="image/png" href="">
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        title: {
            text: '折柱混合'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',//交叉时有效
                crossStyle: {
                    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: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                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:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均温度',
                type:'line',
                yAxisIndex: 1,
                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]
            },
            {
                name:'月平均温度',
                type:'line',
                yAxisIndex:1,
                data:[1.0, 2.2, 3.3, 5.5, 4.3, 11.2, 21.3, 22.4, 21.0, 15.5, 11.0, 7.2]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

liu程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
折线柱形混合统计图

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;
复制链接

扫一扫