echarts双x轴

白露-

已于 2022-07-15 16:43:59 修改

阅读量2k

点赞数

分类专栏： Echarts笔记文章标签： echarts

于 2022-07-12 14:51:52 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56227168/article/details/125742998

版权

Echarts笔记专栏收录该内容

4 篇文章

订阅专栏

效果图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!--echarts引用-->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {text: '实例'},
            tooltip: {},
            legend: {data:['销量','销量2']},
            xAxis: [
            	/*第一个x轴*/
	            {data: ["笔记本","圆珠笔","文具袋","钢尺","圆规","橡皮"]},
	            /*第二个x轴*/
	            {
	            	type: 'category',//类型
	              	offset: 25,//偏移的位置
	              	axisPointer: {type: 'none'},//将表格线取消
		            axisTick:{show: false},
		            axisLine:{show: false},
		          	position: 'bottom',//x轴的位置
		        	data: ["1月","2月","3月","4月","5月","6月"]
		        }
            ],
            yAxis: {},
            series: [
	            {
	                name: '销量',
	                type: 'bar',
	                barWidth:20,
	                color:'#90EE90',
	                data: [5, 20, 36, 10, 10, 20],
	                itemStyle: {borderWidth:1,borderColor:'black'}
	            },
	            {
	                name: '销量2',
	                symbolSize:8,
	                type: 'line',
	                xAxisIndex: 1,//标记为第二个x轴数据
	                color:'#ee6666',
	                data: [5, 10, 8, 15, 20, 10],
	                itemStyle:{normal:{lineStyle:{width:1.5}}},
                    symbol: 'circle'
	            }
            ]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>