使用Echarts创建饼图-优快云博客

本文介绍了如何在项目中安装并使用Echarts库来创建数据可视化的饼图，通过实例展示其基本步骤。

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

安装

cnpm install echarts --save
*

# 每个系列通过 type 决定自己的图表类型`在这里插入代码片`

*
type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    ==//引入 echarts.js ==
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
          ==//为ECharts准备一个具备大小（宽高）的Dom ==
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
         ==/ 基于准备好的dom，初始化echarts实例==
     var myChart = echarts.init(document.getElementById('main'));
 
     myChart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
     
      emphasis: {    // 高亮样式。
            itemStyle: {
                 // 高亮时点的颜色      
                     color: 'red'
            },
            label: {
                show: true,
                // 高亮时标签的文字
                formatter: '高亮时显示的标签内容'
            }
        },
	     data:[   // 数据数组，name 为数据项名称，value 为数据项值
                  {value:235, name:'视频广告'},
                  {value:274, name:'联盟广告'},
                  {value:310, name:'邮件营销'},
                  {value:335, name:'直接访问'},
                  {value:400, name:'搜索引擎'}
              ]
                }
            ]
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

echarts-饼图