ECharts饼图自定义

最新推荐文章于 2024-06-13 09:33:21 发布

aab438346

最新推荐文章于 2024-06-13 09:33:21 发布

阅读量1k

点赞数

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/LanTianYou/p/10872672.html

版权

[本文出自天外归云的博客园]

实现：

1、饼块可点击（点击饼块跳转到百度）

2、饼块自定义标签显示（显示个数、占比）

3、自定义标签连接线样式（虚线）

前端php代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><?php echo $title; ?></title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <?php include "commonHead.php"; ?>
</head>
<body>
<div class="container" style="margin-top: 10%">
    <!-- 饼图 -->
    <div id="myPie" style="width: 800px;height:600px;"></div>
</div>
</body>
</html>
<style>
</style>
<script type="text/javascript">
    // 制作饼图上的标签
    function makeLabel(labelValue, labelRate) {
        var label = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                formatter: [
                    '{title|{b}}{abg|}',
                    '  {head|}{valueHead|个数}{rateHead|占比}',
                    '{hr|}',
                    '  {head|}{value|' + labelValue + '}{rate|' + labelRate + '}'
                ].join('\n'),
                backgroundColor: '#eee',
                borderColor: '#777',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                    title: {
                        color: '#eee',
                        align: 'center'
                    },
                    abg: {
                        backgroundColor: '#333',

最低0.47元/天解锁文章

aab438346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts饼图自定义

[本文出自天外归云的博客园]实现：1、饼块可点击（点击饼块跳转到百度）2、饼块自定义标签显示（显示个数、占比）3、自定义标签连接线样式（虚线）前端php代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title...
复制链接

扫一扫