1. 程式人生 > 其它 >vue v-charts使用自定義單個柱狀顏色實現

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>
View Code