Echarts混搭图

最新推荐文章于 2024-06-13 02:48:16 发布

zzzzzyyyyttt

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量82

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2303_77733754/article/details/137764828

版权

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<script type="text/javascript" src='../js/echarts.js'></script>
</head>
 <body>
	<div id="main1" style="width: 800px; height:600px"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化ECharts图表
		var myChart1 = echarts.init(document.getElementById("main1"));
        var option = {
            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: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
                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',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                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',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                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,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' °C';
                    }
                },
                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]
                }
            ]
            };
            myChart1.setOption(option);
</script>
</body>
</html>