ECharts 饼图,tooltip 根据图形颜色变色


效果

代码

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts Study</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div class="cc" id="main" style="height:400px;width:50%;margin:0 auto;"></div>
    <hr />
    <div id="selectedPie" style="width:50%;margin:0 auto;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function(ec) {

            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));

            var ecConfig = require('echarts/config');

            window.onresize = myChart.resize;

            var option = {
                title: {
                    text: '全国各省涉农专利数据统计',
                    subtext: '全国各省涉农专利数据统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    //formatter: "数值:{c} <br/>占比:{d}%",
                    formatter: function(params, ticket, callback) {
                        var colorList;
                        colorList = ecConfig.color;

                        var res = '数值:' + params[2] + ' <br/>占比:' + params[3] + '%';
                        setTimeout(function() {
                            callback(ticket, res);
                            var color = colorList[params.dataIndex];
                            $('.echarts-tooltip').css({
                                borderColor: color
                            });
                        }, 1);
                        return 'loading';
                    },
                    borderColor: 'orange',
                    borderWidth: 1,
                    backgroundColor: 'rgba(255,255,255,0.7)',
                    textStyle: {
                        color: '#000',
                        fontSize: '48px'
                    }
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['北京', '河北', '山西', '内蒙古', '天津']
                },
                calculable: false,
                series: [{
                    name: '专利数量',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [{
                        value: 45.4,
                        name: '北京',
                        tooltip: {
                            borderColor: 'red'
                        }
                    }, {
                        value: 15.9,
                        name: '河北'
                    }, {
                        value: 10,
                        name: '山西'
                    }, {
                        value: 8,
                        name: '内蒙古'
                    }, {
                        value: 20.8,
                        name: '天津'
                    }]
                }]
            };

            // 为echarts对象加载数据 
            myChart.setOption(option);

            myChart.on(ecConfig.EVENT.PIE_SELECTED, function(param) {
                var selected = param.selected;

                var serie;
                var str = '当前选择: ';
                for (var idx in selected) {
                    serie = option.series[idx];
                    for (var i = 0, l = serie.data.length; i < l; i++) {
                        if (selected[idx][i]) {
                            str += '【系列' + idx + '】' + serie.name + ' : ' +
                                '【数据' + i + '】' + serie.data[i].name + ' ';
                        }
                    }
                }
                $('#selectedPie').html(str);
            }).on(ecConfig.EVENT.HOVER, function(pie) {
                // data: Object
                //     __labelX: 434
                //     __labelY: 367
                // name: "河北"
                // value: 15.9
                // __proto__: Object
                // dataIndex: 1
                // event: MouseEvent
                // name: "河北"
                // seriesIndex: 0
                // seriesName: "专利数量"
                // special: "15.88"
                // type: "hover"
                // value: 15.9
                var serie = pie;

                var str = '当前悬停: ';
                str += '【系列' + serie.seriesIndex + '】' + serie.seriesName + ' : ' +
                    '【数据' + serie.dataIndex + '】' + serie.name + ' ';
                $('#selectedPie').html(str);
            });;


        }
    );
    </script>
</body>

</html>

知识共享许可协议
《ECharts 饼图,tooltip 根据图形颜色变色》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: