uniapp微信小程序使用echarts教程

2天前阅读：97 类型：前端分类：uni-app 标签：微信小程序 Vue uni-app

echarts 全端兼容，一款使echarts图表能跑在uniapp各端中的插件, 支持uniapp/uniappx(web,ios,安卓,鸿蒙)，本文介绍如何在uniapp中使用echarts，可自由选择所需图表、坐标系、组件进行打包下载。

一、下载扩展包

可以选插件内完整的echarts包

或自定义包，自定义包下载地址：https://echarts.apache.org/zh/builder.html

二、将扩展包放置指定路径

这里放在项目根目录/lime-echart

三、页面扩展包引入

<script>
import * as echarts from '@/lime-echart/static/echarts.min'
</script>

四、页面代码

<template>
<!-- 图表 -->
      <view style="width:750rpx; height:550rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
<!-- 图表 -->
</template>

五、js代码

<script>
export default {
  data() {
    return {

    };
  },
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  methods: {
    async init() {
       const chart = await this.$refs.chartRef.init(echarts); // 根据索引获取不同的 ref
 var option= {
 color:'#ed0046',
  xAxis : [
  {
  type : 'category',
  data : ['2025-10-21','2025-10-20','2025-10-19'],
  boundaryGap: false,
  }
  ],
  yAxis : [
  {
  type : 'value',
  x: 'center',
  splitLine: {
 lineStyle: {
  type: 'dashed'
 }
  }
  },
   
  ],
  series: [
  {
  type:'line',
  smooth: true,
  data:['100','80','60'],
  areaStyle: {
 color:'#f7c7d5',
  }
  }
  ]
 }
 chart.setOption(option)
    }
  }
}
</script>

六、完整代码：折线统计图

<template>
<!-- 图表 -->
<view style="width:750rpx; height:550rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
<!-- 图表 -->
</template>
<script>
import * as echarts from '@/lime-echart/static/echarts.min'
export default {
  data() {
    return {

    };
  },
  methods: {
    async init() {
       const chart = await this.$refs.chartRef.init(echarts); // 根据索引获取不同的 ref
 var option= {
 color:'#ed0046',
  xAxis : [
  {
  type : 'category',
  data : ['2025-10-21','2025-10-20','2025-10-19'],
  boundaryGap: false,
  }
  ],
  yAxis : [
  {
  type : 'value',
  x: 'center',
  splitLine: {
 lineStyle: {
  type: 'dashed'
 }
  }
  },
   
  ],
  series: [
  {
  type:'line',
  smooth: true,
  data:['100','80','60'],
  areaStyle: {
 color:'#f7c7d5',
  }
  }
  ]
 }
 chart.setOption(option)
    }
  }
}
</script>