echarts环形图数据展示

最新推荐文章于 2025-04-15 18:55:55 发布

原创

最新推荐文章于 2025-04-15 18:55:55 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何使用ECharts库创建环形图，并详细阐述了数据绑定、配置项设置以及动态更新数据的方法，帮助读者掌握在前端项目中实现环形图数据展示的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
   <div class="PassengerOringin">
       <div class="title">乘客来源</div>
       <div id="piechart" style="width:230px;height:230px;"></div>
   </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PassengerOringin',
  data () {
    return {
      
    }
  },
  methods:{
    initChart(){
        var total=459
        var myChart = echarts.init(document.getElementById('piechart'));
         var option = {
        title: {
                zlevel: 0,
                text: [
                    '{value|' + total + '}',
                    '{name|总数}',
                ].join('\n'),
                rich: {
                    value: {