【ECharts】ECharts实现饼图

最新推荐文章于 2023-10-21 16:41:50 发布

richest_qi

最新推荐文章于 2023-10-21 16:41:50 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/109293193

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pie Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="pie_chart" style="width:420px;height:300px;"></div>
    <script src="./index.js"></script>
</body>
</html>

// index.js
var pie_chart = echarts.init(document.querySelector("#pie_chart"));
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};
pie_chart.setOption(option);

tooltip
提示框组件
- show
  布尔值，是否显示提示框
- trigger
  有以下三个值可选，其中，
  "item"，数据项图形触发，主要用在散点图、饼图等图表中；
  "axis"，坐标轴触发，主要用在柱状图、折线图等图表中；
  "none"，不触发，即任何时候都不显示提示框。
- formatter
  提示框浮层内容格式器，有两种方式：字符串模板和回调函数。
  本例中，使用的是字符串模板。
  模板变量有{a}，{b}，{c}，{d}和{e}，不同图表下，这些变量代表了不同含义。
  在饼图里，
  {a}，代表系列名称；
  {b}，代表数据项名称；
  {c}，代表数值；
  {d}，代表百分比。
legend
图例组件
- left
  图例组件距离容器左侧的距离
- orient
  图例列表的布局朝向。
  有以下两个值可选，其中，
  vertical，垂直布局；
  horizontal，水平布局。
- data
  图例的数据数组

在这里插入图片描述
参考文档
ECharts tooltip组件配置

richest_qi

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【ECharts】ECharts实现饼图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pie Chart</title> <script src="https://cdn.jsdelivr.ne
复制链接

扫一扫