文章目录
一、引入 echarts
Vue2项目引入教程： https://blog.csdn.net/qq_61402485/article/details/127131530
Vue3项目引入教程: https://blog.csdn.net/qq_61402485/article/details/132679904?spm=1001.2014.3001.5502
二、暗色系图例及完整配置代码
注：因为成功引入Echarts后，其实挂载代码都差不多。区别仅在于Echarts配置代码，所以我仅贴出配置代码
2.1、双柱柱状图
let option = {
backgroundColor: "#0B1A3A",
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
grid: {
//调整图表位置
show: false, //是否显示直角坐标系网格
top: "15%", // 一下数值可为百分比也可为具体像素值
right: "8%",
bottom: "10%",
left: "8%",
},
xAxis: [
{
type: "category",
data: ["a", "b", "c", "d", "e", "f"],
axisPointer: {
type: "shadow",
},
axisLine: {
//横轴样式
lineStyle: {
color: "#08426D",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#85B0C4",
},
},
axisTick: {
show: false, //隐藏刻度线
},
},
],
yAxis: [
{
type: "value",
// min: 0, 最小值
// interval: 20, 两根横轴之间的差值，不太建议手动设置
splitLine: {
show: true,
lineStyle: {
color: ["#08426D"],
width: 1,
type: "solid",
},
textStyle: {
color: "green",
},
},
axisLabel: {
show: true,
formatter: "{value}",
textStyle: {
color: "#85B0C4",
},
},
},
],
legend: {
top: "5%", // 控制 板块控制器的位置
right: "center",
// icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
// itemWidth: 10, // 设置宽度
// itemHeight: 4, // 设置高度
itemGap: 40, // 设置间距
data: [
{
name: "A柱子",
textStyle: {
color: "#fff", // 单独设置某一个图列的颜色
},
},
{
name: "B柱子",
textStyle: {
color: "#fff", // 单独设置某一个图列的颜色
},
},
],
},
series: [
{
name: "A柱子",
type: "bar",
barWidth: "15%", // 柱的宽度
data: [50, 60, 80, 45, 65, 25],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#192060", // 0% 处的颜色
},
{
offset: 0.9,
color: "#00C0FF", // 90% 处的颜色
},
],
},
},
label: {
show: true, // 开启显示
position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: "middle",
textStyle: {
// 数值样式
color: "#D2CC13",
fontSize: 12,
},
},
},
{
name: "B柱子",
type: "bar",
barWidth: "15%", // 柱的宽度
data: [30, 26, 89, 12, 63, 45],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#322E28", // 0% 处的颜色
},
{
offset: 0.9,
color: "#FFD600", // 90% 处的颜色
},
],
},
},
label: {
show: true, // 开启显示
position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: "middle",
textStyle: {
// 数值样式
color: "#D2CC13",
fontSize: 12,
},
},
},
],
};
2.2、折柱混合图
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#fff",
},
},
},
tooltip: {
// 图列提示框，默认不显示
show: true,
color: "red",
},
grid: {
//调整图表位置
show: false, //是否显示直角坐标系网格
top: "15%", // 一下数值可为百分比也可为具体像素值
right: "5%",
bottom: "10%",
left: "10%",
},
legend: {
top: "5%",
data: [
{
name: "柱子名称",
textStyle: {
color: "#A9DDEE", // 单独设置某一个图列的颜色
},
},
{
name: "折线名称",
textStyle: {
color: "#A9DDEE", // 单独设置某一个图列的颜色
},
},
],
},
xAxis: [
{
type: "category",
data: ["A类", "B类", "C类", "D类", "E类", "F类", "G类", "H类"],
axisPointer: {
type: "shadow",
},
axisLine: {
show: false, //横轴样式
},
axisLabel: {
show: true,
textStyle: {
color: "#85B0C4",
},
},
axisTick: {
show: false, //隐藏刻度线
},
},
],
yAxis: [
{
type: "value",
// min: 0,
// max: 250,
// interval: 50, // y轴 两刻度之间的差值
barWidth: "35%",
axisLabel: {
formatter: "{value} 个",
},
splitLine: {
show: true,
lineStyle: {
color: ["#08426D"],
width: 1,
type: "solid",
},
},
axisLabel: {
// y轴 数据格式和颜色
show: true,
formatter: "{value} 个",
textStyle: {
color: "#85B0C4",
},
},
},
],
series: [
{
name: "柱子名称",
type: "bar",
barWidth: "20%",
tooltip: {
valueFormatter: function (value) {
return value + " 个";
},
},
data: [40, 50, 60, 65, 54, 65, 60, 50],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#192F68", // 0% 处的颜色
},
{
offset: 1,
color: "#18E0FD", // 90% 处的颜色
},
],
},
},
label: {
show: true, // 开启显示
position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: "middle",
textStyle: {
// 数值样式
color: "#F4EC03",
fontSize: 12,
},
},
},
{
name: "折线名称",
type: "line",
// yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + " 个";
},
},
data: [35, 62, 84, 52, 44, 96, 78, 66],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#18E0FD", // 0% 处的颜色
},
{
offset: 0.9,
color: "#18E0FD", // 90% 处的颜色
},
],
},
},
},
],
};
2.3、堆叠柱状图
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
grid: {
//调整图表位置
show: false, //是否显示直角坐标系网格
top: "15%", // 一下数值可为百分比也可为具体像素值
right: "5%",
bottom: "10%",
left: "8%",
},
legend: {
top: "5%", // 控制 板块控制器的位置
// icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
// itemWidth: 10, // 设置宽度
// itemHeight: 4, // 设置高度
itemGap: 80, // 设置顶部图标间距
right: "center",
data: [
{
name: "A柱子的名字",
textStyle: {
color: "#fff", // 单独设置某一个图列的颜色
},
},
{
name: "B柱子的名字",
textStyle: {
color: "#fff", // 单独设置某一个图列的颜色
},
},
],
},
xAxis: [
{
type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",],
axisPointer: {
type: "shadow",
},
axisLine: {
//横轴样式
lineStyle: {
color: "#08426D",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#85B0C4",
},
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: ["#08426D"],
width: 1,
type: "solid",
},
textStyle: {
color: "green",
},
},
axisLabel: {
show: true,
formatter: "{value}",
textStyle: {
color: "#85B0C4",
},
},
},
],
series: [
{
name: "A柱子的名字",
type: "bar",
barWidth: "25%", // 设置柱子的宽度
stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
data: [20, 30, 40, 60, 20, 50, 40, 30, 30, 50, 40, 30],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#013560", // 0% 处的颜色
},
{
offset: 0.9,
color: "#00F5EE", // 90% 处的颜色
},
],
},
},
},
{
name: "B柱子的名字",
type: "bar",
barWidth: "25%", // 设置柱子的宽度
stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
data: [50, 40, 70, 15, 30, 45, 25, 60, 70, 30, 10, 65],
itemStyle: {
color: {
type: "linear",
x: 0, // 右
y: 1, // 下
x2: 0, // 左
y2: 0, // 上
colorStops: [
{
offset: 0,
color: "#1B2E6E", // 0% 处的颜色
},
{
offset: 0.9,
color: "#00C0FF", // 90% 处的颜色
},
],
},
},
label: {
show: true, // 开启显示
position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: "middle",
textStyle: {
// 数值样式
color: "#D2CC17",
fontSize: 12,
},
},
},
],
};
2.4、圆环图
var scale = 1;
var echartData = [{
value: 2154,
name: '曲阜师范大学'
}, {
value: 3854,
name: '潍坊学院'
}, {
value: 3515,
name: '青岛职业技术学院'
}, {
value: 3515,
name: '淄博师范高等专科'
}, {
value: 3854,
name: '鲁东大学'
}, {
value: 2154,
name: '山东师范大学'
}]
var rich = {
yellow: {
color: "#ffc72b",
fontSize: 30 * scale,
padding: [5, 4],
align: 'center'
},
total: {
color: "#ffc72b",
fontSize: 40 * scale,
align: 'center'
},
white: {
color: "#fff",
align: 'center',
fontSize: 14 * scale,
padding: [21, 0]
},
blue: {
color: '#49dff0',
fontSize: 16 * scale,
align: 'center'
},
hr: {
borderColor: '#0b5263',
width: '100%',
borderWidth: 1,
height: 0,
}
}
option = {
backgroundColor: '#031f2d',
title: {
text:'总考生数',
left:'center',
top:'53%',
padding:[24,0],
textStyle:{
color:'#fff',
fontSize:18*scale,
align:'center'
}
},
legend: {
selectedMode:false,
formatter: function(name) {
var total = 0; //各科正确率总和
var averagePercent; //综合正确率
echartData.forEach(function(value, index, array) {
total += value.value;
});
return '{total|' + total + '}';
},
data: [echartData[0].name],
// data: ['高等教育学'],
// itemGap: 50,
left: 'center',
top: 'center',
icon: 'none',
align:'center',
textStyle: {
color: "#fff",
fontSize: 16 * scale,
rich: rich
},
},
series: [{
name: '总考生数量',
type: 'pie',
radius: ['42%', '50%'],
hoverAnimation: false,
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
label: {
normal: {
formatter: function(params, ticket, callback) {
var total = 0; //考生总数量
var percent = 0; //考生占比
echartData.forEach(function(value, index, array) {
total += value.value;
});
percent = ((params.value / total) * 100).toFixed(1);
return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
},
rich: rich
},
},
labelLine: {
normal: {
length: 55 * scale,
length2: 0,
lineStyle: {
color: '#0b5263'
}
}
},
data: echartData
}]
};
2.5、柱状图-可拉动时间轴
option = {
backgroundColor: '#080b30',
title: {
text: '拉动时间轴演示',
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top:'16%',
containLabel: true
},
legend: {
data: ['1', '2', '3'],
right: 10,
top:12,
textStyle: {
color: "#fff"
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: 'category',
data: ['2012','2013','2014','2015','2016','2017','2018','2019'],
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
},
},
yAxis: {
type: 'value',
max:'1200',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {}
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '1',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fccb05'
}, {
offset: 1,
color: '#f5804d'
}]),
barBorderRadius: 12,
},
},
data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
},
{
name: '2',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}]),
barBorderRadius: 11,
}
},
data: [400, 500, 500, 500, 500, 400,400, 500, 500]
},
{
name: '3',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#248ff7'
}, {
offset: 1,
color: '#6851f1'
}]),
barBorderRadius: 11,
}
},
data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
}]
};
2.6、柱状图-排行榜
var yData = [
'浙江省档案馆',
'杭州市档案馆',
'宁波市档案馆',
'温州市档案馆',
'嘉兴市档案馆',
'湖州市档案馆',
'绍兴市档案馆',
'金华市档案馆',
'丽水市档案馆',
'舟山市档案馆',
];
var data = ['2000', '1800', '1600', '1000', '800', '600', '400', '300', '200', '200'];
data.sort((a, b) => b - a);
var max = Math.max.apply(null, data);
var getMax = [];
for (let i = 0; i < yData.length; i++) {
getMax.push(max);
}
option = {
backgroundColor: '#0b1751',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value;
},
},
xAxis: {
show: false,
type: 'value',
},
grid: {
right: '12%',
left: '20%',
top: '4%',
bottom: '1%',
},
yAxis: [
{
type: 'category',
inverse: true,
offset: 120,
axisLabel: {
show: true,
align: 'left',
textStyle: {
color: '#fff',
fontSize: '14',
},
formatter: function (value, index) {
var num = '';
var str = '';
num = index + 1;
if (index === 0) {
str = '{no1|' + '} {num1|' + num + '} {title1| ' + value + '}';
} else if (index === 1) {
str = '{no2|' + '} {num2|' + num + '} {title2| ' + value + '}';
} else if (index === 2) {
str = '{no3|' + '} {num3|' + num + '} {title3| ' + value + '}';
} else {
str = ' {num|' + num + '} {title| ' + value + '}';
}
return str;
},
rich: {
num: {
color: '#387ec1',
backgroundColor: '#112b67',
width: 10,
height: 10,
fontSize: 14,
padding: [6, 5, 3, 5],
align: 'center',
shadowColor: '#3374ba',
borderColor: '#3374ba',
borderWidth: 1,
},
num1: {
color: '#51aff8',
backgroundColor: '#112b67',
width: 10,
height: 10,
fontSize: 14,
padding: [7, 5, 3, 5],
align: 'center',
shadowColor: '#4db2ff',
borderColor: '#4db2ff',
borderWidth: 1,
},
num2: {
color: '#51aff8',
backgroundColor: '#112b67',
width: 10,
height: 10,
fontSize: 14,
padding: [7, 5, 3, 5],
align: 'center',
shadowColor: '#4db2ff',
borderColor: '#4db2ff',
borderWidth: 1,
},
num3: {
color: '#51aff8',
backgroundColor: '#112b67',
width: 10,
height: 10,
fontSize: 14,
padding: [7, 5, 3, 5],
align: 'center',
shadowColor: '#4db2ff',
borderColor: '#4db2ff',
borderWidth: 1,
},
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: yData,
},
{
type: 'category',
inverse: true,
offset: 0,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '14',
},
},
data: data,
},
],
series: [
{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
// barBorderRadius: 30,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: 'transparent', // 0% 处的颜色
},
{
offset: 1,
color: '#00d0ff', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
barWidth: 20,
data: data,
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: getMax,
itemStyle: {
color: '#152448',
// barBorderRadius: 30,
},
},
],
};
2.7、圆环图
let total = 66
let data1 = [
{value: 23, name: 'test1'},
{value: 33, name: 'test2'},
]
option = {
backgroundColor: "#1e3756",
tooltip: {
trigger: 'item',
},
title: {
zlevel: 0,
text: total,
subtext: '总数',
top: '40%',
left: '40%',
textAlign: 'center',
textStyle: {
color: '#FFA042',
fontSize: 80,
},
subtextStyle: {
fontSize: 60,
color: '#fff',
},
},
legend: {
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
itemWidth: 15, // 图例图形的宽度
itemHeight: 10, // 图例图形的高度
itemGap: 30,
textStyle: {
color: '#fff',
fontSize: 14,
marginTop: 60,
},
},
series: [
{
color: ['#163d59'],
type: 'gauge',
center: ['40%', '50%'],
startAngle: 150,
endAngle: -209.999,
splitNumber: 12,
radius: '70%',
pointer: {
show: false,
},
progress: {
show: false,
roundCap: true,
width: 1,
},
axisLine: {
show: false,
lineStyle: {
width: 10,
color: [
[0, '#163d59'],
[0.5, '#163d59'],
[1, '#163d59'],
],
},
},
axisTick: {
distance: -25,
length: 10,
splitNumber: 10,
lineStyle: {
width: 1,
color: '#099fe4',
},
},
splitLine: {
distance: -35,
length: 10,
lineStyle: {
width: 2,
color: '#099fe4',
},
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [],
},
{
color: ['#15e1fc', '#12b795', '#1d8ac4', '#1cadfe'],
name: '',
type: 'pie',
radius: ['50%', '65%'],
center: ['40%', '50%'],
startAngle: 150,
avoidLabelOverlap: false,
itemStyle: {
// borderColor: '#122227',
borderColor: 'transparent',
borderWidth: 3,
},
labelLine: {
length: 30,
},
label: {
bleedMargin: 5,
alignTo: 'labelLine',
position: 'outer',
formatter: '{a|{c}({d}%)}\n {per|{b}} ',
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#fff',
lineHeight: 26,
align: 'center',
fontSize: 12,
},
hr: {
borderColor: 'auto',
width: '100%',
borderWidth: 1,
height: 0,
},
per: {
color: '#1ef0ed',
backgroundColor: 'rgba(0, 0, 0, 0)',
padding: [5, 5],
borderRadius: 4,
fontSize: 12,
},
},
},
data: [],
},
],
};
option.series[1].data = data1
2.8、雷达图
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
const indicator = [
{
text: '文明村',
min: 0,
max: 100
},
{
text: '卫生村',
min: 0,
max: 100
},
{
text: '森林村庄',
min: 0,
max: 100
},
{
text: '全面小康',
min: 0,
max: 100
},
{
text: '景区村庄',
min: 0,
max: 100
}
]
const Data = [80,61,70,86,77]
function setData() {
return [
{
value: Data,
itemStyle: {
normal: {
lineStyle: {
color: '#4BFFFC',
shadowColor: '#4BFFFC',
shadowBlur: 5
},
shadowColor: '#4BFFFC',
shadowBlur: 5
}
},
areaStyle: {
normal: {
// 单项区域填充样式
color: {
type: 'radial',
x: 0.5, //右
y: 0.5, //下
r: 1,
colorStops: [
{
offset: 1,
color: '#4BFFFC'
},
{
offset: 0,
color: 'rgba(0,0,0,0)'
}
],
globalCoord: false
},
opacity: 0.8 // 区域透明度
}
}
}
]
}
function setgauge(i) {
return {
type: 'gauge',
detail: false,
splitNumber: 10, //刻度数量
radius: '80%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#66ccff',
width: 1
},
length: 6,
splitNumber: 1
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}
}
function setSpot() {
var scatterData = []
Data.map((o, i) => {
scatterData.push({
value: [o, i],
itemStyle: {
normal: {
color: color[i],
borderColor: '#fff',
borderWidth: 1,
shadowColor: color[i],
shadowBlur: 8
}
}
})
})
return scatterData
}
option = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%'
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 24,
padding: -10
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5
}
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff'
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)'
},
data: setData()
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot()
}
]
};
2.9、雷达图-渐变色
option = {
backgroundColor: '#000928',
color: ['#3D91F7', '#61BE67'],
tooltip: {},
legend: {
show: true,
icon: "circle",
bottom: 30,
center: 0,
itemWidth: 14,
itemHeight: 14,
itemGap: 21,
orient: "horizontal",
data: ['a', 'b'],
textStyle: {
fontSize: '70%',
color: '#8C8C8C'
},
},
radar: {
// shape: 'circle',
radius:'80%',
triggerEvent: true,
name: {
textStyle: {
color: '#fff',
fontSize:'20',
borderRadius: 3,
padding: [3, 5]
}
},
nameGap:'2',
indicator: [{//[4300, 10000, 28000, 35000, 50000, 19000, 21000]
name: '资金周转', max: 6500},
{name: '其他', max: 16000},
{name: '金融理财', max: 30000 },
{name: '投资', max: 38000},
{name: '个人消费',max: 52000},
{name: '固定资产', max: 25000},
{name: '生产经营', max: 25000}
],
splitArea: {
areaStyle: {
color: [
'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
].reverse()
}
},
// axisLabel:{//展示刻度
// show: true
// },
axisLine: { //指向外圈文本的分隔线样式
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
splitLine: {
lineStyle: {
width:2,
color: [
'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
].reverse()
}
},
},
series: [{
name: '一级权重分析',
type: 'radar',
//areaStyle: {normal: {}},
areaStyle: {
normal: {
color: 'rgba(252,211,3, 0.3)'
}
},
symbolSize: 0,
lineStyle: {
normal: {
color: 'rgba(252,211,3, 1)',
width: 1
}
},
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
name: '因素',
}
]
}]
}
三、结语
点赞收藏不迷路。后续好看得图例，我也会继续更新
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
