echarts柱状图加折线图

最新推荐文章于 2025-04-11 15:59:26 发布

前端小菜鸡！

最新推荐文章于 2025-04-11 15:59:26 发布

阅读量2.8k

点赞数

分类专栏：微信小程序文章标签： echarts css javascript html5 vue.js

本文链接：https://blog.youkuaiyun.com/xieshengnanQ/article/details/114840719

版权

本文介绍了如何使用 Echarts 在同一图表中绘制柱状图和折线图，详细讲解了配置过程，包括数据处理、样式定制以及 Vue.js 中的集成方法，帮助开发者实现丰富的数据可视化效果。

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

在这里插入图片描述

 option = {
color: ["#0080FF", "#0FDBA2"],
title: {
    textStyle: {
        color: '#fff',
        fontSize: 18,
    },
    x: 'center',
},
tooltip: {
    trigger: 'axis',
    axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
},
legend: {
    data: ['销量', '同比(%)'],
    x: 'right',
    icon: 'rect',

},
grid: [{
        x: '80%',
        y: '7%',
        height: '20%',
        left: '0%',
        top: '30%',
        right: '8%',
    },
    {
        x: '7%',
        y2: '7%',
        height: '40%',
        left: '0%',
        right: '8%',
        bottom: '8%',
    },
],
xAxis: [{