vue v-charts使用自定义单个柱状颜色实现

                  <ve-histogram width="100%" height="100%" :data="chartData1"  :extend="chartExtend"></ve-histogram>
<script>
    export default {
        data() {
            return {
                controlData1: "",
                chartExtend: {
                    itemStyle: {
                        color: function(params){
                            console.log(params)
                            var c = params.name.substr(5,5);
                            console.log(c)
                            if(c == "01-01" && params.seriesName == "日用电量" || c == "01-01" && params.seriesName == "用电量"){
　　　　　　　　　　　　　　　　　　return "red"
　　　　　　　　　　　　　　　　 }else if(c == "01-01" && params.seriesName == "日最大负荷" || c == "01-01" && params.seriesName == "最大负荷"){
　　　　　　　　　　　　　　　　　　return "blue"
　　　　　　　　　　　　　　　　 }else if(params.seriesName == "日用电量" || params.seriesName == "用电量"){
　　　　　　　　　　　　　　　　　　return "#23E8CA"
　　　　　　　　　　　　　　    }else if(params.seriesName == "日最大负荷" || params.seriesName == "最大负荷"){
　　　　　　　　　　　　　　　　　　return "#FFC600"
　　　　　　　　　　　　　　　　 }
                        }
                    }
                }
            };
        },
        methods: {
            getProvincial() {
                this.axios({
                        method: "post",
                        url: "",
                        data: {
                            year: this.formData.year
                        }
                    })
                    .then(res => {
                        // console.log(res)
                        this.chartData1 = res.data.tb;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
        },
        mounted() {
            this.getProvincial();
        }
    };
</script>

https://blog.csdn.net/weixin_33842328/article/details/88718364

https://blog.csdn.net/weixin_34132768/article/details/87294662

template：
                  <ve-histogram width="100%" height="100%" :data="chartData1"
                    :extend="chartExtend"></ve-histogram>


<script>
    export default {
        data() {
            return {
                chartExtend: {
                    itemStyle: {
                        color: function(params){
                            console.log(params)
                            var c = params.name.substr(5,5);
                            console.log(c)
                            if(c == "01-01" && params.seriesName == "日用电量"){
                                return "red"
                            }else if(c == "01-01" && params.seriesName == "日最大负荷"){
                                return "blue"
                            }else if(params.seriesName == "日用电量"){
                                return "#23E8CA"
                            }else if(params.seriesName == "日最大负荷"){
                                return "#FFC600"
                            }
                        }
                    }
                }
            };
        },
        methods: {
        },
        mounted() {
        }
    };
</script>

标签：01,return,log,自定义,charts,else,seriesName,vue,params
来源： https://www.cnblogs.com/yanshushu/p/11345463.html