echarts柱状图重叠堆叠、渐变背景色、双Y轴、tooltip的formatter简单示例等效果

效果图

代码

• 复制粘贴即可使用
• 笔者这用的是vue-echarts，省去了一些操作
• echarts的配置项挺多的，记录一下吧，忘了的时候回来看看
• 话不多说，看代码

<template>
    <!-- 
        版本：
            "echarts": "^5.3.2",
            "vue-echarts": "^6.0.2",
    -->
    <div>
        <v-chart theme="dark" :option="option" autoresize></v-chart>
    </div>
</template>

<script setup>
import VChart from "vue-echarts"; // vue-echarts组件
import * as echarts from "echarts"; // 全局引入echarts

const xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const yData1 = [53, 50, 42, 77, 99, 123, 120] // 每天的玩王者荣耀总局数数据
const yData2 = [23, 45, 34, 12, 88, 56, 41] // 胜利局数
const yData3 = yData1.map((item, index) => { // 胜利比率
    let percent = (yData2[index] / item).toFixed(2)
    return Number(percent) * 100
})
const yData1GradientColor = [
    {
        offset: 0, //offset表示位置【0,1】范围，0表示起始位置，1表示结束位置
        color: '#8063B0' // 起始位置设置此颜色，终止位置设置下面的颜色
    },
    {
        offset: 1,
        color: '#342A61'
    }
]
const yData2GradientColor = [
    {
        offset: 0,
        color: '#9781D4'
    },
    {
        offset: 1,
        color: '#3BA1E3'
    }
]

const option = {
    tooltip: {
        trigger: 'axis', // x轴触发
        formatter: function (params) {
            let list = []
            let listItem = ''
            params.forEach((item) => {
                // 柱状图加单位 局，折线图加单位 %
                let unitValue = item.seriesType == 'bar' ? item.value + '局' : item.value + '%'
                list.push(item.marker + '' + item.seriesName + ': ' + unitValue)
            })
            listItem = list.join('<br/>')
            return '<div>' + listItem + '</div>'
        }
    },
    legend: {
        orient: 'horizontal', // 水平排列
        x: 'center', //可设定图例在左、右、居中
        y: 'top', //可设定图例在上、下、居中
        padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
    },
    xAxis: {
        type: 'category',
        data: xData
    },
    yAxis: [
        {
            type: 'value',
            name: '局数',
            yAxisIndex: 0,
            axisLabel: {
                //y轴每个刻度都加单位
                formatter: "{value}局",
            },
        },
        {
            type: 'value',
            name: "胜率(%)",
            min: 0, // 最小为0
            max: 100, // 最大为100
            interval: 25, // 间隔25
            axisLabel: {
                //y轴每个刻度都加单位
                formatter: "{value}%",
            },
        },
    ],
    series: [
        {
            type: 'bar',
            name: '总局数',
            data: yData1,
            label: {
                show: true, // 展示文字
                position: 'top', // 文字上方显示
                color: '#fff' // 文字颜色
            },
            // stack:'重叠',
            itemStyle: {
                borderRadius: [20, 20, 6, 6], //四个方向的圆角【上,右,下,左】
                // 使用echarts自带的渐变函数去设置颜色      【右,下,左,上,渐变颜色数组】
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData1GradientColor),
            }
        },
        {
            type: 'bar',
            name: "胜利局数",
            data: yData2,
            label: {
                show: true,
                color: '#eee'
            },
            barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
            // stack:'重叠',
            itemStyle: {
                borderRadius: [20, 20, 6, 6],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData2GradientColor),
            }
        },
        {
            type: 'line',
            name: '胜率(%)',
            data: yData3,
            yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
            symbolSize: 10, // 圆点大小
            itemStyle: {
                color: '#74D318', // 折线图小圆点颜色
            },
            lineStyle: {
                color: "#946496", //折线图线条颜色
            },
            label: {
                show: true,
                color: '#ddd',
                formatter: '{c}%' // {c}数据值
            },
        }
    ]
};
</script>
  
<style scoped>
.echarts {
    width: 36vw;
    height: 90vh;
}
</style>