v-charts快速配置一些東西

this.title?=?{

??????????text:?"各車間每周產出數(shù)據",

??????????x:?"center",

??????????textStyle:?{

????????????color:?'#fff',//標題顏色

????????????fontWeight:?"bold",//粗體

????????????fontSize:?24??//字體大小

??????????}

????????};

????this.yAxis?=?{

??????axisLabel:?{

????????show:?true,

????????textStyle:?{

??????????color:?"white",?//這里是改變字體顏色

??????????fontSize:?18?//字體大小

????????}

??????}

????};

?????this.xAxis?=?[

??????????{

????????????data:?[

??????????????"裁床部",

??????????????"車縫部",

??????????????"電繡部",

??????????????"噴印部",

??????????????"手工部",

??????????????"塑膠包裝部",

????????????],

????????????name:?"日期",

????????????axisLabel:?{

??????????????show:?true,

??????????????textStyle:?{

????????????????color:?"white",

????????????????fontSize:?18

??????????????}

????????????}

??????????}

????????];

?this.series?=?[

??????????{

????????????name:?"下單量",

????????????type:?"bar",

????????????barWidth:?"50%",//這里是改變柱子的寬度

????????????data:?[1050,?5200,?20000,?3304,?3900,?4900],

????????????itemStyle:?{

??????????????//通常情況下:

??????????????normal:?{

????????????????//每個柱子的顏色即為colorList數(shù)組里的每一項,如果柱子數(shù)目多于colorList的長度,則柱子顏色循環(huán)使用該數(shù)組

????????????????color:?function(params)?{

??????????????????var?colorList?=?[

????????????????????"#65d186",

????????????????????"#f67287",

????????????????????"#f29e3c",

????????????????????"#c05bdd",

????????????????????"#f29e3c",

????????????????????"#7a65f2",


??????????????????];?//每根柱子的顏色

??????????????????return?colorList[params.dataIndex];

????????????????}

??????????????},

????????????}

??????????}];

圖形樣式設置? //


?chartData2:?{

????????columns:?["日期",?"訪問用戶",?"下單用戶",?"下單率"],

????????rows:?[

??????????{?日期:?"1/1",?訪問用戶:?1393,?下單用戶:?1093,?下單率:?0.32?},

??????????{?日期:?"1/2",?訪問用戶:?3530,?下單用戶:?3230,?下單率:?0.26?},

??????????{?日期:?"1/3",?訪問用戶:?2923,?下單用戶:?2623,?下單率:?0.76?},

??????????{?日期:?"1/4",?訪問用戶:?1723,?下單用戶:?1423,?下單率:?0.49?},

??????????{?日期:?"1/5",?訪問用戶:?3792,?下單用戶:?3492,?下單率:?0.323?},

??????????{?日期:?"1/6",?訪問用戶:?4593,?下單用戶:?4293,?下單率:?0.78?}

????????]

??????},

??????chartData1:?{

????????columns:?["日期",?"訪問用戶",?"下單用戶",?"下單率"],

????????rows:?[

??????????{?日期:?"1/1",?訪問用戶:?1393,?下單用戶:?1093,?下單率:?0.32?},

??????????{?日期:?"1/2",?訪問用戶:?3530,?下單用戶:?3230,?下單率:?0.26?},

??????????{?日期:?"1/3",?訪問用戶:?2923,?下單用戶:?2623,?下單率:?0.76?},

??????????{?日期:?"1/4",?訪問用戶:?1723,?下單用戶:?1423,?下單率:?0.49?},

??????????{?日期:?"1/5",?訪問用戶:?3792,?下單用戶:?3492,?下單率:?0.323?},

??????????{?日期:?"1/6",?訪問用戶:?4593,?下單用戶:?4293,?下單率:?0.78?}

????????]

??????},? 數(shù)據設置 默認的一些東西

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容