uniapp使用echarts

大闷怪

于 2024-06-13 11:35:55 发布

阅读量198

点赞数 4

文章标签： uni-app echarts 前端

本文链接：https://blog.csdn.net/2303_76798990/article/details/139649846

版权

1、先安装echarts

npm install echarts --save

2、在需要使用echarts的页面引入echarts库。

import * as echarts from 'echarts';

3、创建一个容器用于显示折线图。

<template>
  <view class="chart-container">
    <canvas id="line-chart" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

4、在页面的mounted生命周期钩子函数中初始化图表。

mounted() {
  this.initLineChart();
},
methods: {
  initLineChart() {
    const chart = echarts.init(document.getElementById('line-chart'));
    const option = {
      // 配置折线图的相关参数
      // ...
    };
    chart.setOption(option);
  }
}