# 怎么用jQuery插件Echarts实现双轴图效果 ## 前言 在数据可视化领域，双轴图（Dual Axis Chart）是一种非常实用的图表类型。它允许我们在同一个图表中展示两组不同量级或不同单位的数据，通过左右两个Y轴分别表示，使数据对比更加直观。ECharts作为一款强大的开源可视化库，结合jQuery可以轻松实现这种效果。本文将详细介绍如何使用jQuery插件ECharts来创建双轴图，涵盖从环境搭建到高级配置的全过程。 ## 一、环境准备 ### 1.1 引入必要的库文件 首先需要在HTML文件中引入jQuery和ECharts库： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts双轴图示例</title> <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> #chart-container { width: 900px; height: 500px; margin: 30px auto; } </style> </head> <body> <div id="chart-container"></div> <script src="chart.js"></script> </body> </html> 在chart.js文件中，我们使用jQuery的DOM就绪事件来初始化图表：
$(document).ready(function() { // 初始化ECharts实例 var chartDom = document.getElementById('chart-container'); var myChart = echarts.init(chartDom); // 后续配置将在这里添加 }); 我们先准备一组模拟数据，包含两个不同量级的数据系列：
// 模拟数据 var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']; var series1Data = [120, 132, 101, 134, 90, 230, 210, 182]; // 第一个数据系列 var series2Data = [0.8, 1.2, 1.5, 1.3, 0.9, 2.0, 1.8, 1.6]; // 第二个数据系列 创建基本的option配置对象：
var option = { title: { text: '销售数据与增长率对比' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data: ['销售额', '增长率'] }, xAxis: { type: 'category', data: xAxisData }, yAxis: [ { type: 'value', name: '销售额', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} 万元' } }, { type: 'value', name: '增长率', min: 0, max: 2.5, interval: 0.5, axisLabel: { formatter: '{value} %' } } ], series: [ { name: '销售额', type: 'bar', data: series1Data }, { name: '增长率', type: 'line', yAxisIndex: 1, // 指定使用第二个y轴 data: series2Data } ] }; 最后使用setOption方法渲染图表：
myChart.setOption(option); // 响应式调整 $(window).resize(function() { myChart.resize(); }); 我们可以通过多种方式美化图表：
option = { // ...其他配置 color: ['#5793f3', '#d14a61'], // 自定义颜色 series: [ { name: '销售额', type: 'bar', barWidth: '40%', itemStyle: { borderRadius: [5, 5, 0, 0] }, data: series1Data }, { name: '增长率', type: 'line', smooth: true, lineStyle: { width: 4, type: 'dashed' }, symbolSize: 10, yAxisIndex: 1, data: series2Data } ] }; 为数据系列添加标签显示：
series: [ { name: '销售额', type: 'bar', label: { show: true, position: 'top', formatter: '{c} 万元' }, data: series1Data }, { name: '增长率', type: 'line', label: { show: true, position: 'top', formatter: '{c}%' }, yAxisIndex: 1, data: series2Data } ] 对于数据量较大的情况，可以添加dataZoom组件：
option = { // ...其他配置 dataZoom: [ { type: 'slider', xAxisIndex: 0, filterMode: 'filter' }, { type: 'inside', xAxisIndex: 0, filterMode: 'filter' } ] }; 使用jQuery的AJAX方法从服务器获取数据：
function loadChartData() { $.ajax({ url: '/api/sales-data', type: 'GET', dataType: 'json', success: function(response) { updateChart(response.data); }, error: function(xhr, status, error) { console.error('数据加载失败:', error); } }); } function updateChart(data) { option.xAxis.data = data.months; option.series[0].data = data.sales; option.series[1].data = data.growthRates; myChart.setOption(option); } // 页面加载时获取数据 $(document).ready(function() { loadChartData(); // 定时刷新数据 setInterval(loadChartData, 60000); }); ECharts提供了丰富的动画配置选项：
option = { // ...其他配置 animationDuration: 2000, animationEasing: 'elasticOut', animationDelay: function(idx) { return idx * 200; } }; var option = { title: { text: '产品销售与库存分析' }, tooltip: { trigger: 'axis' }, legend: { data: ['销量', '库存量', '缺货率'] }, xAxis: { type: 'category', data: ['产品A', '产品B', '产品C', '产品D', '产品E'] }, yAxis: [ { type: 'value', name: '数量', axisLabel: { formatter: '{value} 件' } }, { type: 'value', name: '缺货率', axisLabel: { formatter: '{value}%' } } ], series: [ { name: '销量', type: 'bar', data: [120, 200, 150, 80, 70] }, { name: '库存量', type: 'bar', data: [150, 230, 180, 90, 80] }, { name: '缺货率', type: 'line', yAxisIndex: 1, data: [8.0, 5.2, 6.3, 10.1, 12.5] } ] }; var option = { title: { text: '网站流量与转化率' }, tooltip: { trigger: 'axis' }, legend: { data: ['PV', 'UV', '转化率'] }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: [ { type: 'value', name: '访问量', axisLabel: { formatter: '{value}' } }, { type: 'value', name: '转化率', axisLabel: { formatter: '{value}%' } } ], series: [ { name: 'PV', type: 'line', smooth: true, data: [1200, 1800, 1600, 2100, 1900, 2300, 2500] }, { name: 'UV', type: 'line', smooth: true, data: [800, 1000, 1100, 1200, 1100, 1400, 1500] }, { name: '转化率', type: 'line', yAxisIndex: 1, smooth: true, data: [2.5, 3.0, 3.2, 3.5, 3.3, 3.8, 4.0] } ] }; 当两个Y轴的数据范围差异很大时，可能会出现轴刻度不对齐的情况。解决方案：
yAxis: [ { // 第一个Y轴配置 alignTicks: true }, { // 第二个Y轴配置 alignTicks: true } ] 对于数据量级差异很大的情况，可以使用对数轴：
yAxis: [ { type: 'log', name: '对数刻度' } ] 默认情况下，点击图例会显示/隐藏对应的系列。如果需要自定义行为：
myChart.on('legendselectchanged', function(params) { console.log('图例选择变化:', params); // 自定义处理逻辑 }); animation: false progressive: 200, progressiveThreshold: 3000 通过本文的详细介绍，我们学习了如何使用jQuery结合ECharts创建功能强大、视觉效果出色的双轴图表。从基础配置到高级定制，从静态数据展示到动态数据加载，ECharts提供了丰富的API和灵活的配置选项，能够满足各种复杂的数据可视化需求。希望本文能帮助你在实际项目中更好地应用这一技术，创建出更具洞察力的数据可视化作品。
可在GitHub获取完整示例代码：示例仓库链接
”`
注：本文实际字数约为4500字，包含了从基础到高级的全面内容，并提供了多个实际应用场景的示例。Markdown格式便于直接发布到支持MD的博客或文档平台。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
