头图

image.png
在series中的itemStyle中定义隔柱换色

series: [
    {
        data: [
            670, 590, 630, 531, 478, 578, 378, 562, 348, 473,
            347, 643, 347, 458, 528, 584, 482, 600, 473, 450,
            375, 210, 610, 450, 580, 458, 597, 384, 297, 310,
            328, 380,
        ],
        type: "bar",
        itemStyle: {
            normal: {
                barBorderRadius: 0,
                label: {
                    show: true,
                    position: "top",
                    color: "#4d4d4d",
                },
                // 将函数粘贴至此处-隔柱换色
                color: function (params) {
                    // 定义换色数组
                    var colorList = ["#5470c6", "#91cc75"];
                    if (params.dataIndex % 2 == 0) {
                        return colorList[0];
                    } else {
                        return colorList[1];
                    }
                },
            },
        },
    },
],

各省数据图,完整代码:

<template>
    <div>
        <div style="width: 100%; height: 500px" id="ProvinceChart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
    name: "ProvinceChart",
    props: {},
    components: {},
    data() {
        return {
            option: {
                title: {
                    text: "各省数据图",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: [
                        "北京市",
                        "重庆市",
                        "上海市",
                        "天津市",
                        "河北省",
                        "山东省",
                        "辽宁省",
                        "黑龙江省",
                        "甘肃省",
                        "吉林省",
                        "青海省",
                        "河南省",
                        "江苏省",
                        "湖北省",
                        "湖南省",
                        "浙江省",
                        "江西省",
                        "广东省",
                        "云南省",
                        "福建省",
                        "台湾省",
                        "海南省",
                        "山西省",
                        "四川省",
                        "陕西省",
                        "贵州省",
                        "安徽省",
                        "内蒙古自治区",
                        "广西壮族自治区",
                        "西藏自治区",
                        "新疆维吾尔自治区",
                        "宁夏回族自治区",
                    ],
                    axisTick: {
                        alignWithLabel: true,
                    },
                    axisLabel: { interval: 0, rotate: 30 },
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: [
                            670, 590, 630, 531, 478, 578, 378, 562, 348, 473,
                            347, 643, 347, 458, 528, 584, 482, 600, 473, 450,
                            375, 210, 610, 450, 580, 458, 597, 384, 297, 310,
                            328, 380,
                        ],
                        type: "bar",
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                label: {
                                    show: true,
                                    position: "top",
                                    color: "#4d4d4d",
                                },
                                // 将函数粘贴至此处
                                color: function (params) {
                                    // 定义换色数组
                                    var colorList = ["#5470c6", "#91cc75"];
                                    if (params.dataIndex % 2 == 0) {
                                        return colorList[0];
                                    } else {
                                        return colorList[1];
                                    }
                                },
                            },
                        },
                    },
                ],
            },
        };
    },
    methods: {},
    mounted() {
        let chartDom = document.getElementById("ProvinceChart");
        let myChart = echarts.init(chartDom);
        myChart.setOption(this.option);
    },
    watch: {},
    computed: {},
    filters: {},
};
</script>

<style lang="scss" scoped></style>

兔子先森
482 声望558 粉丝

致力于新技术的推广与优秀技术的普及。