当前位置：首页 > news >正文

Echarts实现柱状图和折线图等多种图形联动

news 2024/11/7 22:04:16

需求需要实现鼠标移入柱状图，显示实折线图相关数据
话不多说，直接看效果图吧
在这里插入图片描述
先实现折线图相关代码

option = {backgroundColor: '#1C162E', //背景颜色tooltip: {trigger: 'axis',backgroundColor: '#FFFFFF',borderWidth: '1',borderColor: '#E5E5E5',padding: 10,extraCssText: 'box-shadow: 0 0 7px 0 rgba(0,0,0,0.10);',textStyle: {color: '#333333',fontSize: '12px'},formatter: function(params) {//这里是实现联动的关键地方，返回一个div，同时对这个div绘制相应的图形setTimeout(() => {that.drawEchart1("zxt");}, 0);return '<div style="width: 200px;height: 200px" id="zxt" ></div>';}},legend: {show: false},calculable: true,xAxis: [{type: 'category',axisTick: {alignWithLabel: true},triggerEvent: true,boundaryGap: true,data: ['昨日', '本月', '本年', '累计'],axisLabel: {interval: 0,rotate: -0,clickable: true,textStyle: {color: '#999999'}},axisLine: {lineStyle: {color: '#D0D0D0'}}}],yAxis: [{interval: 100 / 2,type: 'value',boundaryGap: false,axisLabel: {textStyle: {color: '#999999'}},axisLine: {lineStyle: {color: '#D0D0D0'}},splitLine: {//网格线的格式// show:false//去掉y轴上的网格线——lineStyle: {color: 'rgba(208,208,208,0.67)', //网格线颜色width: 1, //网格线宽度type: 'dashed' //网格线样式}}}],grid: {top: 50,bottom: 50,containLabel: true},series: [{name: '降雨量统计',type: 'bar',stack: '总量',barWidth: 40,label: {normal: {show: true,position: 'top',color: '#666666',fontSize: 12}},data: [100, 200, 300, 400],itemStyle: {normal: {color: '#FF8731'}}}]
};

函数 drawEchart1 中实现联动的图形就行，这里写出简单的代码

option = {tooltip: {trigger: 'axis'},grid: {left: 30,right: 10,top: 50,bottom: 40},xAxis: {axisLabel: {rotate: 45},type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: [{name: '降雨量/日',type: 'value'}],series: [{name: '线条一',type: 'line',data: [10, 23, 58, 20, 30, 40]}]
};