ECharts第五章高级功能

最新推荐文章于 2024-07-25 09:24:40 发布

23_123456

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量222

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2202_75544053/article/details/137351022

版权

1、双y轴折线图与柱状图

代码position:'right'指定y轴位置

position: 'right',

在series数组中，通过代码yAxisIndex:1（0代表第1个y轴，1代表第2个y轴）

 yAxisIndex: 1,

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 1000px; height: 600px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据

        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        var option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['蒸发量', '降水量', '温度']
            },
            xAxis: [
                {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                // prettier-ignore
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '蒸发量',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} ml'
                }
                },
                {
                type: 'value',
                name: '降水量',
                position: 'right',
                alignTicks: true,
                offset: 80,
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} ml'
                }
                },
                {
                type: 'value',
                name: '温度',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    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: 'bar',
                yAxisIndex: 1,
                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: 2,
                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]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
 
</html>