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',
},
},
],
};
`