【一】结合html与Echarts绘制饼状图

Echarts是一个由百度开发的基于JavaScript语言的可视化图表库，里面包含了折线图、饼状图、柱状图、3D图等上百种图表绘制方法，可将其嵌入到大数据可视化界面中，实现炫酷的图表效果。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox等）及多种设备，可随时随地任性展示。在html中运用E

小宝学技术

2133人浏览 · 2023-11-14 11:14:37

小宝学技术 · 2023-11-14 11:14:37 发布

【一】结合html与Echarts绘制饼状图

Echarts是什么？

Echarts是一个由百度开发的基于JavaScript语言的可视化图表库，里面包含了折线图、饼状图、柱状图、3D图等上百种图表绘制方法，可将其嵌入到大数据可视化界面中，实现炫酷的图表效果。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox等）及多种设备，可随时随地任性展示。

Echarts结合html绘制饼图的步骤

在html中运用Echarts绘制图表的方法很多，在这里以饼状图为例讲解如何使用。使用的编辑器为VSCode。

1、在VSCode中新建一个html文件

在这里插入图片描述

2、按住“shift+1”(!)，按一下Enter键，即可生成html模板文件，就可以在里面写代码了

在这里插入图片描述

3、在head中引入echarts.min.js文件，这是可以使用echarts的前提

<script src="./js/echarts.min.js"></script>

在这里插入图片描述

4、进入Echarts官方，找到示例代码，点击饼图，选择第一个饼图效果

在这里插入图片描述

5、在head中添加style片段，用于设置页面大小和背景颜色，颜色可以随便选

<style>
        #pie {
            width: 600px;
            height: 450px;
            background-color: aquamarine;
        }
    </style>

6、在body部分编写代码，首先创建一个div部件，设置id=“pie”:

<div id="pie"></div>

7、在script中编写javascript代码。首先创建一个变量myChart：

var myChart = echarts.init(document.getElementById('pie'));

8、复制Echarts中饼图的代码：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

9、将option设置为变量：

var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

10、最后添加上下面的语句：

myChart.setOption(option);

11、在浏览器中打开，就可以看到饼图的效果了！

在这里插入图片描述

main.html完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>

    <style>
        #pie {
            width: 600px;
            height: 450px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="pie"></div>
    <script>
        var myChart = echarts.init(document.getElementById('pie'));

        var option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };

        myChart.setOption(option);
    </script>
</body>
</html>