鍍金池/ 問(wèn)答/Java  PHP  C  HTML/ echart樣式如何修改，如下圖代碼

echart樣式如何修改，如下圖代碼

設(shè)計(jì)圖效果

clipboard.png

沒(méi)有用echart前

clipboard.png

用了echart

clipboard.png

問(wèn)題

  1. 標(biāo)題的位置設(shè)置為top:-10，就向上移，但是標(biāo)題就展示不完，如何達(dá)到標(biāo)題與餅圖有上下的距離
  2. 餅圖的背景色怎么換
  3. 餅圖的文字說(shuō)明，怎么設(shè)置展示value,不展示name

代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>錯(cuò)題詳情</title>
    <link  rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/jie.css"/>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>
<body style="background-color: #fff">
<!--頂部-->
<header class="jie-header">
    <div class="jie-goback"><img src="images/goBack.jpg" alt="goback"/></div>
    <h1 class="header-title">試卷</h1>
    <div class="header-right">
        <span class="del">刪除</span>
        <img class="yellow-del" src="images/yellowDel.jpg" alt="del"/>
    </div>
</header>
<!--內(nèi)容-->
<section class="single-selection">
    <div class="selection-header">
        <div class="header-title">2017年普通高等學(xué)校招生全國(guó)統(tǒng)一考試(新課標(biāo)||卷): 理綜</div>
        <div class="header-text">(本試卷難度3.2, 總分120分,考試時(shí)間為100分鐘)</div>
    </div>
    <div class="selection-body">
        <h2>共分為3個(gè)總分</h2>
        <div class="jie-hr"></div>

            <div id="main" style="width: 6.0rem;height:4.0rem;"></div>

    </div>
    <div class="selection-footer">
        <div class="body-button">開(kāi)始答題</div>
    </div>
</section>
<!--底部-->
<footer class="jie-footer">
    <div class="footer-item-left">
        <img class="text-img" src="images/indexHomeYellow.jpg" alt="home"/>
        <p class="item-text">首頁(yè)</p>
    </div>
    <div class="footer-item-center">
        <img class="text-img" src="images/indexErrorWhite.jpg" alt="error-title"/>
        <p class="item-text">錯(cuò)題庫(kù)</p>
    </div>
    <div class="footer-item-right">
        <img class="text-img" src="images/indexMyWhite.jpg" alt="mg"/>
        <p class="item-text">我的</p>
    </div>
</footer>
<script src="js/echarts.js"></script>
<script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項(xiàng)和數(shù)據(jù)
    var option = {
        title: {
            text: '總共分為3個(gè)部分'

        },
        tooltip: {},
        legend: {
            bottom: 0,
            left: 'center',
            data: ['單選題', '多選題','完型填空']
        },
        series: [{
            name: '銷(xiāo)量',
            type: 'pie',
            data: [
                {value:100, name: "單選題"},
                {value:50, name: "多選題"},
                {value:25, name: "完型填空"}
            ]
        }]
    };

    // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
</script>
</body>
</html>
回答
編輯回答
初念

1.標(biāo)題可以不用Echarts的標(biāo)題
2.` series: [{

        name: '銷(xiāo)量',
        type: 'pie',
                                itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = ['#C1232B', '#B5C334','#FCCE10','#E87C25'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }，
        data: [
            {value:100, name: "單選題"},
            {value:50, name: "多選題"},
            {value:25, name: "完型填空"}
        ]
    }]`

3.不知道你指的是什么說(shuō)明，tooltip？

2017年2月18日 21:41
編輯回答
編輯回答
夢(mèng)一場(chǎng)

建議查看echarts官方API ，http://echarts.baidu.com/opti...

2017年2月24日 15:41