携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

做完了大屏，最近又转战uni-app项目了，这次说一说uniapp中图表的使用。前端框架用的uview，图表用的ucharts。封装一下，使用的时候直接传入数据部分即可。图表的使用基本大同小异，总结一下。

charts组件

1. canvas

• canvas-id是canvas 组件的唯一标识符
• @touchstart 手指触摸动作开始
• @touchmove 手指触摸后移动
• @touchend 手指触摸动作结束

<canvas
    :canvas-id="id" 
    :id="id" 
    class="chart"
    :style="'width:'+width+'px;height: '+height+'px'"
    @touchstart="touchChart"
    @touchmove="touchmove"
    @touchend="touchend"
></canvas>

2. props属性

props: {
    id: {
        type: String,
        default: ''
    },
    type: {
        type: Number,
        default: 1  图表类型
    },
    width: {
        type: Number,
        default: 375
    },
    height: {
        type: Number,
        default: 0
    },
    chartsData: {
        type: Object,
        default: () => {}
    },
    options: { // 属性配置对象
        type: Object,
        default: () => {}
    }
},

3. 上下文对象

uni.createCanvasContext 创建 canvas 绘图上下文（指定 canvasId）。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <canvas/> 组件

const ctx = uni.createCanvasContext(canvasId, this);

（一）环形图

环形图的基本配置

uChartsInstance[canvasId] = new uCharts({
    canvasId: canvasId,
    width: this.width,
    height: this.height,
    type: 'ring',
    context: ctx,
    series: chartData.series,
    colors: this.colors,
    fontSize: 11,
    legend: true,
    background: '#FFFFFF',
    pixelRatio: 1,
    animation: false,
    disablePieStroke: true,
    dataLabel: true,
    title: {
        name: chartData.title,
        fontSize: 26,
        color: "#595959"
    },
    subtitle: {
        name: chartData.subtitle,
        fontSize: 12,
        color: "#595959"
    },
    extra: {
        ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
        }
    },
})

（二）饼图

和圆环图类似，区别是 type: 'pie'

（三）柱状图

uChartsInstance[canvasId] = new uCharts({
    canvasId: canvasId,
    width: this.width,
    height: this.height,
    type: 'column',
    context: ctx,
    categories: chartData.categories,
    series: chartData.series,
    colors: this.colors,
    legend: {},
    xAxis: {
        axisLine: false,
        disableGrid: true,
        fontColor: '#666',
    },
    yAxis: {
        showTitle: true,
        data: [{
            axisLine: false,
            min: 0,
            title: chartData.yAxis
        }],
        disableGrid: false,
    },
    dataLabel: true,
    animation: true,
    extra: {
        column: {
            width: 10
        }
   }
})

（四）折线图

折线图和柱状图类似，区别是type: 'line'

（五）混合图

制作多个y轴的图，可以是2个，3个...

 uChartsInstance[canvasId] = new uCharts({
    type: "mix",
    context: ctx,
    width: this.width,
    height: this.height,
    categories: chartData.categories,
    series: chartData.series,
    animation: false,
    background: "#FFFFFF",
    color: this.colors,
    legend: {},
    enableScroll: true,
    xAxis: {
       disableGrid: true,
       itemCount: 6,
       scrollShow: true,
    },
    yAxis: {
        gridType: "dash",
        dashLength: 2,
        showTitle: true,
        min: 0,
        data: chartData.yAxis || []
    },
    extra: {
        mix: {
            column: {
                width: 20
            }
        }
    },
})

1. y轴传参

yAxis: [
    {
      position: "left",
      title: "达标人数"
    },
    {
      position: "right",
      min: 0,
      max: 100,
      title: "达标率",
      textAlign: "left"
    },
],

2. 数据配置

series: [
    {
        name: '达标人数',
        data: seriesDataNum,
        type: "line",
        color: '#FBA670'
    },
    {
        name: '达标率',
        data: seriesDataRate,
        type: "line",
        color: '#598CF6'
    }
]

3. 运行效果

图表滚动

touchChart(e) {
    uChartsInstance[e.target.id].scrollStart(e);
},

touchmove(e){
   uChartsInstance[e.target.id].scroll(e);
},

touchend(e){
    uChartsInstance[e.target.id].scrollEnd(e);
    uChartsInstance[e.target.id].touchLegend(e);
    uChartsInstance[e.target.id].showToolTip(e);
},