这个是ui设计的图,两个x轴,data怎么嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script> <script> var option = { legend: {}, tooltip: {}, dataset: { dimensions: ['product', '2015', '2016'], source: [{ product: 'A1', '2015': 43.3, '2016': 85.8 }, { product: 'B1', '2015': 83.1, '2016': 73.4 }, { product: 'C1', '2015': 86.4, '2016': 65.2 }, { product: 'A2', '2015': 23.3, '2016': 35.8 }, { product: 'B2', '2015': 43.1, '2016': 103.4 }, { product: 'C2', '2015': 56.4, '2016': 85.2 } ] }, xAxis: [{ type: 'category' }, { type: 'category', data: ['Title1', 'Title2'] }], yAxis: {}, // Declare several bar series, each will be mapped // to a column of dataset.source by default. series: [{ type: 'bar' }, { type: 'bar' } ] }; </script> </body> </html>
ECharts 官网就有现成的例子:
当然,里头有些冗余的配置,删掉冗余之后大致是这样:
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: [ { type: 'category', axisTick: {show: false}, data: ['2012', '2013', '2014', '2015', '2016'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Forest', type: 'bar', barGap: 0, emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390] }, { name: 'Steppe', type: 'bar', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290] } ] };
渲染结果:
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(2)
ECharts 官网就有现成的例子:
当然,里头有些冗余的配置,删掉冗余之后大致是这样:
渲染结果:
