Echarts 柱形图的图例与X轴标签一致，并自定义每个柱形颜色

最新推荐文章于 2023-12-20 15:21:34 发布

在寒冷雨夜盖被子

最新推荐文章于 2023-12-20 15:21:34 发布

阅读量1.6k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_49923745/article/details/122587600

版权

1首先是柱形图的设计

function chart(data1) {
    var seriesData = [];

//定义颜色
    var colorList = ['#8BD0FF', '#A0EBCA', '#F8E0BC', '#FCBBCC', '#B2EDFC', '#C9C4F7', '#A7BBF9', '#FFDBA7', '#E8DEB6', '#BFB0F7']
    for (var i = 0; i < data1.length; i++) {
        var arr = {
            name: data1[i].LineName,
            data: [data1[i].Num],
            type: 'bar',
            color: colorList[i]
        }
        seriesData.push(arr)
    }
    var option = {
        legend: {
            show: true,
            right: "0%",
            top: "20%",
            orient: "vertical",
            textStyle: { color: "#FFFDFE" }//图例颜色
        },
        label: {
            show: true,
            position: 'top',
            formatter: '{a}\n{c}',
            color: '#FFFDFE'
        },
        xAxis: {