echarts 制作折线统计图

最新推荐文章于 2023-08-18 23:33:39 发布

原创最新推荐文章于 2023-08-18 23:33:39 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用ECharts库创建的多X轴图表示例，该图表通过两个不同的Y轴分别展示了不同年龄段的人数及消费金额数据。图表中采用了平滑的折线图，并针对数据点进行了强调显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

app.title = '多 X 轴示例';


var colors = ['#5793f3', '#d14a61', '#675bba'];




option = {
    color: colors,
	tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['人数', '消费金额']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',			            
            data: ["25岁以下", "25-35岁", "35-45岁", "45-55岁", "55岁以上"]
        }			       
    ],
    yAxis: [
        {
            type: 'value',
            name:'金额' 
        },
        {
            type: 'value',
            name:'人数'
        }
    ],
    series: [
        {
            name:'消费金额',
            type:'line',
            smooth:true,
            data:['4400','5500','3540','4111'],
            emphasis:{
                label:{
                    show:true,
                }
            }
            
            
        },{
            name:'人数',
            type:'line',
            smooth:true,
            data:['400','500','340','411'],
            yAxisIndex: 1  //关联第二根Y轴
        }
    ]
};