How to loop echarts component in uniapp

In recent years, with the rapid development of mobile applications and network applications, front-end technology has been continuously updated, and some frameworks have emerged that can easily build cross-platform, efficient, and beautiful mobile applications. Among them, uniapp is one of the highly respected frameworks. In uniapp, the echarts component is a widely used data visualization tool in front-end development. However, for beginners, how to loop the echarts component is a difficult problem. Below, this article will introduce the implementation method of the uniapp loop echarts component from various aspects such as components, slots, and data processing.

1. Component usage

In uniapp, we can introduce the echarts component through the <ec-canvas> tag provided by the official website. The basic method of using components is as follows:

<template>
  <view class="container">
    <ec-canvas ref="mychart" canvas-id="mychart-canvas" :ec="ec" ></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        ec: {
          onInit: initChart
        }
      }
    },
    methods: {
      initChart(canvas, width, height, dpr) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        chart.setOption(this.getOption());
        return chart;
      },
      getOption() {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    }
  }
</script>

Through the above code, we can introduce the echarts component in uniapp, and use the <ec-canvas> tag to specify some attributes of echarts. However, if you want to display multiple echarts components in a loop on the page, you need to change the method.

2. Using slots

In order to realize the cyclic display of echarts components, we can use the slots provided by uniapp. The specific method is as follows:

<template>
  <view class="container">
    <view v-for="(item, index) in chartList" :key="index">
      <ec-canvas ref="mychart" :canvas-id="&#39;mychart-canvas&#39; + index" :ec="ec" @canvasInit="initChart(index)"></ec-canvas>
    </view>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        chartList: [1, 2, 3, 4, 5],
        ec: {},
        myChartList: []
      }
    },
    methods: {
      initChart(index) {
        const that = this
        return (canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          that.myChartList.push(chart)
          chart.setOption(that.getOption(index));
          return chart
        };
      },
      getOption(index) {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }],
          color: function(params){    
             let colorList = ['#f00', '#0f0', '#00f','#f0f','#0ff','#ff0']
             return colorList[params.dataIndex]
          } 
        }
      }
    }
  }
</script>

In the above example code, we used v-for to loop through chartList. During the traversal, we can dynamically The canvas-id attribute in the <ec-canvas> tag specifies a different value to distinguish multiple echarts components. At the same time, we used @canvasInit to listen for events, execute the initChart method when each <ec-canvas> tag is initialized, and save the initialized chart to .myChartList middle.

3. Processing data

In order to make multiple echarts charts display different data, we need to process the data and pass it into the getOption method to configure the different data of each chart. We can achieve this goal by passing parameters.

<template>
  <view class="container">
    <view v-for="(item, index) in chartList" :key="index">
      <ec-canvas ref="mychart" :canvas-id="&#39;mychart-canvas&#39; + index" :ec="ec" @canvasInit="initChart(index)"></ec-canvas>
    </view>
  </view>
</template>

<script>
  import * as echarts from '../../deps/echarts';

  export default {
    data() {
      return {
        chartList: [1, 2, 3, 4, 5],
        ec: {},
        myChartList: []
      }
    },
    methods: {
      initChart(index) {
        const that = this
        return (canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          that.myChartList.push(chart)
          chart.setOption(that.getOption(index));
          return chart
        };
      },
      getOption(index) {
        return {
          /* option for echarts */
          series: [{
            type: 'bar',
            data: this.chartList.map((c, i) => index == i ? c * 3 : c)
          }],
          color: function(params){    
             let colorList = ['#f00', '#0f0', '#00f','#f0f','#0ff','#ff0']
             return colorList[params.dataIndex]
          } 
        }
      }
    }
  }
</script>

In the above example code, we use the map() method when processing data, and check whether the parameter index is the same as the subscript of the data traversed by the loopiEqual, if equal, multiply the data c by 3, otherwise return the original value c.

Through the above steps, we can successfully achieve the goal of cyclically displaying the echarts component in uniapp. Finally, summarize the knowledge points that need to be mastered: component usage, slots, and data processing. Only by mastering these skills proficiently and continuously applying them in practice can you become an excellent front-end engineer.

The above is the detailed content of How to loop echarts component in uniapp. For more information, please follow other related articles on the PHP Chinese website!