原生小程序图表

原生小程序使用图表

话不多说直接进入正题

官方文档:
https://www.ucharts.cn/v2/#/

下载文件

首先去gitee上把文件下载到自己的项目中
https://gitee.com/uCharts/uCharts

找到微信小程序和里面的组件

把里面src下的文件全部下载下来放入自己项目中

项目文件

新建文件夹components

在components下新疆qinu-wx-ucharts文件夹

把刚才git上下载的src下的全部文件放入我们的qinu-wx-ucharts文件夹中

使用

接下来就直接开始使用

在我们需要使用的页面进行引入

页面的json文件中

javascript 复制代码
"usingComponents": {
    "qiun-wx-ucharts": "/components/qinu-wx-ucharts/index"
    //后面这个路径为刚才components下对应文件的路径
  }

页面内使用

html 复制代码
//wxml:
<qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" ontouch canvasId="myChart" />
javascript 复制代码
//js
data:{
chartData: {},
    opts: {//配置类的东西
      color: ["#1890FF", "#91CB74", "#000000"],
      enableScroll: true, //是否开启滚动
      dataLabel: false,
      padding: [15, 10, 0, 15],
      xAxis: {
        itemCount: 6,//开启滚动后默认展示几条数据
        disableGrid: true, //是否 不纵向绘制网格
        type: "grid",
        gridType: "dash",
        scrollBackgroundColor: "", //默认为 #EFEBEF
        scrollColor: "#DEE7F7", //默认为 #A6A6A6
        rotateLabel: false, //开启文字旋转功能
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2,
      },
      extra: {
        line: {
          type: "straight",
          //  curve弯折线
          // straight直折线
          width: 2, //线的宽度
          activeType: "hollow",
        },
      },
    },
}
javascript 复制代码
onLoad(){
//我这里是处理了一下数据,不需要处理数据的可以看下面的完整实例
const datas = this.data.data;
    const categories = datas.map((item) => item.month);
    let data = {
      categories:categories,
      series: [
        {
          name: "店铺月份收益",
          data: datas.map((item) => parseFloat(item.money)),
        },
      ]
    };
    this.setData({
      chartData : JSON.parse(JSON.stringify(data)) //深拷贝数据,防止出现问题
    })
}

效果如下

javascript 复制代码
//完整代码
<!--index.wxml-->
<view class="charts-box">
  <qiun-wx-ucharts 
    type="line"
    opts="{{opts}}"
    chartData="{{chartData}}"
  />
</view>
//index.json
{
  "usingComponents": {
    "qiun-wx-ucharts": "/components/qiun-wx-ucharts/index"
  }
}


//index.js
Page({
  data: {
    chartData: {},
    //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
    opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      }
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "成交量A",
                data: [35,8,25,37,4,20]
              },
              {
                name: "成交量B",
                data: [70,40,65,100,44,68]
              },
              {
                name: "成交量C",
                data: [100,80,95,150,112,132]
              }
            ]
          };
        this.setData({ chartData: JSON.parse(JSON.stringify(res)) });
      }, 500);
    },
  }
})
/*index.wxss*/
/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
相关推荐
书山有路_邓33 分钟前
vscode 如何鼠标双击时选择带有-的
前端
张三风啊3 小时前
vue config 接口地址配置
前端·javascript·vue.js
多情码农无情键3 小时前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
Uluoyu3 小时前
Vue.Draggable使用nested-with-vmodel进行拖拽
前端·javascript·vue.js
北极糊的狐3 小时前
vue页面成绩案例(for渲染表格/删除/添加/统计总分/平均分/不及格显红色/输入内容去首尾空格trim/输入内容转数字number)
前端·javascript·vue.js
边洛洛4 小时前
路由传参、搜索、多选框勾选、新增/编辑表单复用
前端·javascript·vue.js
2301_811274315 小时前
基于微信小程序的空巢老人健康管理系统
微信小程序·小程序
OEC小胖胖5 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
丁总学Java6 小时前
微信小程序加载商品首页数据时,页码没有更新,老是page=1。
微信小程序·小程序
川石教育7 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件