test/pie-richText.html - master - githubmirror/echarts

test/pie-richText.html
762 строки27 KB
pissang
test: use require to replace original jquery loading
10 май 2021, 09:02
10 май 2021, 09:02f07de0b
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main3"></div>









        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;
            var colorList = [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 1,
                y: 1,
                x2: 1,
                y2: 0,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#FDB36ac2' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                        offset: 0,
                        color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#FECE4391' // 100% 处的颜色
                    }
                ],
                globalCoord: false // 缺省为 false
            }
        ]
        var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']

        function getRich() {
            let result = {}
            colorLine.forEach((v, i) => {
                result[`hr${i}`] = {
                    backgroundColor: colorLine[i],
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [0, 3, 3, -12]
                }
                result[`a${i}`] = {
                    padding: [-20, -60, 0, -20],
                    color: colorLine[i],
                    fontSize: 12
                }
            })
            return result
        }
        let data = [{
            'name': '北京',
            'value': 25
        }, {
            'name': '上海',
            'value': 20
        }, {
            'name': '广州',
            'value': 18
        }, {
            'name': '深圳',
            'value': 15
        }, {
            'name': '未知',
            'value': 13
        }, {
            'name': '海外',
            'value': 9
        }].sort((a, b) => {
            return b.value - a.value
        })
        data.forEach((v, i) => {
            v.labelLine = {
                lineStyle: {
                    width: 1,
                    color: colorLine[i]
                }
            }
        })
        option = {
            series: [{
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                clockwise: true,
                avoidLabelOverlap: true,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: function(params) {
                        const name = params.name
                        const percent = params.percent + '%'
                        const index = params.dataIndex
                        return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
                    },
                    rich: getRich()
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                data,
                roseType: 'radius'
            }]
        }

            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Test Case from https://gallery.echartsjs.com/editor.html?c=xgnWZ8Z9lI'
                ],
                option: option
                // height: 300,
                // buttons: [{text: 'btn-txt', onclick: function () {}}],
                // recordCanvas: true,
            });
        });
        </script>








        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;

            var data = [{
                    value: 33310.12,
                    name: '邮件营销'
                },
                {
                    value: 234.88,
                    name: '联盟广告'
                },
                {
                    value: 13544444.44,
                    name: '视频广告'
                },
                {
                    value: 1.00,
                    name: '搜索引擎'
                },
                {
                    value: 310.12,
                    name: '测试文案1'
                },
                {
                    value: 234.33,
                    name: '测试文案2'
                },
                {
                    value: 135.55,
                    name: '测试文案3'
                },
                {
                    value: 1548,
                    name: '测试文案文字超多'
                }
            ];
            var color = ['#000000', '#dedede', '#343434', '#dfdfdf', ];
            option = {
                // title: {
                //     text: '饼图标签两端对称效果',
                //     subtext: '关键词: [饼图][环形图][引导线距离饼距离][label两端对称][label距离引导线距离]',
                //     x: 'center'
                // },
                series: [
                    // // 这个pie用于形成引导线和饼图间距
                    {
                        type: 'pie',
                        radius: ['40%', '55%'],
                        minAngle: 90,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: data,
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        minAngle: 90, // label最小扇区大小
                        label: {
                            normal: {
                                alignTo: 'edge', // label两端对称布局
                                //  ECharts v4.6.0 版本起，提供了 'labelLine' 与 'edge' 两种新的布局方式
                                margin: 90, // 布局为两端对称时候需要外边距防止图表变形 数值随意不要太大
                                distanceToLabelLine: 0, // label距离引导线距离
                                formatter: function(param) {
                                    return '{a|' + param.name + '}\n{hr|}\n' + '{d|' + param.value + '}';
                                },
                                opacity: 1,
                                backgroundColor: 'rgba(255, 0, 0, 0.2)',
                                rich: {
                                    a: {
                                        padding: [0, 10, 4, 10],  // 4边距是文字和hr间距，此处的边距10用于解决label和引导线有间距问题
                                        color: 'blue'
                                    },
                                    d: {
                                        padding: [4, 10, 0, 10],
                                        color: 'purple'
                                    },
                                    hr: {
                                        borderWidth: 1,
                                        width: '100%',
                                        height: 0,
                                        borderColor: 'blue'
                                    }
                                }
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'blue'
                            }
                        },
                        itemStyle: {
                            opacity: 0
                        },
                        radius: ['40%', '60%'],
                        data: data,
                    }
                ]
            };
            var chart = testHelper.create(echarts, 'main1', {
                title: [
                    'Test Case from https://gallery.echartsjs.com/editor.html?c=x1TVKFGtZ1'
                ],
                option: option
                // height: 300,
                // buttons: [{text: 'btn-txt', onclick: function () {}}],
                // recordCanvas: true,
            });
        });
        </script>



        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;

                var seriesData = [{
                    name: "大白",
                    value: "40000"
                }, {
                    name: "长大",
                    value: "53000"
                }, {
                    name: "杜洛克",
                    value: "40000"
                }, {
                    name: "约克猪",
                    value: "10000"
                }, {
                    name: "二元",
                    value: "40000"
                }, {
                    name: "三元",
                    value: "60000"
                }, {
                    name: "大长",
                    value: "10000"
                }, {
                    name: "PIC",
                    value: "20000"
                }];
                var legendData1 = ["大白", "长大", "杜洛克", "约克猪"]
                var legendData2 = ["二元", "三元", "大长","PIC"]
                var colorList = ['#0066FF', '#2E2EE6', '#4400CC', '#00AACC', '#9BBF30', '#E60000', '#92368D', '#BF9926'];
                option = {
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#000F44' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#000B3B' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    // title: {
                    //     text: '品种',
                    //     x: '56%',
                    //     y: 'center',
                    //     textStyle: {
                    //         fontSize:40,
                    //         color: '#fff'
                    //     }
                    // },
                    tooltip: {
                        trigger: 'item',
                        borderColor: 'rgba(255,255,255,.3)',
                        backgroundColor: 'rgba(13,5,30,.6)',
                        borderWidth: 1,
                        padding: 5,
                        formatter: function(parms) {
                            var str = parms.marker + "" + parms.data.name + "</br>" +
                                "数量：" + parms.data.value + "头</br>" +
                                "占比：" + parms.percent + "%";
                            return str;
                        }
                    },
                    legend: [{
                        type: "scroll",
                        orient: 'vertical',
                        icon:'square',
                        left: '8%',
                        align: 'left',
                        top: 'center',
                        itemGap: 20,
                        // bottom:'50%',
                        textStyle: {
                            fontSize:14,
                            color: '#AAAAAA'
                        },
                        data: legendData1
                    }, {
                        type: "scroll",
                        orient: 'vertical',
                        icon:'square',
                        left: '18%',
                        align: 'left',
                        top: 'center',
                        itemGap: 20,
                        // bottom:'50%',
                        textStyle: {
                            fontSize:14,
                            color: '#AAAAAA'
                        },
                        data: legendData2
                    }],
                    series: [{
                        type: 'pie',
                        z: 3,
                        center: ['62%', '50%'],
                        radius: ['25%', '37%'],
                        clockwise: true,
                        avoidLabelOverlap: true,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{a|{b}：{d}%}\n{hr|}',
                            rich: {
                                // hr: {
                                //     backgroundColor: 't',
                                //     borderRadius: 3,
                                //     width: 3,
                                //     height: 3,
                                //     padding: [3, 3, 0, -12]
                                // },
                                a: {
                                    color:'#fff',
                                    padding: [0, -80, 20, -80]
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 40,
                                length2: 90,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        },
                        data: seriesData
                    }, {
                        name:'第一层环',
                        type: 'pie',
                        z: 2,
                        tooltip:{
                            show:false
                        },
                        center: ['62%', '50%'],
                        radius: ['37%', '47%'],
                        hoverAnimation: false,
                        clockWise: false,
                        itemStyle: {
                            normal: {
                                // shadowBlur: 40,
                                // shadowColor: 'rgba(0, 255, 255,.3)',
                                color: 'rgba(1,15,80,.9)',
                            },
                            emphasis:{
                                color: 'rgba(1,15,80,.9)',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }, {
                        name:'第二层环',
                        type: 'pie',
                        z: 1,
                        tooltip:{
                            show:false
                        },
                        center: ['62%', '50%'],
                        radius: ['47%', '62%'],
                        hoverAnimation: false,
                        clockWise: false,
                        itemStyle: {
                            normal: {
                                // shadowBlur: 40,
                                // shadowColor: 'rgba(0, 255, 255,.3)',
                                color: 'rgba(0,15,69,.8)',
                            },
                            emphasis:{
                                color: 'rgba(0,15,69,.8)',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }]
                };
                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        'Test Case from https://gallery.echartsjs.com/editor.html?c=xD3PY0UKmS'
                    ],
                    option: option
                    // height: 300,
                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
                    // recordCanvas: true,
                });
            });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                var option;

                let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
                let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
                let chartData = [{
                        name: "本科及以上",
                        value: 13211,
                        unit: '元'
                    },
                    {
                        name: "高中",
                        value: 42111,
                        unit: '元'
                    },
                    {
                        name: "初中及以下",
                        value: 81711,
                        unit: '元'
                    },
                    {
                        name: "其他",
                        value: 121711,
                        unit: '元'
                    }
                ];
                let arrName = [];
                let arrValue = [];
                let sum = 0;
                let pieSeries = [],
                    lineYAxis = [];

                // 数据处理
                chartData.forEach((v, i) => {
                    arrName.push(v.name);
                    arrValue.push(v.value);
                    sum = sum + v.value;
                })

                // 图表option整理
                chartData.forEach((v, i) => {
                    pieSeries.push({
                        name: '学历',
                        type: 'pie',
                        clockWise: false,
                        hoverAnimation: false,
                        radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                        center: ["30%", "50%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: v.value,
                            name: v.name
                        }, {
                            value: sum - v.value,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });
                    pieSeries.push({
                        name: '',
                        type: 'pie',
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
                        center: ["30%", "50%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: 7.5,
                            itemStyle: {
                                color: "#E3F0FF"
                            }
                        }, {
                            value: 2.5,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });
                    v.percent = (v.value / sum * 100).toFixed(1) + "%";
                    lineYAxis.push({
                        value: i,
                        textStyle: {
                            rich: {
                                circle: {
                                    color: color[i],
                                    padding: [0, 5]
                                }
                            }
                        }
                    });
                })

                option = {
                    backgroundColor: '#fff',
                    color: color,
                    grid: {
                        top: '15%',
                        bottom: '54%',
                        left: "30%",
                        containLabel: false
                    },
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: function(params) {
                                let item = chartData[params];
                                console.log(item)
                                return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
                            },
                            interval: 0,
                            inside: true,
                            textStyle: {
                                color: "#333",
                                fontSize: 14,
                                rich: {
                                    line: {
                                        width: 170,
                                        height: 10,
                                        backgroundColor: {image: dashedPic}
                                    },
                                    name: {
                                        color: '#666',
                                        fontSize: 14,
                                    },
                                    bd: {
                                        color: '#ccc',
                                        padding: [0, 5],
                                        fontSize: 14,
                                    },
                                    percent:{
                                        color: '#333',
                                        fontSize: 14,
                                    },
                                    value: {
                                        color: '#333',
                                        fontSize: 16,
                                        fontWeight: 500,
                                        padding: [0, 0, 0, 20]
                                    },
                                    unit: {
                                        fontSize: 14
                                    }
                                }
                            },
                            show: true
                        },
                        data: lineYAxis
                    }],
                    xAxis: [{
                        show: false
                    }],
                    series: pieSeries
                };
                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Test Case from https://gallery.echartsjs.com/editor.html?c=xF_AXrV7sK'
                    ],
                    option: option
                    // height: 300,
                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
                    // recordCanvas: true,
                });
            });
        </script>
    </body>
</html>