在uniapp中使用Echarts的案例

作者在使用 uniapp 时，需要使用 Echarts 显示统计图表。

导入 Echarts

使用 uni-app 的插件管理器导入 Echarts 插件。

导入完成后，在目录 uni_modules 中会出现 lime-echart 文件夹，这就是 echarts。

uni-app 版本 echarts 仓库地址：https://gitee.com/liangei/lime-echart

npm 安装 Echarts

npm install echarts --save

引入 Echarts

import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import * as echarts from 'echarts'

案例代码

<template>
  <view class="page">
    <view class="cu-card article">
      <view class="cu-item shadow">
        <view class="title">
          <view class="text-cut">资产走势</view>
        </view>
        <view class="content">
          <!-- 图形 -->
          <l-echart ref="chartRef"></l-echart>
        </view>
        <view class="content btn-group">
          <button class="cu-btn round bg-green sm">近一年</button>
          <button class="cu-btn round line-gray sm">近三年</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
const option = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 2300, 22400, 218000, 1350000, 1470, 2600000],
      type: 'line',
    },
  ],
}

onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  setTimeout(async () => {
    if (!chartRef.value) return
    const myChart = await chartRef.value.init(echarts)
    myChart.setOption(option)
  }, 300)
})
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;

  .charts-box {
    width: 100vw;
    height: 40vh;
  }

  .btn-group {
    display: flex;
    justify-content: end;
    gap: 20rpx;
  }
}
</style>

---

小机灵鬼阅读器
小机灵鬼博客