首页echarts折线双Y双X请写一个超级复杂实例

echarts折线双Y双X请写一个超级复杂实例

时间: 2024-05-03 20:20:18 浏览: 111

好的，以下是一个超级复杂的 echarts 折线双 Y 双 X 实例，您可以根据自己的需求进行修改： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 折线双Y双X示例</title> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <div id="container" style="width: 800px;height:400px;"></div> </body> </html> ``` JavaScript 代码： ```javascript var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data:['销量','利润'] }, xAxis: [ { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'], axisPointer: { type: 'shadow' } }, { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '销量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} 个' } }, { type: 'value', name: '利润', min: 0, max: 1000, interval: 200, axisLabel: { formatter: '{value} 元' } } ], series: [ { name:'销量', type:'line', data:[90, 120, 150, 180, 200, 220, 230] }, { name:'利润', type:'line', yAxisIndex: 1, xAxisIndex: 1, data:[400, 450, 600, 700, 800, 900, 950] } ] }; var myChart = echarts.init(document.getElementById('container')); myChart.setOption(option); ``` 注：该实例中包含两个 x 轴和两个 y 轴，其中一个 y 轴对应销量，另一个 y 轴对应利润，一个 x 轴对应星期几，另一个 x 轴也对应星期几，两个系列分别对应销量和利润。

阅读全文