uniapp使用echart

在uniapp中使用echarts可以按照以下步骤进行：

1. 安装echarts：可以使用npm安装或者直接下载echarts的JS文件。

2. 在uniapp项目中创建一个新的页面或组件，例如“echartsPage”。

3. 在“echartsPage”的vue文件中引入echarts：

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: {},
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 在这里使用echarts初始化图表
      // 例如：this.chartData = echarts.init(this.$refs.chart);
    },
  },
};
</script>

4. 在模板中添加一个canvas元素，用于显示echarts图表：

<template>
  <view class="echarts-container">
    <canvas ref="chart" class="echarts-chart"></canvas>
  </view>
</template>

5. 在样式中设置canvas元素的宽度和高度：

<style>
.echarts-chart {
  width: 100%;
  height: 400rpx;
}
</style>

6. 在“echartsPage”的js文件中使用echarts的API初始化图表，例如：

initChart() {
  // 使用echarts初始化图表
  this.chartData = echarts.init(this.$refs.chart);

  // 定义图表的配置项和数据
  const option = {
    title: {
      text: 'ECharts 入门示例',
      subtext: '示例',
    },
    tooltip: {},
    legend: {
      data: ['销量'],
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

  // 使用指定的配置项和数据显示图表
  this.chartData.setOption(option);
},

7. 最后，在App.vue文件中引入echarts的样式文件：

<style>
@import "~echarts/dist/echarts.min.css";
</style>

这样就可以在uniapp中使用echarts了。您可以根据需要修改图表的配置项和数据，以满足您的需求。