How to draw uniapp trajectory chart

In mobile development, trajectory chart is one of the most commonly used functions. Uniapp is a cross-platform application development framework based on the Vue.js framework. It provides some components and plug-ins to facilitate application development. In Uniapp, you can use the u-charts plug-in to draw trajectory charts. This article will introduce how to use the u-charts plug-in to draw trajectory charts in Uniapp.

1. Install u-charts plug-in

To use u-charts plug-in, you need to install the plug-in first.

(1) Create Uniapp project in HBuilderX.

(2) In the project root directory, right-click and select "Select Workspace" to open the terminal.

(3) Enter npm install u-charts -S and press Enter to install.

2. Use the u-charts plug-in in the vue file

Next, introduce and use the u-charts plug-in in the vue file.

(1) In the vue file that needs to draw the trajectory map, reference the corresponding plug-in.

<template>
  <u-charts ref="uCharts" :canvas-id="'CanvasID'" :canvas-style="'width: 100%; height: 300px;'" :type="'line'" :extra="{line:{type:'curve'}}" :categories="categories" :series="series" :animation="true"></u-charts>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.vue'

export default {
  components: {
    uCharts
  },
  data () {
    return {
      categories: ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80, 92],
        color: '#4c9bfd',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18, 20],
        color: '#ff6347',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }]
    }
  }
}
</script>

(2) Pass the corresponding data to the plug-in.

In the above code, we passed two data categories and series, where categories represents the X-axis of the trajectory chart, and series represents the Y-axis, including two data sets, namely "Trading Volume 1" and "Volume 2".

(3) Rendering plug-in.

Use Vue's life cycle function mounted to ensure that the DOM tree has been mounted before rendering u-charts, as shown below:

mounted () {
  this.$nextTick(function () {
    // 在渲染时初始化uCharts，按照官方文档格式传参
    let uCharts = this.$refs.uCharts;
    uCharts.init((canvas, width, height) => { });
  })
}

3. Advanced applications of trajectory charts

u-charts plug-in can not only draw trajectory charts, but also draw other forms of charts, such as bar charts, pie charts, etc. When drawing a trajectory graph, you can also use the setOption method provided by the plug-in to customize the trajectory graph more precisely. The following are some commonly used trajectory map customization operations.

(1) Set title and subtitle.

Use setOption to set the title and subtitle, as shown below:

let options = {
  title: {
    text: '轨迹图样例', // 主标题
    subtext: 'uniapp中的轨迹图插件使用', // 副标题
  },
  ...
};
uCharts.setOption(options);

(2) The bottom label of the X-axis of the trajectory chart is rotated.

When there is too much text in the bottom label of the X-axis of the trajectory chart, you can rotate the bottom label text at a certain angle to make the display effect better. Use the rotateLabel method as follows:

uCharts.rotateLabel({
  category?: string;
  degree?: number;
})

(3) Track map color rendering.

The color rendering of the trajectory map can be set separately according to the given data set. Use the setSeriesColors method to set the color of each data set as required, as shown below:

let colors = ['#4c9bfd', '#ff6347', '#398dcd', '#f99e1c', '#d5317c', '#3a71af', '#75b86c'];
uCharts.setSeriesColors(colors);

(4) Setting of track points.

The size and style of track points are adjustable. Use the setChartStyle method to set the track point size and track line color, as shown below:

uCharts.setChartStyle({
  good: {
    pointSize: 5,
    lineColor: '#4c9bfd'
  },
  bad: {
    pointSize: 5,
    lineColor: '#ff6347'
  }
})

The above introduction is only some of the operations in track chart drawing. The u-charts plug-in also provides a variety of chart drawings. and customization methods, please refer to u-charts official documentation for details.

To sum up, the u-charts plug-in is a very convenient and practical plug-in that can easily draw trajectory charts and finely customize them in the Uniapp framework.

The above is the detailed content of How to draw uniapp trajectory chart. For more information, please follow other related articles on the PHP Chinese website!