uni-app 中如何使用echart

  • uni-app 中如何使用echart

      • • 1. 安装 ECharts

      • • 2. 引入 ECharts

        • • 对于 Vue 单文件组件（.vue 文件）

        • • 对于使用 uni-app 插件市场的 ECharts 插件

      • • 3. 创建图表容器

      • • 4. 初始化图表

      • • 5. 配置图表

      • • 6. 更新图表数据

      • • 注意事项

    • • uni-app 如何使用 renderjs 创建echart图表

      • • 1. 安装 ECharts

      • • 2. 创建 ECharts 配置文件

      • • 3. 创建 renderjs 页面

      • • 4. 编写 renderjs 函数

      • • 5. （可选）注册自定义主题

      • • 6. （可选）更新图表数据

      • • 注意事项

    • • uni-app 中 renderjs是什么，如何用

      • • 什么是 RenderJS in uni-app?

      • • RenderJS 主要具有以下特点：

      • • 如何在 uni-app 中使用 RenderJS?

        • • 1. 准备页面结构

        • • 2. 编写 RenderJS 代码

        • • 3. 引入外部库

        • • 4. 数据通信

        • • 注意事项

在 uni-app 中使用 ECharts 数据可视化库，通常需要完成以下步骤：

1. 安装 ECharts

使用 npm 安装 ECharts 到你的 uni-app 项目中。在项目根目录下打开终端，执行以下命令：

npm install echarts --save

2. 引入 ECharts

对于 Vue 单文件组件（.vue 文件）

在需要使用 ECharts 的 Vue 组件中，通过 import 语句引入 ECharts。同时，如果你需要使用地图功能，还需要额外引入相应的地图文件（如中国地图）并注册。

<template>
  <view>
    <canvas ref="chartCanvas"></canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/map/js/china.js'; // 引入中国地图（按需引入其他地图）

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      // 等待 canvas 元素渲染完成（对于 H5 环境可能需要）
      await this.$nextTick();

      // 获取 canvas 元素
      const chartDom = this.$refs.chartCanvas;

      // 初始化 ECharts 实例
      this.chartInstance = echarts.init(chartDom);

      // 加载地图数据（如果需要）
      echarts.registerMap('China', china); // 注册中国地图

      // 设置图表配置项
      const option = {
        // ...具体的图表配置项
      };

      // 载入图表
      this.chartInstance.setOption(option);
    },
  },
  beforeDestroy() {
    // 销毁图表实例以避免内存泄漏
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  },
};
</script>

对于使用 uni-app 插件市场的 ECharts 插件

如果你选择使用 uni-app 插件市场提供的 ECharts 插件（如 uni-ec-canvas），则需要按照插件文档的指引进行安装和使用。

通常情况下，你需要在 pages.json 中配置插件，然后在模板中使用特定的组件标签（如 <uni-ec-canvas>），并设置其属性来传递图表配置和数据。

3. 创建图表容器

在 Vue 组件的模板部分，创建一个 <canvas> 元素作为 ECharts 图表的容器，并为其指定一个 ref，以便在 JavaScript 中通过 this.$refs 访问。

<template>
  <view>
    <canvas ref="chartCanvas"></canvas>
  </view>
</template>

　　

4. 初始化图表

在 Vue 组件的 mounted 生命周期钩子中，初始化 ECharts 实例。

  • • 首先等待 DOM 更新完毕（使用 this.$nextTick()）

  • • 然后获取 canvas 元素，使用 echarts.init() 方法初始化图表实例。

  • • 接着设置图表的配置项（option）

  • • 最后调用 setOption() 方法加载图表。

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      await this.$nextTick();
      const chartDom = this.$refs.chartCanvas;
      this.chartInstance = echarts.init(chartDom);
      const option = {
        // ...具体的图表配置项
      };
      this.chartInstance.setOption(option);
    },
  },
  // ...其他生命周期钩子，如销毁时清理图表资源
};

　　

5. 配置图表

根据你的需求，编写 ECharts 的配置项（option）。

这通常包括:

  • • 图表类型、

  • • 数据源、

  • • 颜色、

  • • 图例、

  • • 坐标轴、

  • • 系列等设置。

ECharts 文档提供了详细的配置项说明和示例。

const option = {
  title: {
    text: '示例图表',
  },
  tooltip: {},
  legend: {
    data: ['数据系列'],
  },
  xAxis: {
    data: ['类别A', '类别B', '类别C'],
  },
  yAxis: {},
  series: [
    {
      name: '数据系列',
      type: 'bar',
      data: [100, 200, 300],
    },
  ],
};

　　

6. 更新图表数据

当需要动态更新图表数据时，可以直接修改 option 对象中的数据部分，然后调用 setOption() 方法重新加载图表。

为了优化性能，可以使用 setOption() 的第二个参数 notMerge 设置为 false，以合并新旧配置而不是完全替换。

// 更新数据
const newData = [400, 500, 600];
this.option.series[0].data = newData;

// 重新加载图表
this.chartInstance.setOption(this.option, { notMerge: true });

　　

注意事项

  • • 跨平台兼容性：确保你的 ECharts 版本与 uni-app 的版本兼容，并且了解不同平台（如 H5、小程序、App）可能存在的差异和限制。某些功能可能需要特定版本的 ECharts 或 uni-app 支持。

  • • 地图数据：如果你使用地图图表，需要单独引入对应的地图数据文件，并使用 echarts.registerMap() 方法注册地图。地图数据可以从 ECharts 官方下载或在线定制。

  • • 性能优化：对于大数据量或复杂图表，注意优化数据处理和渲染性能，可以利用 ECharts 的数据分流、懒加载等功能。

遵循以上步骤，你应该能够在 uni-app 中成功集成并使用 ECharts 图表。

具体实现时，请参考 ECharts 官方文档以获取最新的配置选项和最佳实践。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

uni-app 如何使用 renderjs 创建echart图表

在 uni-app 中使用 renderjs 模式创建 ECharts 图表，主要是利用 uni-app 提供的 RenderJS 能力，将 ECharts 渲染到指定的容器内。

RenderJS 是 uni-app 为解决跨端渲染复杂图形和自定义组件而引入的一种机制。

以下是一个基本步骤指南：

1. 安装 ECharts

确保已通过 npm 安装 ECharts：

npm install echarts --save

　　

2. 创建 ECharts 配置文件

在项目中创建一个 .js 文件（如 chartConfig.js），编写所需的 ECharts 配置对象：

// chartConfig.js
export default {
  title: {
    text: '示例图表'
  },
  tooltip: {},
  legend: {
    data: ['数据系列']
  },
  xAxis: {
    data: ['类别A', '类别B', '类别C']
  },
  yAxis: {},
  series: [
    {
      name: '数据系列',
      type: 'bar',
      data: [100, 200, 300]
    }
  ]
};

　　

3. 创建 renderjs 页面

在 uni-app 项目中创建一个使用 RenderJS 的页面（如 chartPage.vue）。在 <template> 中添加一个 renderjs 标签作为 ECharts 的渲染容器：

<!-- chartPage.vue -->
<template>
  <view>
    <renderjs :canvas-id="'chartCanvas'"></renderjs>
  </view>
</template>

　　

4. 编写 renderjs 函数

在 <script> 标签内，引入 ECharts 和之前创建的配置文件，并编写一个 render 函数。这个函数将在页面渲染时被调用，负责初始化 ECharts 实例并设置图表配置：

<script>
import * as echarts from 'echarts';
import chartConfig from './chartConfig.js';

export default {
  onReady() {
    this.renderChart();
  },
  methods: {
    async renderChart() {
      const canvasId = 'chartCanvas';
      const chartInstance = echarts.init({
        canvas: this.$refs[canvasId].canvas,
        renderer: 'canvas'
      });

      chartInstance.setOption(chartConfig);

      // 如果需要监听窗口大小改变以自适应图表，可以添加以下代码
      window.addEventListener('resize', () => {
        chartInstance.resize();
      });
    }
  }
};
</script>

　　

5. （可选）注册自定义主题

如果需要使用自定义主题，可以按照 ECharts 官方文档的指引创建主题 JSON 文件，然后在 renderjs 函数中注册：

// 引入主题文件
import customTheme from './customTheme.json';

echarts.registerTheme('myCustomTheme', customTheme);

// 使用自定义主题初始化图表
const chartInstance = echarts.init({
  canvas: this.$refs[canvasId].canvas,
  renderer: 'canvas',
  theme: 'myCustomTheme'
});

　　

6. （可选）更新图表数据

当需要动态更新图表数据时，可以修改配置对象中的数据部分，然后调用 setOption() 方法：

// 更新数据
chartConfig.series[0].data = [400, 500, 600];

// 重新加载图表
chartInstance.setOption(chartConfig, { notMerge: true });

　　

注意事项

  • • 跨平台兼容性：确保 ECharts 版本与 uni-app 的版本兼容，并了解不同平台（如 H5、小程序、App）可能存在的差异和限制。

  • • 性能优化：对于大数据量或复杂图表，注意优化数据处理和渲染性能，可以利用 ECharts 的数据分流、懒加载等功能。

<template>
    <view class="content">
        <!-- #ifdef APP-PLUS || H5 -->
        <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
        <button @click="changeOption">更新数据</button>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS || H5 -->
        <view>非 APP、H5 环境不支持</view>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                option: {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
            }
        },
        onLoad() {

        },
        methods: {
            changeOption() {
                const data = this.option.series[0].data
                // 随机更新示例数据
                data.forEach((item, index) => {
                    data.splice(index, 1, Math.random() * 40)
                })
            },
            onViewClick(options) {
                console.log(options)
            }
        }
    }
</script>

<script module="echarts" lang="renderjs">
    let myChart
    export default {
        mounted() {
            if (typeof window.echarts === 'function') {
                this.initEcharts()
            } else {
                // 动态引入较大类库避免影响页面展示
                const script = document.createElement('script')
                // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
                script.src = 'static/echarts.js'
                script.onload = this.initEcharts.bind(this)
                document.head.appendChild(script)
            }
        },
        methods: {
            initEcharts() {
                myChart = echarts.init(document.getElementById('echarts'))
                // 观测更新的数据在 view 层可以直接访问到
                myChart.setOption(this.option)
            },
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                // 监听 service 层数据变更
                myChart.setOption(newValue)
            },
            onClick(event, ownerInstance) {
                // 调用 service 层的方法
                ownerInstance.callMethod('onViewClick', {
                    test: 'test'
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .echarts {
        margin-top: 100px;
        width: 100%;
        height: 300px;
    }
</style>

　　

uni-app 中 renderjs是什么，如何用

什么是 RenderJS in uni-app?

RenderJS 是 uni-app 提供的一种技术手段，允许开发者在特定环境下（通常指 App 端的 Vue 页面）直接在视图层（而非逻辑层）执行 JavaScript 代码。

这样做的主要目的是 为了提升复杂视图渲染和交互的性能，尤其是在处理大量图形绘制、动画效果、地图渲染等场景时，通过减少逻辑层与视图层之间的通信损耗，提供更高效的视图更新和用户交互体验。

RenderJS 主要具有以下特点：

  1. 1. 运行环境：RenderJS 代码仅支持在 uni-app 的 App-Vue 环境 和 H5 环境 中运行。这意味着它不适用于小程序等其他平台，也不适用于原生的 iOS 或 Android 开发。

  2. 2. 性能优势：通过在视图层直接执行 JavaScript，RenderJS 可以避免频繁的数据绑定和视图更新，显著降低逻辑层与视图层之间的通讯损耗，特别适合处理需要密集计算或实时更新的视图内容，如地图渲染、图表绘制、游戏图形等。

  3. 3. 交互能力：RenderJS 提供了更强大的视图交互能力，可以直接响应触屏事件、手势识别等，实现流畅的用户交互体验。

  4. 4. 库支持：尽管 uni-app 提供了自身的地图、图表等组件，但有时开发者可能需要使用第三方库（如 Leaflet、ECharts、Three.js 等）以满足更复杂的需求。RenderJS 允许在视图层直接引入并使用这些库，从而实现更丰富的功能。

如何在 uni-app 中使用 RenderJS?

使用 RenderJS 的基本步骤如下：

1. 准备页面结构

在 uni-app 的 Vue 页面中，需要创建一个用于承载 RenderJS 代码的容器。通常，这会是一个特殊的 <renderjs> 标签，带有唯一的 canvas-id 属性，以便在 JavaScript 中引用：

<!-- 页面模板 (例如: renderjsPage.vue) -->
<template>
  <view>
    <renderjs canvas-id="myRenderJsCanvas"></renderjs>
  </view>
</template>

　　

2. 编写 RenderJS 代码

编写需要在视图层执行的 JavaScript 代码。这可以包括 DOM 操作、样式设置、事件监听、图形绘制等。代码通常保存在 Vue 组件的 methods 或 computed 中，然后在适当的生命周期钩子（如 mounted 或 onReady）中执行：

// 页面脚本 (继续在 renderjsPage.vue)
<script>
export default {
  data() {
    return {
      // 可能需要的数据对象
    };
  },
  mounted() {
    this.executeRenderJs();
  },
  methods: {
    async executeRenderJs() {
      const renderJsCode = `
        // 在这里编写要执行的 RenderJS 代码
        const canvas = document.getElementById('myRenderJsCanvas');
        const ctx = canvas.getContext('2d');

        // 示例：绘制一个红色矩形
        ctx.fillStyle = 'red';
        ctx.fillRect(10, 10, 100, 100);
      `;

      // 使用 uni-app 提供的方法执行 RenderJS 代码
      await uni.canvasExecuteJavaScript({
        canvasId: 'myRenderJsCanvas',
        code: renderJsCode,
      });
    },
  },
};
</script>

　　

3. 引入外部库

如果需要在 RenderJS 中使用第三方库，如 Leaflet、ECharts 等，需要确保库的源码可以在视图层访问，并在 RenderJS 代码中正确初始化：

  • • 安装库：使用 npm 安装所需的库。

  • • 引入库：将库的源码（通常是压缩后的 .js 文件）作为字符串嵌入到 renderJsCode 中。这可能需要使用 fs.readFileSync 或 Webpack 的 raw-loader 等工具。

  • • 初始化库：在 renderJsCode 中编写库的初始化代码，确保库在 RenderJS 环境中能够正常工作。

4. 数据通信

由于 RenderJS 运行在视图层，与 Vue 逻辑层之间需要进行数据交换：

  • • 逻辑层向 RenderJS 传递数据：将数据作为变量直接写入 renderJsCode 字符串中，或者通过 uni.postMessage 从逻辑层发送数据到视图层。

  • • RenderJS 向逻辑层发送数据：在 RenderJS 代码中使用 uni.postMessage 发送数据到逻辑层，逻辑层通过监听 uni.onMessage 事件接收数据。

注意事项

  • • 性能优化：合理组织 RenderJS 代码，避免频繁的数据交换，确保高效执行。

  • • 兼容性检查：确保所使用的库和 RenderJS 代码在目标平台上（App 端的 Vue 页面）能够正常工作。

  • • 异常处理：在 RenderJS 代码中适当使用 try...catch 语句捕获并处理可能发生的错误。

在实际开发过程中，请参考 uni-app 的官方文档以获取最新的 API 说明和最佳实践。

 
posted @ 2024-04-12 11:47  冉姑娘  阅读(861)  评论(0)  编辑  收藏  举报