image.png

var img =
    'data:image/png;base64,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';

var trafficWay = [
    {
        name: '火车',
        value: 20,
    },
    {
        name: '飞机',
        value: 10,
    },
    {
        name: '客车',
        value: 30,
    },
    {
        name: '轮渡',
        value: 40,
    },
];

var data = [];
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
for (var i = 0; i < trafficWay.length; i++) {
    data.push(
        {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor: color[i],
                    shadowColor: color[i],
                },
            },
        },
        {
            value: 2,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                },
            },
        }
    );
}
var seriesOption = [
    {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                        } else {
                            return '';
                        }
                    },
                },
                labelLine: {
                    length: 30,
                    length2: 100,
                    show: true,
                    color: '#00ffff',
                },
            },
        },
        data: data,
    },
];
option = {
    backgroundColor: '#0A2E5D',
    color: color,
    title: {
        text: '交通方式',
        top: '48%',
        textAlign: 'center',
        left: '49%',
        textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: '400',
        },
    },
    graphic: {
        elements: [
            {
                type: 'image',
                z: 3,
                style: {
                    image: img,
                    width: 178,
                    height: 178,
                },
                left: 'center',
                top: 'center',
                position: [100, 100],
            },
        ],
    },
    tooltip: {
        show: false,
    },
    legend: {
        icon: 'circle',
        orient: 'horizontal',
        // x: 'left',
        data: ['火车', '飞机', '客车', '轮渡'],
        right: 340,
        bottom: 150,
        align: 'right',
        textStyle: {
            color: '#fff',
        },
        itemGap: 20,
    },
    toolbox: {
        show: false,
    },
    series: seriesOption,
};

image.png

    
    // github: github.com/jackshawn/pics-by-echarts
    
    option = {
        title: {
            text: '孤帆远影碧空尽,唯见长江天际流',
            textStyle: {
                color: '#555'
            }
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '1%'
        },
        backgroundColor: new echarts.graphic.RadialGradient(0.62, 0.45, 1, [{
            offset: 0,
            color: '#fe9e80'
        }, {
            offset: 1,
            color: '#9bc9f1'
        }], false),
        xAxis: [{
            boundaryGap: false,
            data: new Array(15),
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            min: 0,
            max: 10,
            type: 'value',
            splitLine: {
                show: false
            }

        }],
        series: [{
            //mountain background
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#2a9c91',
                    opacity: 0.4
                }
            },
            data: [5, 5, 5, 6.1, 6.2, 6.3, 6.4, 6, 4, 4, 4, 4, 4, 4, 4],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //mountain behind
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#2a9c91',
                    opacity: 0.8
                }
            },
            data: [4, 4, 4, 4, 4, 4, 4, 4, 3, 4.5, 5, 6, 6.5, 7, 7.2],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //river behind
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#2dc3b5',
                    opacity: 1
                }
            },
            data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //mountain left
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#0f6960',
                    opacity: 1
                }
            },
            data: [6.5, 6, 6, 6, 5.8, 5.2, 4.8, 4.2, 2, 0, 0, 0, 0, 0, 0],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //river middle
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#2dc3b5',
                    opacity: 1
                }
            },
            data: [2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8, 2.8],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //mountain right
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#0f6960',
                    opacity: 1
                }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 4, 4.8, 5, 5.5],
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        }, {
            //river front
            type: 'line',
            areaStyle: {
                normal: {
                    color: '#2dc3b5',
                    opacity: 0.8
                }
            },
            data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
            smooth: true,
            smoothMonotone: 'x',
            symbolSize: 0,
            lineStyle: {
                normal: {
                    width: 0
                }
            },
            animationDelayUpdate: function(idx) {
                return idx * 5;
            }
        }, {
            type: 'graph',
            data: [{
                    symbolSize: 0,
                    x: 0,
                    y: 0
                }, {
                    symbolSize: 0,
                    x: 200,
                    y: 100
                },
                //sun
                {
                    symbolSize: 100,
                    x: 130,
                    y: 45
                },
                //sun shadow
                {
                    symbolSize: [40, 10],
                    symbolOffset: [0, 180],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            opacity: 0.2
                        }
                    },
                }, {
                    symbolSize: [100, 30],
                    symbolOffset: [0, 200],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            opacity: 0.25
                        }
                    },
                }, {
                    symbolSize: [60, 20],
                    symbolOffset: [0, 225],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            opacity: 0.2
                        }
                    },
                }, {
                    symbolSize: [20, 10],
                    symbolOffset: [0, 245],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            opacity: 0.2
                        }
                    },
                }
            ],
            itemStyle: {
                normal: {
                    color: '#ff5722',
                    shadowColor: '#ff5722',
                    shadowBlur: 100
                }
            },
            silent: true,
            z: 3
        }, {
            //boat
            type: 'graph',
            data: [{
                    symbolSize: 0,
                    x: 0,
                    y: 0
                }, {
                    symbolSize: 0,
                    x: 200,
                    y: 100
                }, {
                    symbolSize: [35, 40],
                    symbolOffset: [20, 120],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            color: '#333',
                        }
                    },
                    symbol: 'path://M27.310007,2.749997l22.5,0c-2.485281,0 -4.5,14.326891 -4.5,32.000002c0,17.673113 2.014718,32 4.5,32l-22.5,0l0,0c-2.485281,0 -4.5,-14.326889 -4.5,-32c0,-17.673111 2.014718,-32.000002 4.5,-32.000002z M12.75,70.184998l47,0l-11,10l-30,-1l-6,-9z',
                }, {
                    //boat shadow
                    symbolSize: [30, 5],
                    symbolOffset: [19, 142],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            color: '#333',
                            opacity: 0.1
                        }
                    },
                    symbol: 'roundRect'
                }, {
                    symbolSize: [18, 15],
                    x: 130,
                    y: 45,
                    itemStyle: {
                        normal: {
                            color: '#333',
                            opacity: 0.1
                        }
                    },
                    symbolRotate: 2,
                    symbolOffset: [20, 151],
                    symbol: 'roundRect'
                },
                //wave
                {
                    name: 'wave1',
                    symbolSize: 0,
                    x: 126,
                    y: 86
                }, {
                    name: 'wave2',
                    symbolSize: 0,
                    x: 130,
                    y: 86
                }, {
                    name: 'wave3',
                    symbolSize: 0,
                    x: 130,
                    y: 93
                }, {
                    name: 'wave4',
                    symbolSize: 0,
                    x: 134,
                    y: 93
                }, {
                    name: 'wave5',
                    symbolSize: 0,
                    x: 144,
                    y: 90
                }, {
                    name: 'wave6',
                    symbolSize: 0,
                    x: 148,
                    y: 90
                }
            ],
            links: [{
                source: 'wave1',
                target: 'wave2'
            }, {
                source: 'wave3',
                target: 'wave4'
            }, {
                source: 'wave5',
                target: 'wave6'
            }],
            lineStyle: {
                normal: {
                    width: 1,
                    curveness: 0.45,
                    color: '#0f6960'
                }
            },
            silent: true,
            symbolRotate: -2,
            z: 3
        }, {
            //birds
            type: 'graph',
            data: [
                //bg
                {
                    symbolSize: 0,
                    x: 0,
                    y: 0,
                }, {
                    symbolSize: 0,
                    x: 200,
                    y: 100,
                },
                //bird1
                {
                    symbolSize: 0,
                    x: 120,
                    y: 50,
                    name: 'first-bird-left'
                }, {
                    symbolSize: 3,
                    x: 125,
                    y: 52,
                    name: 'first-bird'
                }, {
                    symbolSize: 0,
                    x: 130,
                    y: 50,
                    name: 'first-bird-right'
                },
                //bird2
                {
                    symbolSize: 0,
                    x: 110,
                    y: 43,
                    name: 'second-bird-left'
                }, {
                    symbolSize: 2,
                    x: 115,
                    y: 45,
                    name: 'second-bird'
                }, {
                    symbolSize: 0,
                    x: 120,
                    y: 43,
                    name: 'second-bird-right'
                },
                //bird3
                {
                    symbolSize: 0,
                    x: 112,
                    y: 52,
                    name: 'third-bird-left'
                }, {
                    symbolSize: 2,
                    x: 115,
                    y: 53,
                    name: 'third-bird'
                }, {
                    symbolSize: 0,
                    x: 118,
                    y: 52,
                    name: 'third-bird-right'
                }
            ],
            links: [{
                source: 'first-bird-left',
                target: 'first-bird'
            }, {
                source: 'first-bird',
                target: 'first-bird-right'
            }, {
                source: 'second-bird-left',
                target: 'second-bird'
            }, {
                source: 'second-bird',
                target: 'second-bird-right'
            }, {
                source: 'third-bird-left',
                target: 'third-bird'
            }, {
                source: 'third-bird',
                target: 'third-bird-right'
            }, ],
            lineStyle: {
                normal: {
                    width: 1,
                    curveness: 0.3,
                    color: '#333'
                }
            },
            itemStyle: {
                normal: {
                    color: '#555'
                }
            },
            silent: true,
            z: 4
        }]
    };

image.png

const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - 9, shape.y - 9]
        const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
    }
})
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
        const c4 = [shape.x + 18, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + 18, shape.y - 9]
        const c3 = [shape.x + 9, shape.y - 18]
        const c4 = [shape.x - 9, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
option = {
    backgroundColor: "#010d3a",
    title: {
        text: '',
        top: 32,
        left: 18,
        textStyle: {
            color: '#00F6FF',
            fontSize: 24
        }
    },
    grid: {
        left: 20,
        right: 40,
        bottom: '19%',
        top: 107,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
            '平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: 'white'
            }
        },
        offset: 20,
        axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
                color: '#7DFFFD'
            }
        },
        axisLabel: {
            fontSize: 10
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'white'
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            fontSize: 16
        },
        boundaryGap: ['20%', '20%']
    },
    series: [{
        type: 'custom',
        renderItem: function(params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(7,29,97,.6)'
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(10,35,108,.7)'
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(11,42,106,.8)'
                    }
                }]
            }
        },
        data: MAX
    }, {
        type: 'custom',
        renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                            {
                                offset: 1,
                                color: '#49BEE5'
                            }
                        ])
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                            {
                                offset: 1,
                                color: '#49BEE5'
                            }
                        ])
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                            {
                                offset: 1,
                                color: '#49BEE5'
                            }
                        ])
                    }
                }]
            }
        },
        data: VALUE
    }, {
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: (e) => {
                    switch (e.name) {
                        case '10kV线路':
                            return VALUE[0]
                        case '公用配变':
                            return VALUE[1]
                        case '35kV主变':
                            return VALUE[2]
                        case '水':

                    }
                },
                fontSize: 16,
                color: '#fff',
                offset: [4, -25]
            }
        },
        itemStyle: {
            color: 'transparent'
        },
        data: MAX
    }]
}

1642759187(1).png

var xAxisData = [];
var data = [];
var data2 = [];
for (var i = 0; i < 50; i++) {
    xAxisData.push(i);
    data.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
    data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
}

option = {
    backgroundColor: '#08263a',
    xAxis: [{
        show: false,
        data: xAxisData
    }, {
        show: false,
        data: xAxisData
    }],
    visualMap: {
        show: false,
        min: 0,
        max: 50,
        dimension: 0,
        inRange: {
            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
        }
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#4a657a'
            }  
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#08263f'
            }
        },
        axisTick: {
            show: false
        }
    },
    series: [{
        name: 'back',
        type: 'bar',
        data: data2,
        z: 1,
        itemStyle: {
            normal: {
                opacity: 0.4,
                barBorderRadius: 5,
                shadowBlur: 3,
                shadowColor: '#111'
            }
        }
    }, {
        name: 'Simulate Shadow',
        type: 'line',
        data: data,
        z: 2,
        showSymbol: false,
        animationDelay: 0,
        animationEasing: 'linear',
        animationDuration: 1200,
        lineStyle: {
            normal: {
                color: 'transparent'
            }  
        },
        areaStyle: {
            normal: {
                color: '#08263a',
                shadowBlur: 50,
                shadowColor: '#000'
            }
        }
    }, {
        name: 'front',
        type: 'bar',
        data: data,
        xAxisIndex: 1,
        z: 3,
        itemStyle: {
            normal: {
                barBorderRadius: 5
            }
        }
    }],
    animationEasing: 'elasticOut',
    animationEasingUpdate: 'elasticOut',
    animationDelay: function (idx) {
        return idx * 20;
    },
    animationDelayUpdate: function (idx) {
        return idx * 20;
    }
};

image.png

/* @author:nie_moons
*  @creatTime：2021-03-31 10:18
*  @tips 
*  开启线图拖尾效果一卡一卡，因为圆的旋转和缩放使用的定时动画。解决方案：切图带拖尾效果。
*  数据中通过 desc 对象描述绘制信息
*    @type：线图轨迹。 0=》无，1=》外到内，2=》内到外，3 =》 双向
*    @angle：相对于初始方向的逆时针夹角。默认从正东方向开始沿逆时针方向均匀分布。
*  CalutePointToSplitCircle 计算外层节点分布位置
*    @stratAngle：初始节点相对于初始方向的逆时针夹角
*    @raduis：外层节点中心与中心点的距离
*    @nodeRadius：外层节点自己的半径
*    @emptyCenterRadius：中心点的半径
*/

let points = [
    {
        name: '市城市管理局',
        desc: {
            type: 1,
        },
    },
    {
        name: '科大讯飞',
        desc: {
            type: 2,
        },
    },
    {
        name: '市水利局',
        desc: {
            type: 1,
        },
    },
    {
        name: '市政法委',
        desc: {
            type: 1,
        },
    },
    {
        name: '市自然资源和规划局',
        desc: {
            type: 1,
        },
    },
    {
        name: '市生态环境局',
        desc: {
            type: 1,
        },
    },
    {
        name: '市大数据局',
        desc: {
            type: 3,
        },
    },
];
let color = ['#ffffff', '#36fff6', '#ffe93a', '#67f95f'];
let oneArr = [
    {
        name: '中心点',
        desc: {
            type: 0,
        },
        symbol: 'none',
        symbolSize: 233,
    },
];
let erArr = points;
let allArr = [...oneArr, ...erArr],
    dataArr = [];
// 点
allArr.forEach((el, ind) => {
    if (el.desc.type > 0) {
        el.symbolSize = 50;
        el.symbol =
            'path://M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0';
        el.itemStyle = {
            color: color[el.desc.type],
        };
    }
    el.label = {
        normal: {
            show: true,
            position: 'bottom',
            distance: 10,
            color: color[el.desc.type],
        },
    };
});

// 圆形分区
function CalutePointToSplitCircle(arr, option) {
    const newArray = [];
    const { length: arLen } = arr;
    let single_angle = (360 / arLen).toFixed(2);
    let UtilCalute = {
        calute_x: (ang, radius) => {
            return (Math.cos((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2);
        },
        calute_y: (ang, radius) => {
            return (Math.sin((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2);
        },
    };
    // 正东方向开始 逆时针方向
    arr.forEach((e, index) => {
        let itemDesc = e.desc;
        let ang =
            option.stratAngle +
            (itemDesc.angle && typeof itemDesc.angle === 'number' ? itemDesc.angle : single_angle * index);
        // 各节点中心点
        const x = UtilCalute.calute_x(ang, option.raduis);
        const y = UtilCalute.calute_y(ang, option.raduis);
        // 各节点连接到中心的线段的起点  减去节点的半径
        const x1 = UtilCalute.calute_x(ang, option.raduis - option.nodeRadius);
        const y1 = UtilCalute.calute_y(ang, option.raduis - option.nodeRadius);
        // 各节点连接到中心的线段的终点
        const x0 = UtilCalute.calute_x(ang, option.emptyCenterRadius);
        const y0 = UtilCalute.calute_y(ang, option.emptyCenterRadius);

        e.value = [x, y]; // 节点中心点
        e.lineData = [
            [x1, y1],
            [x0, y0],
        ];
        newArray.push(e);
    });
    return newArray;
}

// 线配置
function linesConfig(arr) {
    let dataArr = [];

    function getFormatItem(item, start, end) {
        return [
            { coord: item.lineData[start] }, // 起点
            {
                coord: item.lineData[end],
                lineStyle: {
                    color: '#0BC6FE',
                    curveness: item.desc.type === 3 ? 0.1 : 0,
                },
                effect: {
                    color: color[item.desc.type],
                },
            }, // 终点
        ];
    }

    arr.forEach((el) => {
        switch (el.desc.type) {
            case 0:
                break;
            case 1:
                // 外到内
                dataArr.push(getFormatItem(el, 0, 1));
                break;
            case 2:
                // 内到外
                dataArr.push(getFormatItem(el, 1, 0));
                break;
            case 3:
                // 双向
                dataArr.push(getFormatItem(el, 0, 1));
                dataArr.push(getFormatItem(el, 1, 0));
                break;
        }
    });
    return dataArr;
}

// 点分布
oneArr = CalutePointToSplitCircle(oneArr, {
    stratAngle: 0,
    raduis: 0,
    nodeRadius: 0,
    emptyCenterRadius: 0,
});
erArr = CalutePointToSplitCircle(erArr, {
    stratAngle: 0,
    raduis: 40,
    nodeRadius: 5,
    emptyCenterRadius: 10,
});

allArr = [...oneArr, ...erArr];
// 线坐标和配置
dataArr = linesConfig(allArr);
// 生成虚线 饼图数据
function generateData(totalNum, bigvalue, smallvalue, color) {
    let dataArr = [];
    for (var i = 0; i < totalNum; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: bigvalue,
                itemStyle: {
                    normal: {
                        color: color,
                        borderWidth: 0,
                    },
                },
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: smallvalue,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                    },
                },
            });
        }
    }
    return dataArr;
}

let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)');
let threeData = generateData(6, 40, 10, '#2dc0c9');

function getOption(startAngle, radius) {
    let option = {
        backgroundColor: '#081c47',
        title: {
            text: '自定义方向的数据流向动画',
            left: 'center',
            textStyle: {
                color: '#fff',
            },
        },
        xAxis: {
            show: false,
            type: 'value',
            max: 50,
            min: -51,
        },
        grid: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
        },
        yAxis: {
            show: false,
            type: 'value',
            max: 50,
            min: -50,
        },
        graphic: {
            elements: [
                {
                    type: 'text',
                    z: 7,
                    style: {
                        text: '地理信息中台',
                        textAlign: 'center',
                        fill: '#fff',
                        font: '30px "Microsoft YaHei"',
                    },
                    left: 'center',
                    top: 'center',
                },
                {
                    type: 'image',
                    z: 4,
                    style: {
                        image: './asset/get/s/data-1641374427371-xPKsRNQ2l.png',
                        width: 170,
                        height: 170,
                    },
                    left: 'center',
                    top: 'center',
                },
            ],
        },
        series: [
            {
                name: '节点',
                type: 'graph',
                silent: false,
                hoverAnimation: false, // 鼠标悬浮高亮
                cursor: 'default',
                coordinateSystem: 'cartesian2d',
                z: 3,
                lineStyle: {
                    width: 2,
                    color: 'source',
                    type: 'dashed',
                },
                data: allArr,
            },
            {
                name: '线图',
                type: 'lines',
                hoverAnimation: false,
                silent: false,
                cursor: 'default',
                coordinateSystem: 'cartesian2d',
                polyline: false, // 多线段
                z: 1,
                lineStyle: {
                    width: 2,
                    type: 'dashed',
                    curveness: 0,
                },
                effect: {
                    show: true,
                    period: 8, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 6,
                },
                emphasis: {
                    lineStyle: {
                        type: 'dashed',
                    },
                },
                data: dataArr,
            },
            {
                name: '不动外圆',
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['60%', '59%'],
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: dolitData,
            },
            {
                type: 'pie',
                name: '旋转圆',
                zlevel: 20,
                silent: true,
                radius: ['50%', '49%'],
                hoverAnimation: false,
                startAngle: startAngle,
                data: threeData,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
            },
            {
                name: '缩放圆',
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: [radius + 1 + '%', radius + '%'],
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: dolitData,
            },
        ],
    };
    return option;
}

let startAngle = 50; // 初始旋转角度
let [minradius, radius, maxradius] = [22, 22, 24]; // 最小、初始、最大 缩放尺寸
let isBig = true; // 缩放动画 标识

function draw() {
    startAngle = startAngle - 5;
    if (isBig) {
        radius = radius + 0.5;
        if (radius > maxradius) {
            isBig = false;
        }
    } else {
        radius = radius - 0.5;
        if (radius < minradius) {
            isBig = true;
        }
    }
    let option = getOption(startAngle, radius);
    myChart.setOption(option, true);
}

timer = setInterval(draw, 200);

1642759539(1).png

option = {
    backgroundColor:'#031d33',
    legend: {
          top: "20",
          x: "center",
          textStyle: {
            fontSize: 16,
            color: "rgba(101, 213, 255, 1)"
          },
          icon:
            "path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z",
          itemWidth:8, // 设置宽度
          itemHeight:8, // 设置高度、
          itemGap: 12 // 设置间距
        },
        tooltip: {
          show: true,
          trigger: "axis", //axis , item
          backgroundColor: "RGBA(0, 49, 85, 1)",
          borderColor: "rgba(0, 151, 251, 1)",
          borderWidth: 1,
          borderRadius: 0,
          textStyle: {
            color: "#BCE9FC",
            fontSize: 16,
            align: "left"
          }
        },
        grid: {
          right: "5%",
          top: "20%",
          left: "5%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: ["奉城镇","南桥镇",'四团镇','青村镇','柘林镇'],
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //  margin:15,
            textStyle: {
              color: "#65D5FF",
              fontStyle: "normal",
              fontSize: 16
            }
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false
          },
          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)"
            }
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)"
            }
          }
        },
        yAxis: [
          {
            type: "value",
            splitNumber: 3,
            axisLabel: {
              textStyle: {
                color: "#65D5FF",
                fontStyle: "normal",
                fontSize: 16
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)"
              }
            }
          }
        ],
        series: [
            {
          name: '1月',
          type: "pictorialBar",
          barWidth: "60%",
          stack: "总量",
          label: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 151, 251, 1)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 34, 66, 0.2)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } //渐变颜色
            }
          },
          symbol:
            "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

          data: [23,84,101,74,87]
        },  {
          name: '2月',
          type: "pictorialBar",
          barWidth: "60%",
          stack: "总量",
          label: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(48, 236, 166, 1)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 34, 66, 0.2)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } //渐变颜色
            }
          },
          symbol:
            "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

          data: [13,54,71,24,57]
        }],
};

1642817928(1).png

let sData = [{
    name: "徐汇区",
    value: 4.00
}, {
    name: "金山区",
    value: 22.00
}, {
    name: "嘉定区",
    value: 12.67
}, {
    name: "浦东新区",
    value: 19.00
}, {
    name: "闵行区",
    value: 7.52
}, {
    name: "松江区",
    value: 8.00
}, {
    name: "长宁区",
    value: 17.92
}, {
    name: "宝山区",
    value: 5.96
}, {
    name: "静安区",
    value: 5.99
}];
let angle = 0;
let data = [];
let color = ['#35D2FD', '#F56B3C', '#F2A936', '#D8F754', '#76F738', '#40C02D', '#6AE8FE', '#389AFD','#285BF5']
for (var i = 0; i < sData.length; i++) {
    data.push({
        value: sData[i].value,
        name: sData[i].name,
        itemStyle: {
            normal: {
                borderWidth: 6,
                // shadowBlur: 20,
                borderColor: color[i],
                // shadowColor: color[i]
            }
        }
    }, {
        value: 1,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        }
    });
}

function _pieDashed() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: "rgb(126,190,255)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}

let labelData = [];
for (var i = 0; i < 100; ++i) {
    labelData.push({
        value: 1,
        name: i,
        itemStyle: {
            normal: {
                color: 'rgba(0,209,228,0)',
            }
        }
    });
}
for (var i = 0; i < labelData.length; ++i) {
    if ((labelData[i].name >= 25 && labelData[i].name < 50)||(labelData[i].name >= 75 && labelData[i].name < 100)) {
        if (labelData[i].name % 2 === 0) {
            labelData[i].itemStyle = {
                normal: {
                    color: "rgb(126,190,255)",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)"
                }
            }
        } else {
            labelData[i].itemStyle = {
                normal: {
                    color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                }
            }
        }
    }
}

let seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: true,
    radius: ['64%', '67%'],
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < sData.length; i++) {
                        total += sData[i].value;
                    }
                    
                    percent = ((params.value / total) * 100).toFixed(2);
                    if (params.name !== '') {
                        return params.name + '\n' + '\n' + percent + '%';
                    } else {
                        return '';
                    }
                },
            },
            labelLine: {
                // length: 30,
                // length2: 100,
                show: true,
                color: '#00ffff'
            }
        }
    },
    data: data
},{
    name: '第三层环',
    type: 'pie',
    z: 1,
    tooltip: {
        show: false
    },
    center: ['50%', '50%'],
    radius: ['74%', '76%'],
    hoverAnimation: false,
    clockWise: false,
    itemStyle: {
        normal: {
            borderWidth: 5,
            shadowBlur: 10,
            borderColor:'rgba(53,139,255,.3)',
            shadowColor: 'rgba(53,139,255,.3)',
            color: 'rgba(30,84,120,.95)',
        },
        emphasis: {
            color: 'rgba(30,84,120,.95)',
        }
    },
    label: {
        show: false
    },
    data: [100]
},{
    name: '第二层环',
    type: 'pie',
    z: 1,
    tooltip: {
        show: false
    },
    center: ['50%', '50%'],
    radius: ['54%', '56%'],
    hoverAnimation: false,
    clockWise: false,
    itemStyle: {
        normal: {
            borderWidth: 5,
            // borderColor:'rgba(98,200,249,.3)',
            shadowBlur: 15,
            shadowColor: 'rgba(98,200,249,.3)',
            color: 'rgba(98,200,249,.95)',
        },
        emphasis: {
            color: 'rgba(98,200,249,.95)',
        }
    },
    label: {
        show: false
    },
    data: [100]
},
    {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
                    startAngle: (275+-angle) * Math.PI / 180,
                    endAngle: (0+-angle) * Math.PI / 180
                },
                style: {
                    stroke: "#4CA9DD",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    }, 
    {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
                    startAngle: (90+-angle) * Math.PI / 180,
                    endAngle: (180+-angle) * Math.PI / 180
                },
                style: {
                    stroke: "#4CA9DD",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    },
    {
        hoverAnimation: false,
        type: 'pie',
        z: 2,
        data: labelData,
        radius: ['50%', '49%'],
        zlevel: -2,
        label: {
            normal: {
                show: false,
            }
        },
    },
    {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2 - 10;
                let y0 = 0.245*api.getHeight();
                let x1 = x0;
                let y1 = y0 + 10;
                let x2 = x0 + 10;
                let y2 = y0 + 5;
                return {
                  type: 'path',
                    shape: {
                      d: 'M'+x0+' '+y0+' L'+x1+' '+y1+' L'+x2+' '+y2+'  Z', 
                    },
                    style: {
                        stroke: "#4CA9DD",      //绿
                        fill: "#4CA9DD"
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                
                let x0 = api.getWidth() / 2 + 5;
                let y0 = 0.745*api.getHeight();
                let x1 = x0 + 10;
                let y1 = y0 - 6;
                let x2 = x0 + 10;
                let y2 = y0 + 5;
                return {
                  type: 'path',
                    shape: {
                      d: 'M'+x0+' '+y0+' L'+x1+' '+y1+' L'+x2+' '+y2+'  Z', 
                    },
                    style: {
                        stroke: "#4CA9DD",      //绿
                        fill: "#4CA9DD"
                    },
                    silent: true
                };
            },
            data: [0]
        },
];
option = {
    backgroundColor: '#0A2E5D',
    color: color,
    series: seriesOption
}

1642818279(1).png

let list = [
    {
        policy_content: '规定对处方药和非处方药分类管理。',
        policy_country: '中国',
        policy_time: '1999-06-11',
        policy_title: '《处方药与非处方药分类管理办法》（试行)',
    },
    {
        policy_content: '规定药品生产、经营企业、医疗机构应当对其生产、经营、使用的药品质量负责。',
        policy_country: '中国',
        policy_time: '2007-01-31',
        policy_title: '《药品流通监督管理方法》（国家食品药品监督管理局令第26号',
    },
    {
        policy_content:
            '《意见》指出通过生物医药园的建设，研究开发具有自主知识产权的新药及其他医药产品；孵化新型医药企业，为从事生物技术与医药领域技术孵化、中试的机构和企业提供一流、全方位、专业化的保障服务和条件支撑；发展以生物医药为主体，中药、化药为补充，医药贸易为纽带的新型医药产业链。',
        policy_country: '中国',
        policy_time: '2007-06-22',
        policy_title: '《关于共同建设国家生物医药国际创新园的意见》',
    },
    {
        policy_content: '进一步明确了药品生产、经营企业的管理规范行为',
        policy_country: '中国',
        policy_time: '2016-02-06',
        policy_title: '《中华人民共和国药品管理法实施条例》（2016年修订版）',
    },
    {
        policy_content: '将化药新药分为创新药和改良型新药，将原来新药定义的“中国新”变成了“全球性”',
        policy_country: '中国',
        policy_time: '2016-03-09',
        policy_title: '《关于发布化学药品注册分类改革工作方案的公告》',
    },
    {
        policy_content: '《意见》明确提出了优化服务环境、提升服务能力、营造生物医药产业创新发展的34条具体措施和办法。',
        policy_country: '中国',
        policy_time: '2016-03-18',
        policy_title: '《优化服务环境助推生物医药产业创新发展的意见》。',
    },
    {
        policy_content:
            '推进生物药、化学药新品种、优质中药、高性能医疗器械、新型辅料包材和制药设备六大重点领域发展，加快各领域新技术的开发和应用，促进产品、技术、质量升级',
        policy_country: '中国',
        policy_time: '2016-10-26',
        policy_title: '《医药工业发展规划指南》',
    },
    {
        policy_content:
            '《规划》确定了加快生物产业方面的发展任务。提出构建生物医药新体系、提升生物医学工程发展水平，到2020年，生物产业规模达到8—10万亿元，形成一批具有较强国际竞争力的新型生物技术企业和生物经济集群。',
        policy_country: '中国',
        policy_time: '2016-11-29',
        policy_title: '《“十三五”国家战略性新兴产业发展规划》',
    },
    {
        policy_content:
            '《意见》在生产方面强调严格药品上市审评审批，加快推进已上市仿制药质量和疗效一致性评价，对通过一致性评价的药品给予政策支持等。流通方面推动药品流通企业转型升级，推行药品购销“两票制”，使中间环节加价透明化等。',
        policy_country: '中国',
        policy_time: '2017-02-09',
        policy_title: '《关于进一步改革完善药品生产流通使用政策的若干建议》',
    },
    {
        policy_content:
            '药物临床试验审批决定、药品补充申请审批决定及进口药品再注册审批决定调整为由国家食品药品监督管理总局药品审评中心以国家食品药品监督管理总局的名义作出。',
        policy_country: '中国',
        policy_time: '2017-04-15',
        policy_title: '《国家药品监督管理总局关于调整部分药品行政审批事项程序的决定》',
    },
    {
        policy_content:
            '原料药、药用辅料和药包材注册申请改为在原料药、药用辅料和药包材登记平台与数据库，对原料药的基本信息、生产信息、特性鉴定等方面进行登记。',
        policy_country: '中国',
        policy_time: '2017-11-30',
        policy_title: '《总局关于调整原料药、药用辅料和药包材审评审批事项的公告（2017年第146号）》',
    },
    {
        policy_content:
            '提出，设立首期规模100亿元的广州生物医药产业投资基金，对进入临床研究的新药项目最高给予200万元的经费扶持，对本地生物医药产业项目实行工业用地先租赁后出让、弹性年期出让制度。并将对自主研发及在广州转化的生物制品分阶段给予资金扶持，对药物非临床安全性评价机构等项目建设给予不超过总投资额30％的补助。',
        policy_country: '中国',
        policy_time: '2018-03-30',
        policy_title: '《广州市加快生物医药产业发展若干规定（试行）》',
    },
    {
        policy_content: '允许尚未盈利或未有收入的生物科技公司赴港上市。',
        policy_country: '中国',
        policy_time: '2018-04-24',
        policy_title: '港交所新上市规则',
    },
    {
        policy_content:
            '《实施意见》规定，杭州将优先发展生物制药，包括抗体药物、重组蛋白药物、新型疫苗等新型生物技术类药物。同时提升发展医疗器械、创新发展化学制药、传承发展中药产业。杭州还重点对生物医药创新的关键节点进行择优支持。',
        policy_country: '中国',
        policy_time: '2018-05-21',
        policy_title: '《促进杭州市生物医药产业创新发展的实施意见》',
    },
    {
        policy_content:
            '提出重点发展现代中药（民族药）、生物制药、化学制药、医疗器械、特色保健品5条产业链，明确了各条产业链的实施路径，提出到2020年现代中药产业实现主营业务收入610亿元、特色保健品实现主营业务收入140亿元的发展目标。',
        policy_country: '中国',
        policy_time: '2018-06-17',
        policy_title: '《云南省生物医药产业施工图》',
    },
    {
        policy_content:
            '通过在盈利状况、股权结构等方面的差异化安排，重点鼓励生物医药等六大领域的企业在科创板上市。对于未盈利或未有收入的生物科技企业，上市需满足的主要条件是：预计使之不低于人民币40亿元，至少有一项核心产品获准开展2期临床试验。',
        policy_country: '中国',
        policy_time: '2019-01-30',
        policy_title: '上海证券交易所设立试点科创板',
    },
    {
        policy_content:
            '原辅包的使用必须符合药用要求，主要是指原辅包的质量、安全及功能应该满足药品制剂的需要。原辅包与药品制剂关联审评审批由原辅包登记人在登记平台上登记，药品制剂注册申请人提交注册申请时与平台登记资料进行关联；因特殊原因无法在平台登记的原辅包，也可在药品制剂注册申请时，由药品制剂注册申请人一并提供原辅包研究资料。',
        policy_country: '中国',
        policy_time: '2019-07-16',
        policy_title: '《国家药监局关于进一步完善药品关联审评审批和监管工作有关事宜的公告》（2019 年第 56 号）',
    },
    {
        policy_content: '对在中国境内从事药品研制、生产、经营、使用和监督管理活动作出具体的规定。',
        policy_country: '中国',
        policy_time: '2019-08-26',
        policy_title: '《中华人民共和国药品管理法（2019年8月修订版》',
    },
];
let seriesList = [];
var yarr = [];
var linearr = [];
var linev = { value: -0, symbol: 'none' };

list.map((item, index) => {
    seriesList.push({
        date: item.policy_time,
        title: item.policy_title,
        country: item.policy_country,
        content: item.policy_content,
        value: 0,
        label: {
            show: true,
            lineHeight: 20,
            align: index % 2 == 0 ? 'left' : 'right',
            padding: 20,
            position: index % 2 == 0 ? 'left' : 'right',
            formatter: function (params) {
                return `{bolder|${params.name}}\n${params.data.title}`;
            },
            rich: {
                bolder: {
                    fontWeight: 700,
                    color: 'blue',
                },
            },
        },
    });
});
seriesList.map((item, index) => {
    linearr.push({
        value: -0,
    });
    yarr.push(`${item.date}  ${item.country}`);
});
option = {
    grid: {
        top: 0,
        left: '50%',
        right: '30%',
        bottom: 0,
    },
    legend: {
        bottom: 0,
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
            padding: [2, 0, 0, 0],
        },
    },
    xAxis: {
        show: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 0,
        max: 0,
    },
    yAxis: {
        type: 'category',
        axisLine: {
            show: true,
            lineStyle: {
                width: 4,
                color: 'blue',
            },
        },

        axisTick: {
            show: false,
            alignWithLabel: true,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            margin: 30,
            alignWithLabel: true,
            show: false,
        },
        data: ['', ...yarr, ''],
    },
    color: ['#333'],
    series: [
        {
            type: 'line',
            symbolSize: 8,
            color: 'red',
            itemStyle: {
                borderColor: 'blue',
                borderWidth: 2,
            },

            hoverAnimation: false,
            legendHoverLink: false,
            data: [linev, ...seriesList, linev],
            lineStyle: {
                color: 'blue',
            },
        },
    ],
};

`