Echarts3柱状图切换折线图时发生位移

问题:

柱状图切换折线图时,折线图第一个数据会靠左显示,导致x轴与y轴重合,很不友好。

柱状图效果:

切换折线图后的效果:

经排查,发现是因为Echarts3默认的柱状图boundaryGap为true,但折线图为false;

当切换的时候,折线图会偏移到x轴最左边,需要加监听,将折线图的boundaryGap属性设置为true;

处理后的效果:

编写不易,如有帮助到您,麻烦点个赞,感谢!

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts(百度开源的一个数据可视化库)可以很方便地绘制双柱状图折线图。具体步骤如下: 1. 引入 ECharts 库和主题 ```html <!-- 引入 ECharts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 主题 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script> ``` 2. 准备数据 ```js // X 轴数据 var xData = ['一月', '二月', '三月', '四月', '五月', '六月']; // 第一组数据(柱状图) var yData1 = [120, 200, 150, 80, 70, 110]; // 第二组数据(柱状图) var yData2 = [100, 180, 130, 70, 60, 100]; // 第三组数据(折线图) var yData3 = [90, 160, 120, 60, 50, 90]; ``` 3. 配置 ECharts ```js // 初始化 ECharts 实例对象 var myChart = echarts.init(document.getElementById('chart')); // 设置 ECharts 配置项 var option = { // 设置图表标题 title: { text: '双柱状图折线图', left: 'center' }, // 设置图例 legend: { data: ['第一组', '第二组', '第三组'], top: 30 }, // 设置 X 轴 xAxis: { type: 'category', data: xData }, // 设置 Y 轴 yAxis: [ { type: 'value', name: '第一组/第二组', axisLabel: { formatter: '{value} 元' } }, { type: 'value', name: '第三组', axisLabel: { formatter: '{value} %' } } ], // 设置数据系列 series: [ { name: '第一组', type: 'bar', data: yData1 }, { name: '第二组', type: 'bar', data: yData2 }, { name: '第三组', type: 'line', yAxisIndex: 1, data: yData3 } ], // 设置图表主题 color: ['#5470c6', '#91cc75', '#fac858'] }; // 渲染图表 myChart.setOption(option); ``` 4. 在 HTML 中创建图表容器 ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 以上就是使用 ECharts 绘制双柱状图折线图的基本步骤。可以根据实际需求调整配置项,以达到更好的可视化效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值