在vue中使用 Echarts元件化 父子元件--> 拆分option
阿新 • • 發佈:2021-08-03
在初始化 chartInstance 物件的時候 初始化 圖表的樣式
// 對圖表初始化配置的控制 const initOption = { title: { text: "▎商家銷售統計", textStyle: { fontSize: 45 }, top: 10, left: 20, }, grid: { top: "20%", left: "3%", right: "6%", bottom: "3%", containLabel: true, }, xAxis: { type: "value", }, yAxis: { type: "category", }, tooltip: { // 什麼時候觸發背景顏色呢? 滑鼠引入到座標軸的時候 trigger: "axis", // 滑鼠移到座標軸所展示出來的樣式 axisPointer: { type: "line", z: 0, lineStyle: { width: 66, color: "#2d3443", }, }, }, series: [ { type: "bar", barWidth: 66, label: { show: true, position: "right", textStyle: { color: "white", }, }, itemStyle: { barBorderRadius: [0, 33, 33, 0], //左上 、右上 、右下 、左下 // 線性漸變物件 => 指明顏色漸變方向 => 指明不同顏色下 百分比的值 color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 百分之0狀態下的顏色值 { offset: 0, color: "#5052ee" }, // 百分之100狀態下的顏色值 { offset: 1, color: "#ab6ee5" }, ]), }, }, ], };
在更新的時候 ,傳遞資料到圖表
多次 setOption 並不會 替代之前的 ,只會相互融合。