【uniapp 使用ECharts】

原创已于 2023-08-04 10:23:38 修改 · 6.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #echarts #前端

于 2023-08-03 18:10:35 首次发布

uniapp 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在Uniapp项目中使用ECharts进行数据可视化，包括安装ECharts插件、引入并在页面中创建实例，以及在H5环境下的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Uniapp可以使用ECharts进行数据可视化，需要按照以下步骤进行操作：

1. 安装ECharts插件

可以使用npm安装echarts插件，命令如下：

npm install echarts --save

2. 引入ECharts插件

在需要使用ECharts的页面中引入ECharts插件，例如在vue组件中引入：

import *as echarts from 'echarts'

3. 创建ECharts实例

在页面中创建ECharts实例，例如：

<template>
  <div>
    <canvas id="mychart" canvas-id="mychart" :canvas-type="canvasType"></canvas>
  </div>
</template>
<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        canvasType: '2d'
      }
    },
    mounted () {
      // #ifdef H5
			const ctx = document.getElementById('mychart')
	// #endif
      const chart = echarts.init(ctx)

      chart.setOption({
        title: {
          text: 'ECharts示例'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 30]
        }]
      })

      chart.on('click', params => {
        console.log(params)
      })
    }
  }
</script>

以上示例中，使用uni.createCanvasContext创建画布实例，然后使用echarts.init创建ECharts实例，并设置图表选项。最后，可以通过监听事件来响应用户的交互行为。这个适用于H5，小程序没试，APP的话需要配合render.js层来进行交互，如果实在懒得搞这些的话，那就直接用 ucharts 吧，省时间。