vue效果之echarts柱狀圖輪播

list: [
        { x: "張一", dataX: 13641 },
        { x: "張一", dataX: 2000 },
        { x: "張一", dataX: 3000 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 161 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1000000 },
        { x: "張一", dataX: 2 },
        { x: "張一", dataX: 3 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張一", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
        { x: "張二", dataX: 1 },
      ],

  let oldList = [];
          for (let i = 0; i < newVal.length; i += 9) {
            oldList.push(newVal.slice(i, i + 9));
          }
          this.newList = [];
          for (let i = 0; i < oldList.length; i++) {
            this.newList[i] = new Array();
            let x = [],
              dataX = [];
            for (let j = 0; j < oldList[i].length; j++) {
              x.push(oldList[i][j].name);
              dataX.push(oldList[i][j].efficiency);
            }
            this.newList[i].push({
              x: x,
              dataX: dataX,
            });
          }
          this.$nextTick(() => {
            console.log(" this.newList", this.newList);
            this.initPart(this.newList);
          });

oldList 把數組切割成9個一起的二維數組

this.newList 的數組結構為

[
　　[{x:[],dataX:[]}],
　　[{x:[],dataX:[]}]
]

 <el-carousel
      trigger="click"
      height="150px"
      @change="changeh"
      indicator-position="none"
      :autoplay="false"
    >
      <el-carousel-item v-for="(item, index) in this.newList" :key="index">
        <div class="myChart"></div>
      </el-carousel-item>
    </el-carousel>

initPart(canvas) {
      let roseCharts = document.getElementsByClassName("myChart");
      for (let i = 0; i < canvas.length; i++) {
        let myChart = echarts.init(roseCharts[i], null, {
          renderer: "svg",
        });
        myChart.clear();
        myChart.resize();
        // 繪制圖表
        let option = {
          backgroundColor: "transparent",
          legend: {
            show: false,
          },
          grid: {
            containLabel: true,
            left: "5%",
            right: "5%",
            bottom: 10,
            top: "30%",
          },
          xAxis: {
            type: "category",
            axisTick: {
              lineStyle: {
                color: "#3d5269",
                width: 1,
              },
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#5CDEFF",
              },
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3d5269",
                width: 1,
              },
            },
            data: canvas[i][0].x,
          },
          yAxis: {
            splitLine: {
              show: false,
              lineStyle: {
                color: "#253B75",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              // textStyle: {
              //   color: "#2ad1d2",
              // },
            },
          },
          series: [
            {
              data: canvas[i][0].dataX,
              type: "bar",
              barMaxWidth: "auto",
              barWidth: 14,
              zlevel: 3,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#38A5EA",
                      },
                      {
                        offset: 1,
                        color: "#26E4BA",
                      },
                    ]);
                  },
                },
              },
              // itemStyle: {
              //   normal: {
              //     color: function (params) {
              //       if (params.value <= 190) {
              //         return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //           {
              //             offset: 0,
              //             color: "#bc0165",
              //           },
              //           {
              //             offset: 1,
              //             color: "#fd48b1",
              //           },
              //         ]);
              //       }
              //       return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              //         {
              //           offset: 0,
              //           color: "#38A5EA",
              //         },
              //         {
              //           offset: 1,
              //           color: "#26E4BA",
              //         },
              //       ]);
              //     },
              //   },
              // },
              label: {
                show: true,
                position: "top",
                distance: 14,
                color: "#fff",
              },
              // markLine: {
              //   symbol: "none",
              //   label: {
              //     position: "middle",
              //     formatter: "{b}",
              //   },
              //   data: [
              //     {
              //       name: "",
              //       yAxis: 190, //res.targetTwo,
              //       lineStyle: {
              //         color: "#FF49B2",
              //       },
              //     },
              //   ],
              // },
            },
          ],
          tooltip: {
            trigger: "axis",
            show: false,
          },
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
      }
    },

 

 .myChart {
    width: 470px;
    height: 125px;
  }

總結: echarts的初始化得用class

let roseCharts = document.getElementsByClassName("myChart");