uni-app charts All In One

uni-app charts All In One

uCharts 混合图 绘制不出来 bug

坑， mounted 里面执行 数据获取

ucharts & echarts

<template>
    <view class="charts-box">
      <qiun-data-charts
        type="column"
        :opts="{dataLabel:false}"
        :chartData="chartsDataColumn1"
        :canvas2d="true"
        canvasId="components_test"
      />
    </view>
</template>

<script>
// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
import demodata from '@/mockdata/demodata.json';

export default {
  // name: 'test-uCharts',
  props: {
    // pageScrollTop: {
    //   type: Number,
    //   default: 0
    // }
  },
  data() {
    return {
      chartsDataColumn1: {},
    };
  },
  //新手注意了，组件里没有onLoad事件！！！
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      setTimeout(() => {
      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
        this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column));
      }, 1000);
    },
  }
};
</script>

<style>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>

uCharts 混合图 绘制不出来 bug

shit bug

localdata数据渲染用法

• 使用localdata数据格式渲染图表的优势：数据结构简单，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
  ❌

• localdata数据的缺点：并不是所有的图表类型均可通过localdata渲染图表，例如混合图，组件并不能识别哪个series分组需要渲染成折线还是柱状图，涉及到复杂的图表，仍需要由chartData传入。

• template代码：（建议使用在线工具生成）

<view class="charts-box">
	<qiun-data-charts type="column" :localdata="localdata" />
</view>

shit 学要手动配置

1、切换【图表类型】请点击【基础配置】第一行type右侧的文字【柱状图】切换

2、通过本工具配置好符合UI规范的默认图表样式，粘贴到 uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 中，形成各个图表类型的默认配置，相同的图表类型不同的配置，可通过组件上:opts传递不同属性即可覆盖默认配置

OK (mounted 请求数据)

  onReady() {
    console.log('❌ onReady');
  },
  onLoad () {
    console.log('❌ onLoad');
  },
  // 坑爹文档: ⚠️新手注意了，组件里没有 onReady 和 onLoad 事件！！！
  mounted() {
    this.options = {
      yAxis:{
        data:[
          {position: 'left',title: '折线'},
          {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},
          {position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'},
        ],
      },
    };
    console.log('✅ mounted');
    //模拟从服务器获取数据
    this.getServerData()
  },

shit demos

https://demo.ucharts.cn/#/

https://www.ucharts.cn/H5/#/

如何使用 uni_modules 插件

// @/uni_modules/

import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';

https://uniapp.dcloud.io/uni_modules?id=使用-uni_modules-插件

refs

https://ext.dcloud.net.cn/plugin?id=271

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---