vue中使用v-chart改變柱狀圖顏色以及X軸Y軸的文字顏色和大小以及標題

 

1.html部分

              <ve-histogram
                :tooltip-visible="true"
                :x-axis="xAxis"
                :y-axis="yAxis"
                :title="title"
                :series="series"
              ></ve-histogram>

JS部分：

   a:改變Y軸文字大小和顏色：

        this.yAxis = [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "white",//這里是改變字體顏色
                fontSize: 18，//字體大小
              }
            }
          }
        ];

效果如：這就能改變Y軸的顏色和大小了，在我們背景顏色改變時，就很有必要修改這部分的樣式的

 

 

b:改變X軸的文字顏色和字體大小

        this.xAxis = [
          {
            data: [
              "裁床部",
              "車縫部",
              "電綉部",
              "噴印部",
              "手工部",
              "塑膠包裝部",
              "委外加工",
              "注塑部"
            ],
            name: "日期",
            axisLabel: {
              show: true,
              textStyle: {
                color: "white",
                fontSize: 18
              }
            }
          }
        ];

效果如下：

 

 

c:改變每個柱形圖的柱形顏色和主題寬度大小：

        this.series = [
          {
            name: "下單量",
            type: "bar",
            barWidth: "50%",//這里是改變柱子的寬度
            data: [1050, 5200, 20000, 3304, 3900, 4900, 5900, 3600, 3960],

            itemStyle: {
              //通常情況下：
              normal: {
                //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                color: function(params) {
                  var colorList = [
                    "#65d186",
                    "#f67287",
                    "#f29e3c",
                    "#c05bdd",
                    "#f29e3c",
                    "#7a65f2",
                    "#65d186",
                    "#f67287"
                  ]; //每根柱子的顏色
                  return colorList[params.dataIndex];
                }
              },
            }
          }]

效果就能看到每個柱子的顏色變化了，想需要什么顏色，直接往colorList添加就行了咯，效果如下

 

 

 

d:當改變標題時：

        this.title = {
          text: "各車間每周產出數據",
          x: "center",
          textStyle: {
            color: "#fff",//標題顏色
            fontWeight: "bold",//粗體
            fontSize: 24  //字體大小
          }
        };

效果：

 

 E:改變Y軸的線條顏色以及是否顯示：（x軸同理，具體看官網配置參數）

        this.yAxis = [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "white",
                fontSize: 18
              }
            },
            axisLine: { 
              show: true,//是否顯示Y軸線
              lineStyle: {
                color: "#fff",//Y軸線顏色
                width: 1,//線的大小
                type: "solid"//Y軸線的類型
              }
            },
            offset:6,//偏移量
          }
        ];

具體代碼：

 

 

 效果如下，出現白色的Y軸了（看到隔開一點點的空隙是offset偏移量的問題）

 

 F：增加每個柱子的title顯示：其中改變每個數字的實現格式可以使用formatter,可實現回調函數（這里是為了把數字每隔三位加上逗號）

效果如下：

 

 

 

 如果不使用formatter處理每組頭部 ，默認是原始數據：

 

 

以上是v-chart常用需修改的css樣式配置，還有很多參數的，請查看和參考echart官網和v-chart官網。