uniapp h5使用echarts

可以使用uni-app提供的插件uni-echarts来在H5页面中使用echarts。具体步骤如下：

1. 安装uni-echarts插件：在HBuilderX中打开项目，点击菜单栏的工具 -> 插件市场，在搜索框中输入uni-echarts，点击安装即可。

2. 在需要使用echarts的页面引入echarts库和uni-echarts组件：

<template>
  <view>
    <uni-echarts :option="option" :height="300px"></uni-echarts>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import uniEcharts from '@/components/uni-echarts/uni-echarts.vue';

export default {
  components: {
    uniEcharts
  },
  data() {
    return {
      option: {
        // echarts配置项
      }
    }
  },
  mounted() {
    // 初始化echarts实例
    const chart = echarts.init(this.$refs.echarts);
    // 设置option
    chart.setOption(this.option);
  }
}
</script>

3. 在option中配置echarts图表的相关参数，例如：

option: {
  title: {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}