用ucharts引入图表,在用uniapp开发小程序的时候,实现点击三个部分切换不同的图表。
文章目录
前言
提示:本文是通过ucharts添加图表的
在插件市场下载ucharts: ucharts下载网址。
ucharts官方网站
提示:进入官方网站可以在演示中查看示范例子查看代码
使用案例
代码如下(示例):
<template>
<view class="">
<u-navbar back-text="返回" title="用ucharts引入图表" :background="background"
:back-text-style="{ color: '#ffffff' } "
title-color="#ffffff" back-icon-color="#ffffff">
</u-navbar>
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<u-gap height="40"></u-gap>
<view v-if="current == 0" class="container">
<view class="charts-box" style="width: 100%; height: 600rpx;">
<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
</view>
</view>
<view v-if="current == 1" class="container">
<view class="charts-box" style="width: 100%; height: 600rpx;">
<qiun-data-charts type="line" :opts="opts2" :chartData="chartData2" />
</view>
</view>
<view v-if="current == 2" class="container">
<view