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: ['德州', '德城區(qū)', '陵城區(qū)', '禹城市', '樂陵市', '臨邑縣',
            '平原縣', '夏津縣', '武城縣', '慶云縣', '寧津縣', '齊河縣'
        ],
        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 計算外層節(jié)點分布位置
*    @stratAngle：初始節(jié)點相對于初始方向的逆時針夾角
*    @raduis：外層節(jié)點中心與中心點的距離
*    @nodeRadius：外層節(jié)點自己的半徑
*    @emptyCenterRadius：中心點的半徑
*/

let points = [
    {
        name: '市城市管理局',
        desc: {
            type: 1,
        },
    },
    {
        name: '科大訊飛',
        desc: {
            type: 2,
        },
    },
    {
        name: '市水利局',
        desc: {
            type: 1,
        },
    },
    {
        name: '市政法委',
        desc: {
            type: 1,
        },
    },
    {
        name: '市自然資源和規(guī)劃局',
        desc: {
            type: 1,
        },
    },
    {
        name: '市生態(tài)環(huán)境局',
        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],
        },
    };
});

// 圓形分區(qū)
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);
        // 各節(jié)點中心點
        const x = UtilCalute.calute_x(ang, option.raduis);
        const y = UtilCalute.calute_y(ang, option.raduis);
        // 各節(jié)點連接到中心的線段的起點  減去節(jié)點的半徑
        const x1 = UtilCalute.calute_x(ang, option.raduis - option.nodeRadius);
        const y1 = UtilCalute.calute_y(ang, option.raduis - option.nodeRadius);
        // 各節(jié)點連接到中心的線段的終點
        const x0 = UtilCalute.calute_x(ang, option.emptyCenterRadius);
        const y0 = UtilCalute.calute_y(ang, option.emptyCenterRadius);

        e.value = [x, y]; // 節(jié)點中心點
        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: '節(jié)點',
                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: ["奉城鎮(zhèn)","南橋鎮(zhèn)",'四團鎮(zhèn)','青村鎮(zhèn)','柘林鎮(zhèn)'],
          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 區(qū)域中的分隔線滞诺。
            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: "徐匯區(qū)",
    value: 4.00
}, {
    name: "金山區(qū)",
    value: 22.00
}, {
    name: "嘉定區(qū)",
    value: 12.67
}, {
    name: "浦東新區(qū)",
    value: 19.00
}, {
    name: "閔行區(qū)",
    value: 7.52
}, {
    name: "松江區(qū)",
    value: 8.00
}, {
    name: "長寧區(qū)",
    value: 17.92
}, {
    name: "寶山區(qū)",
    value: 5.96
}, {
    name: "靜安區(qū)",
    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: '第三層環(huán)',
    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: '第二層環(huán)',
    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: '規(guī)定對處方藥和非處方藥分類管理形导。',
        policy_country: '中國',
        policy_time: '1999-06-11',
        policy_title: '《處方藥與非處方藥分類管理辦法》（試行)',
    },
    {
        policy_content: '規(guī)定藥品生產环疼、經營企業(yè)、醫(yī)療機構應當對其生產朵耕、經營炫隶、使用的藥品質量負責。',
        policy_country: '中國',
        policy_time: '2007-01-31',
        policy_title: '《藥品流通監(jiān)督管理方法》（國家食品藥品監(jiān)督管理局令第26號',
    },
    {
        policy_content:
            '《意見》指出通過生物醫(yī)藥園的建設阎曹，研究開發(fā)具有自主知識產權的新藥及其他醫(yī)藥產品伪阶；孵化新型醫(yī)藥企業(yè)，為從事生物技術與醫(yī)藥領域技術孵化芬膝、中試的機構和企業(yè)提供一流望门、全方位、專業(yè)化的保障服務和條件支撐锰霜；發(fā)展以生物醫(yī)藥為主體筹误，中藥、化藥為補充癣缅，醫(yī)藥貿易為紐帶的新型醫(yī)藥產業(yè)鏈厨剪。',
        policy_country: '中國',
        policy_time: '2007-06-22',
        policy_title: '《關于共同建設國家生物醫(yī)藥國際創(chuàng)新園的意見》',
    },
    {
        policy_content: '進一步明確了藥品生產、經營企業(yè)的管理規(guī)范行為',
        policy_country: '中國',
        policy_time: '2016-02-06',
        policy_title: '《中華人民共和國藥品管理法實施條例》（2016年修訂版）',
    },
    {
        policy_content: '將化藥新藥分為創(chuàng)新藥和改良型新藥友存，將原來新藥定義的“中國新”變成了“全球性”',
        policy_country: '中國',
        policy_time: '2016-03-09',
        policy_title: '《關于發(fā)布化學藥品注冊分類改革工作方案的公告》',
    },
    {
        policy_content: '《意見》明確提出了優(yōu)化服務環(huán)境祷膳、提升服務能力、營造生物醫(yī)藥產業(yè)創(chuàng)新發(fā)展的34條具體措施和辦法屡立。',
        policy_country: '中國',
        policy_time: '2016-03-18',
        policy_title: '《優(yōu)化服務環(huán)境助推生物醫(yī)藥產業(yè)創(chuàng)新發(fā)展的意見》直晨。',
    },
    {
        policy_content:
            '推進生物藥、化學藥新品種膨俐、優(yōu)質中藥勇皇、高性能醫(yī)療器械、新型輔料包材和制藥設備六大重點領域發(fā)展焚刺，加快各領域新技術的開發(fā)和應用敛摘，促進產品、技術乳愉、質量升級',
        policy_country: '中國',
        policy_time: '2016-10-26',
        policy_title: '《醫(yī)藥工業(yè)發(fā)展規(guī)劃指南》',
    },
    {
        policy_content:
            '《規(guī)劃》確定了加快生物產業(yè)方面的發(fā)展任務兄淫。提出構建生物醫(yī)藥新體系、提升生物醫(yī)學工程發(fā)展水平蔓姚，到2020年捕虽，生物產業(yè)規(guī)模達到8—10萬億元，形成一批具有較強國際競爭力的新型生物技術企業(yè)和生物經濟集群坡脐。',
        policy_country: '中國',
        policy_time: '2016-11-29',
        policy_title: '《“十三五”國家戰(zhàn)略性新興產業(yè)發(fā)展規(guī)劃》',
    },
    {
        policy_content:
            '《意見》在生產方面強調嚴格藥品上市審評審批泄私，加快推進已上市仿制藥質量和療效一致性評價，對通過一致性評價的藥品給予政策支持等。流通方面推動藥品流通企業(yè)轉型升級挖滤，推行藥品購銷“兩票制”，使中間環(huán)節(jié)加價透明化等浅役。',
        policy_country: '中國',
        policy_time: '2017-02-09',
        policy_title: '《關于進一步改革完善藥品生產流通使用政策的若干建議》',
    },
    {
        policy_content:
            '藥物臨床試驗審批決定斩松、藥品補充申請審批決定及進口藥品再注冊審批決定調整為由國家食品藥品監(jiān)督管理總局藥品審評中心以國家食品藥品監(jiān)督管理總局的名義作出。',
        policy_country: '中國',
        policy_time: '2017-04-15',
        policy_title: '《國家藥品監(jiān)督管理總局關于調整部分藥品行政審批事項程序的決定》',
    },
    {
        policy_content:
            '原料藥觉既、藥用輔料和藥包材注冊申請改為在原料藥惧盹、藥用輔料和藥包材登記平臺與數據庫，對原料藥的基本信息瞪讼、生產信息钧椰、特性鑒定等方面進行登記。',
        policy_country: '中國',
        policy_time: '2017-11-30',
        policy_title: '《總局關于調整原料藥符欠、藥用輔料和藥包材審評審批事項的公告（2017年第146號）》',
    },
    {
        policy_content:
            '提出嫡霞，設立首期規(guī)模100億元的廣州生物醫(yī)藥產業(yè)投資基金，對進入臨床研究的新藥項目最高給予200萬元的經費扶持希柿，對本地生物醫(yī)藥產業(yè)項目實行工業(yè)用地先租賃后出讓诊沪、彈性年期出讓制度。并將對自主研發(fā)及在廣州轉化的生物制品分階段給予資金扶持曾撤，對藥物非臨床安全性評價機構等項目建設給予不超過總投資額30％的補助端姚。',
        policy_country: '中國',
        policy_time: '2018-03-30',
        policy_title: '《廣州市加快生物醫(yī)藥產業(yè)發(fā)展若干規(guī)定（試行）》',
    },
    {
        policy_content: '允許尚未盈利或未有收入的生物科技公司赴港上市。',
        policy_country: '中國',
        policy_time: '2018-04-24',
        policy_title: '港交所新上市規(guī)則',
    },
    {
        policy_content:
            '《實施意見》規(guī)定挤悉，杭州將優(yōu)先發(fā)展生物制藥渐裸，包括抗體藥物、重組蛋白藥物装悲、新型疫苗等新型生物技術類藥物昏鹃。同時提升發(fā)展醫(yī)療器械、創(chuàng)新發(fā)展化學制藥衅斩、傳承發(fā)展中藥產業(yè)盆顾。杭州還重點對生物醫(yī)藥創(chuàng)新的關鍵節(jié)點進行擇優(yōu)支持。',
        policy_country: '中國',
        policy_time: '2018-05-21',
        policy_title: '《促進杭州市生物醫(yī)藥產業(yè)創(chuàng)新發(fā)展的實施意見》',
    },
    {
        policy_content:
            '提出重點發(fā)展現代中藥（民族藥）畏梆、生物制藥您宪、化學制藥、醫(yī)療器械奠涌、特色保健品5條產業(yè)鏈宪巨，明確了各條產業(yè)鏈的實施路徑，提出到2020年現代中藥產業(yè)實現主營業(yè)務收入610億元溜畅、特色保健品實現主營業(yè)務收入140億元的發(fā)展目標捏卓。',
        policy_country: '中國',
        policy_time: '2018-06-17',
        policy_title: '《云南省生物醫(yī)藥產業(yè)施工圖》',
    },
    {
        policy_content:
            '通過在盈利狀況、股權結構等方面的差異化安排，重點鼓勵生物醫(yī)藥等六大領域的企業(yè)在科創(chuàng)板上市怠晴。對于未盈利或未有收入的生物科技企業(yè)遥金，上市需滿足的主要條件是：預計使之不低于人民幣40億元，至少有一項核心產品獲準開展2期臨床試驗蒜田。',
        policy_country: '中國',
        policy_time: '2019-01-30',
        policy_title: '上海證券交易所設立試點科創(chuàng)板',
    },
    {
        policy_content:
            '原輔包的使用必須符合藥用要求稿械，主要是指原輔包的質量、安全及功能應該滿足藥品制劑的需要冲粤。原輔包與藥品制劑關聯審評審批由原輔包登記人在登記平臺上登記美莫，藥品制劑注冊申請人提交注冊申請時與平臺登記資料進行關聯；因特殊原因無法在平臺登記的原輔包梯捕，也可在藥品制劑注冊申請時厢呵，由藥品制劑注冊申請人一并提供原輔包研究資料。',
        policy_country: '中國',
        policy_time: '2019-07-16',
        policy_title: '《國家藥監(jiān)局關于進一步完善藥品關聯審評審批和監(jiān)管工作有關事宜的公告》（2019 年第 56 號）',
    },
    {
        policy_content: '對在中國境內從事藥品研制傀顾、生產襟铭、經營、使用和監(jiān)督管理活動作出具體的規(guī)定锣笨。',
        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',
            },
        },
    ],
};

`