1. 程式人生 > 其它 >在vue中使用 Echarts元件化 父子元件--> 拆分option

在vue中使用 Echarts元件化 父子元件--> 拆分option

在初始化 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 並不會 替代之前的 ,只會相互融合。