//南丁格尔玫瑰图
export const echartsTWO ={
title: {
text:"模块访问占比",
},
toolbox: {
show:true,
},
legend: {
bottom:"10",
},//backgroundColor: "#013954",//背景样式
series: [
{
name:"Nightingale Chart",
type:"pie",
radius: [25, 80],
center: ["50%", "50%"],
roseType:"area",//itemStyle: {//borderRadius: 8,//},
data: [
{ value:40, name: "菜单权限"},
{ value:38, name: "角色权限"},
{ value:32, name: "列权限"},
{ value:30, name: "行权限"},
{ value:28, name: "按钮权限"},
{ value:18, name: "接口权限"},
{ value:26, name: "流程"},
{ value:22, name: "表单"},
],
},
],
};//中国地图
export const chinaGeoCoordMap = ref<any>({
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
});
exportconst chinaDatas =[
[
{
name:"黑龙江",
value:0,
},
],
[
{
name:"内蒙古",
value:0,
},
],
[
{
name:"吉林",
value:0,
},
],
[
{
name:"辽宁",
value:0,
},
],
[
{
name:"河北",
value:0,
},
],
[
{
name:"天津",
value:0,
},
],
[
{
name:"山西",
value:0,
},
],
[
{
name:"陕西",
value:0,
},
],
[
{
name:"甘肃",
value:0,
},
],
[
{
name:"宁夏",
value:0,
},
],
[
{
name:"青海",
value:0,
},
],
[
{
name:"新疆",
value:0,
},
],
[
{
name:"西藏",
value:0,
},
],
[
{
name:"四川",
value:0,
},
],
[
{
name:"重庆",
value:0,
},
],
[
{
name:"山东",
value:0,
},
],
[
{
name:"河南",
value:0,
},
],
[
{
name:"江苏",
value:0,
},
],
[
{
name:"安徽",
value:0,
},
],
[
{
name:"湖北",
value:0,
},
],
[
{
name:"浙江",
value:0,
},
],
[
{
name:"福建",
value:0,
},
],
[
{
name:"江西",
value:0,
},
],
[
{
name:"湖南",
value:0,
},
],
[
{
name:"贵州",
value:0,
},
],
[
{
name:"广西",
value:0,
},
],
[
{
name:"海南",
value:0,
},
],
[
{
name:"上海",
value:1,
},
],
];var convertData = function (data: string |any[]) {var res =[];for (var i = 0; i < data.length; i++) {var dataItem =data[i];var fromCoord = chinaGeoCoordMap.value[dataItem[0].name];var toCoord = [103.9526, 30.7617];if (fromCoord &&toCoord) {
res.push([
{
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
},
]);
}
}returnres;
};
exportconstseries: {
type:string;
zlevel: number;
coordinateSystem:string;
effect: {
show: boolean;
period: number;//箭头指向速度，值越小速度越快
trailLength: number; //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: string; //箭头图标
symbolSize: number;
brushType:string;
scale: number
};
rippleEffect:any;
label: {},
symbol:string;
symbolSize: {},
itemStyle: {},
lineStyle: {
normal: {
width: number;//尾迹线条宽度
opacity: number; //尾迹线条透明度
curveness: number; //尾迹线条曲直度
};
};
data: any
}[]=[];
[["四川", chinaDatas asany]].forEach(function (item, i) {
series.push(
{
type:"lines",
coordinateSystem:"geo",
zlevel:2,
rippleEffect:[],
effect: {
show:true,
period:4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
brushType: "",
scale:0},
label: [],
symbol:"",
symbolSize: [],
itemStyle: [],
lineStyle: {
normal: {
width:1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
data: convertData(item[1]),
},
{
type:"effectScatter",
coordinateSystem:"geo".toString(),
zlevel:2,
effect:{}asany,
rippleEffect: {//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 4,
show:false,
trailLength:0,
symbol:"",
symbolSize:0},
label: {
normal: {
show:true,
position:"right", //显示位置
offset: [5, 0], //偏移设置
formatter: function (params: { data: { name: any } }) {//圆环显示文字
return params.data.name;
},
fontSize:13,
},
emphasis: {
show:true,
},
},
symbol:"circle",
symbolSize: function (val: number[]) {return 5 + val[2] * 5; //圆环大小
},
itemStyle: {
normal: {
show:false,
color:"#f00",
},
},
lineStyle: {
normal: {
width:1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
data: item[1].map(function (
dataItem: {
name: any;
value: any;
}[]
) {return{
name: dataItem[0].name,
value: chinaGeoCoordMap.value[dataItem[0].name].concat([dataItem[0].value]),
};
}),
},//被攻击点
{
type:"scatter",
coordinateSystem:"geo",
zlevel:2,
rippleEffect:{}asany,
effect: {
period:4,
brushType:"stroke",
scale:4,
show:false,
trailLength:0,
symbol:"",
symbolSize:0},
label: {
normal: {
show:true,
position:"right",//offset:[5, 0],
color: "#0f0",
formatter:"{b}",
textStyle: {
color:"#0f0",
},
},
emphasis: {
show:true,
color:"#f60",
},
},
symbol:"pin",
symbolSize:50,
itemStyle: [],
lineStyle:'' asany,
data: [
{
name: item[0],
value: chinaGeoCoordMap.value[item[0].toString()].concat([10]),
},
],
}
);
});
exportconst echartsThree ={
title: {
text:"各省访问数量",
},
tooltip: {
trigger:"item",
backgroundColor:"rgba(166, 200, 76, 0.82)",
borderColor:"#FFFFCC",
showDelay:0,
hideDelay:0,
enterable:true,
transitionDuration:0,
extraCssText:"z-index:100",
formatter: function (params: { name: any; value: { [x: string]: any }; seriesIndex: number },
ticket: any,
callback: any
) {//根据业务自己拓展要显示的内容
var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1];
res=
"<span style='color:#fff;'>" + name + "</span><br/>数据：" +value;returnres;
},
},//backgroundColor: "#013954",
visualMap: {//图例值控制
min: 0,
max:1,
calculable:true,
show:true,
color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
textStyle: {
color:"#fff",
},
},
geo: {
map:"china",
zoom:1.2,
label: {
emphasis: {
show:false,
},
},
roam:false, //是否允许缩放
itemStyle: {
normal: {
color:"rgba(51, 69, 89, .5)", //地图背景色
borderColor: "#516a89", //省市边界线00fcff 516a89
borderWidth: 1,
},
emphasis: {
color:"rgba(37, 43, 61, .5)", //悬浮背景
},
},
},
series: series,
};//堆叠图
export const echartsFour ={
title: {
text:"系统访问量走势图",
},//backgroundColor: "#6a7985",//背景样式
tooltip: {
trigger:"axis",
axisPointer: {
type:"cross",
label: {
backgroundColor:"#6a7985",
},
},
},
legend: {
data: ["菜单权限", "角色权限", "按钮权限", "行权限", "列权限"],
},
toolbox: {//feature: {//saveAsImage: {},//},
},
grid: {
left:"3%",
right:"4%",
bottom:"3%",
containLabel:true,
},
xAxis: [
{
type:"category",
boundaryGap:false,
data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
},
],
yAxis: [
{
type:"value",
},
],
series: [
{
name:"菜单权限",
type:"line",
stack:"Total",
areaStyle: {},
emphasis: {
focus:"series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name:"角色权限",
type:"line",
stack:"Total",
areaStyle: {},
emphasis: {
focus:"series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name:"按钮权限",
type:"line",
stack:"Total",
areaStyle: {},
emphasis: {
focus:"series",
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name:"行权限",
type:"line",
stack:"Total",
areaStyle: {},
emphasis: {
focus:"series",
},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name:"列权限",
type:"line",
stack:"Total",
label: {
show:true,
position:"top",
},
areaStyle: {},
emphasis: {
focus:"series",
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
