uniapp 获取数据传入图表完整示例：echarts 图表展示

<p>本文将提供一个完整的示例，演示如何在 uniapp 中获取数据并传入 echarts 图表，实现数据可视化。</p>
<h3>1. 引入 echarts 图表库和 axios 请求库</h3>
<pre><code class="language-html"><template>
  <view class="container">
    <ec-canvas id="mychart" canvas-id="mychart"></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '@/components/ec-canvas/echarts.js';
  import axios from 'axios';

  export default {
    data() {
      return {
        chartData: null // 存放图表数据
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        axios.get('http://xxx.com/getChartData').then(res => {
          this.chartData = res.data // 获取到数据并存入 chartData 中
          this.renderChart() // 数据获取成功后渲染图表
        }).catch(err => {
          console.log(err)
        })
      },
      renderChart() {
        const chart = echarts.init(this.$refs.mychart) // 初始化 echarts 图表
        chart.setOption({
          // 设置图表配置项和数据
          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: this.chartData.seriesData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script></code></pre>
<h3>2. 创建服务器端接口返回图表数据</h3>
<pre><code class="language-javascript">router.get('/getChartData', (req, res) => {
  const data = {
    seriesData: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ]
  }
  res.json(data) // 返回数据
})</code></pre>
<h3>3. 引入图表组件 ec-canvas</h3>
<pre><code class="language-html"><template>
  <view class="container">
    <ec-canvas id="mychart" canvas-id="mychart"></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '@/components/ec-canvas/echarts.js'; // 引入 echarts 图表库

  export default {
    mounted() {
      this.renderChart() // 在 mounted 生命周期中渲染图表
    },
    methods: {
      renderChart() {
        const chart = echarts.init(this.$refs.mychart) // 初始化 echarts 图表
        chart.setOption({
          // 设置图表配置项和数据
          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: '搜索引擎' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script></code></pre>
<p>ec-canvas 是 uniapp 提供的图表组件，可以将 echarts 图表渲染到页面中，更多用法请参考 uniapp 官方文档。</p>