注:部分效果为动图叠加
仪表盘
const getOption = (data, color) => {
return {
series: [
{
type: 'gauge',
name: '最外层蓝圈',
radius: '74%',
startAngle: '225',
endAngle: '-45',
splitNumber: '10',
pointer: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 1,
},
],
axisLine: {
show: true,
lineStyle: {
color: [[1, 'rgba(0,99,190,1)']],
width: 2,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 99, 190, 0.8)',
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
length: 2,
lineStyle: {
color: '#051932',
width: 1,
type: 'solid',
},
},
axisLabel: {
show: false,
},
},
{
type: 'gauge',
radius: '70%',
startAngle: '225',
endAngle: '-45',
min: 0,
max: 10,
splitNumber: 10,
pointer: {
show: true,
width: 2,
itemStyle: {
// 表盘指针的颜色
color: '#57EAFF',
},
},
detail: {
offsetCenter: ['0%', '55%'],
color: color,
fontSize: 30,
},
data: data,
title: {
show: false,
},
axisLine: {
lineStyle: {
width: 2,
color: '#051932',
},
},
progress: {
show: true,
width: 5,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#11f656', // 0% 处的颜色
},
{
offset: 1,
color: color, // 100% 处的颜色
},
]),
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
length: 2,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid',
},
},
axisLabel: {
show: false,
},
animationDuration: 1400,
},
{
name: '表盘刻度',
type: 'gauge',
radius: '80%',
startAngle: 225, //刻度起始
endAngle: -45, //刻度结束
min: 0,
max: 10,
splitNumber: 10,
z: 4,
axisTick: {
show: false,
},
splitLine: {
length: 2, //刻度节点线长度
lineStyle: {
width: 2,
color: 'auto',
}, //刻度节点线
},
axisLabel: {
color: '#3F8ECA',
fontSize: 10,
}, //刻度节点文字颜色
pointer: {
show: false,
},
axisLine: {
lineStyle: {
color: [
[0.2, '#2AF65F'],
[0.4, '#B0D651'],
[0.6, '#F2CB3E'],
[0.8, '#F69D23'],
[1, '#FF0100'],
],
opacity: 0,
},
},
detail: {
show: false,
},
data: [
{
value: 10,
name: '',
},
],
},
{
//底部半透明大圆环内圆
type: 'pie',
radius: '36%',
center: ['50%', '50%'],
z: 1,
itemStyle: {
color: 'rgba(0,6,33,0.7)',
},
emphasis: {
scale: false,
},
tooltip: {
show: false,
},
data: [10],
animationType: 'scale',
},
{
//底部半透明大圆环外圆
type: 'pie',
radius: '66%',
center: ['50%', '50%'],
z: 0,
itemStyle: {
color: new echarts.graphic.RadialGradient(
0.5,
0.5,
0.7,
[
{
offset: 0,
color: 'rgb(8,128,238)',
},
{
offset: 0.55,
color: 'rgb(1,10,50)',
},
{
offset: 1,
color: 'rgb(8,128,238)',
},
],
false
),
},
emphasis: {
scale: false,
},
tooltip: {
show: false,
},
data: [10],
animationType: 'scale',
},
{
name: '小圆最内部圆',
type: 'pie',
emphasis: {
scale: false,
},
legendHoverLink: false,
radius: ['0%', '8%'],
tooltip: {
show: false,
},
z: 10,
label: {
show: false,
},
data: [
{
value: 100,
name: '2',
itemStyle: {
color: '#0E1327',
},
},
],
},
{
name: '小圆蓝内圈',
type: 'pie',
emphasis: {
scale: false,
},
legendHoverLink: false,
radius: ['7%', '9%'],
tooltip: {
show: false,
},
z: 10,
label: {
show: false,
},
data: [
{
value: 100,
name: '2',
itemStyle: {
color: '#6FEDFF',
},
},
],
},
{
name: '小圆蓝内外圈之间圆环',
type: 'pie',
emphasis: {
scale: false,
},
legendHoverLink: false,
tooltip: {
show: false,
},
radius: ['9%', '14%'],
z: 10,
label: {
show: false,
},
data: [
{
value: 0,
name: '1',
itemStyle: {
color: 'red',
},
},
{
value: 100,
name: '2',
itemStyle: {
color: '#0E1327',
},
},
],
},
{
name: '小圆蓝外圈',
type: 'pie',
emphasis: {
scale: false,
},
legendHoverLink: false,
tooltip: {
show: false,
},
radius: ['14%', '16%'],
z: 10,
label: {
show: false,
},
data: [
{
value: 100,
name: '2',
itemStyle: {
color: '#6FEDFF',
},
},
],
},
],
};
};
曲线图
三曲线
const getOption = (data) => {
return {
grid: {
x: 42,
y: 40,
x2: 17,
y2: 25,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(213,212,212,0.5)',
},
},
backgroundColor: 'rgba(0,6,46,0.80)',
borderColor: 'rgba(37,192,255,0.70)',
formatter: function (params) {
let color = ['#01C5FF', '#21E1B9', '#FFF21A'];
let str =
'<span style="font-size: 18px;color:#3EB5FF">' +
params[0].axisValue +
'</span>' +
'<br />';
params.forEach((item, index) => {
str +=
'<span style="display:inline-block;margin-right:5px;font-size: 18px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
color[index] +
'"></span>' +
'<span style="display:inline-block;margin: 0 0 0 5px;font-size: 18px;color:#3EB5FF;width: 65px">' +
item.seriesName +
' : ' +
'</span>' +
'<span style="display:inline-block;margin-left:20px;font-size: 18px;color:#25FFE5">' +
item.data +
'</span>' +
'<br />';
});
return str;
},
},
legend: {
right: '1.5%',
top: '2%',
data: [
{
name: '高速',
itemStyle: {
color: '#01C5FF',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
{
name: '快速路',
itemStyle: {
color: '#00CD95',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
{
name: '主干道',
itemStyle: {
color: '#FFF21A',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
],
itemWidth: 15,
itemHeight: 15,
itemGap: 30,
selectedMode: true, //选择
textStyle: {
color: '#F1F2FF',
},
},
xAxis: [
{
type: 'category',
data: data.x,
axisPointer: {
type: 'shadow',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
boundaryGap: false,
},
],
yAxis: [
{
type: 'value',
name: '单位:km/h',
nameTextStyle: {
color: '#F1F2FF',
fontSize: '16',
padding: [0, 0, 0, 22],
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
splitLine: {
lineStyle: {
color: 'rgba(89,126,178,0.7)',
},
},
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
},
],
series: [
{
name: '高速',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: false,
symbol: 'circle',
symbolSize: 2,
lineStyle: {
color: '#01C5FF',
},
itemStyle: {
smooth: true,
color: '#01C5FF',
shadowColor: 'rgba(1,197,255,0.2)',
shadowBlur: 7.5,
},
z: 12,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(80,204,255,0.2)',
},
{
offset: 1,
color: 'rgba(80,204,255,0)',
},
],
false
),
shadowColor: 'rgba(0,179,244, 0.5)',
shadowBlur: 20,
},
data: data.high,
},
{
name: '快速路',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: false,
symbol: 'circle',
symbolSize: 2,
lineStyle: {
color: '#00CD95',
},
itemStyle: {
color: '#00CD95',
shadowColor: 'rgba(33,225,185,0.2)',
shadowBlur: 7.5,
},
z: 11,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(33,225,185,0.2)',
},
{
offset: 1,
color: 'rgba(80,204,255,0)',
},
],
false
),
shadowColor: 'rgba(33,225,185,0.5)',
shadowBlur: 20,
},
data: data.quick,
},
{
name: '主干道',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: false,
symbol: 'circle',
symbolSize: 2,
itemStyle: {
color: '#FFDE00',
shadowColor: 'rgba(223, 223, 67, 0.2)',
shadowBlur: 7.5,
},
lineStyle: {
color: '#FFDE00',
},
z: 10,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(223, 223, 67, 0.2)',
},
{
offset: 1,
color: 'rgba(80,204,255,0)',
},
],
false
),
shadowColor: 'rgba(255,242,26,0.5)',
shadowBlur: 20,
},
data: data.main,
},
],
};
};
双曲线
const getOption = (data) => {
return {
grid: {
x: 60,
y: 40,
x2: 17,
y2: 25,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(213,212,212,0.5)',
},
},
backgroundColor: 'rgba(0,6,46,0.80)',
borderColor: 'rgba(37,192,255,0.70)',
textStyle: {
color: '#3EB5FF',
fontSize: '18',
},
},
legend: {
right: '1.5%',
top: '2%',
data: [
{
name: '预测指数',
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
{
name: '交通指数',
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
],
itemWidth: 15,
itemHeight: 15,
itemGap: 30,
selectedMode: true, //选择
textStyle: {
color: '#F1F2FF',
},
},
xAxis: [
{
type: 'category',
data: data.x,
axisPointer: {
type: 'shadow',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
boundaryGap: false,
},
],
yAxis: [
{
type: 'value',
name: data.unit,
nameTextStyle: {
color: '#F1F2FF',
fontSize: '16',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
splitLine: {
lineStyle: {
color: 'rgba(89,126,178,0.7)',
},
},
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
},
],
series: [
{
name: '交通指数',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: false,
symbol: 'circle',
symbolSize: 2,
lineStyle: {
color: '#50CCFF',
},
itemStyle: {
color: '#50CCFF',
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(80,204,255,0.3)',
},
{
offset: 1,
color: 'rgba(80,204,255,0)',
},
],
false
),
shadowColor: 'rgba(0,179,244, 0.9)',
shadowBlur: 20,
},
data: data.history,
},
{
name: '预测指数',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: false,
symbol: 'circle',
symbolSize: 2,
lineStyle: {
type: 'dashed',
color: '#F8AF0B',
},
itemStyle: {
color: '#F8AF0B',
},
data: data.predict,
},
{
name: '',
type: 'effectScatter',
symbolSize: [8, 8],
rippleEffect: {
period: 15,
scale: 10,
brushType: 'stroke',
},
tooltip: {
show: false,
},
itemStyle: {
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: '#FFF21A',
},
{
offset: 1,
color: '#FFF21A',
},
]),
},
z: 12,
data: data.point,
},
],
};
};
柱状图
柱状图一
const getOption = (data) => {
return {
grid: {
x: 40,
y: 62,
x2: 28,
y2: 40,
},
tooltip: {
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(213,212,212,0.5)',
},
},
backgroundColor: 'rgba(0,6,46,0.80)',
borderColor: 'rgba(37,192,255,0.70)',
textStyle: {
color: '#3EB5FF',
fontSize: '18',
},
},
legend: {
right: '15%',
top: '11%',
data: [
{
name: '交通指数',
itemStyle: {
color: '#00FFFF',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
{
name: '预测指数',
itemStyle: {
color: '#FFD300',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
],
itemWidth: 15,
itemHeight: 15,
itemGap: 30,
selectedMode: false, //选择
textStyle: {
color: '#F1F2FF',
},
},
xAxis: [
{
type: 'category',
data: data.x,
axisPointer: {
type: 'shadow',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
splitLine: {
lineStyle: {
color: 'rgba(89,126,178,0.7)',
},
},
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
},
],
series: [
{
name: '交通指数',
type: 'bar',
barWidth: '7px',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00FFFF', // 0% 处的颜色
},
{
offset: 0.38,
color: '#00D0FF', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(58,166,239,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: data.history,
},
{
name: '预测指数',
type: 'bar',
barWidth: '7px',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FFD300', // 0% 处的颜色
},
{
offset: 0.25,
color: 'rgba(255, 189, 0, 0.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,207,0,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: data.predict,
},
{
name: 'blue',
type: 'pictorialBar',
symbol:
'image://data:image/png;base64,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',
symbolSize: [25, 25],
symbolOffset: [-4, -12],
z: 12,
tooltip: {
show: false,
},
data: data.blue,
},
{
name: 'yellow',
type: 'pictorialBar',
symbol:
'image://data:image/png;base64,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',
symbolSize: [25, 25],
symbolOffset: [4, -12],
z: 12,
tooltip: {
show: false,
},
data: data.yellow,
},
],
};
};
柱状图二
const getOption = (data) => {
return {
grid: {
x: 60,
y: 40,
x2: 25,
y2: 25,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(213,212,212,0.5)',
},
},
backgroundColor: 'rgba(0,6,46,0.80)',
borderColor: 'rgba(37,192,255,0.70)',
formatter: function (params) {
let color = ['#01C5FF', '#FFF21A'];
let str =
'<span style="font-size: 18px;color:#3EB5FF">' +
params[0].axisValue +
'</span>' +
'<br />';
params.forEach((item, index) => {
str +=
'<span style="display:inline-block;margin-right:5px;font-size: 18px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
color[index] +
'"></span>' +
'<span style="display:inline-block;margin: 0 0 0 5px;font-size: 18px;color:#3EB5FF;width: 80px">' +
item.seriesName +
' : ' +
'</span>' +
'<span style="display:inline-block;margin-left:20px;font-size: 18px;color:#25FFE5">' +
item.data +
'</span>' +
'<br />';
});
return str;
},
},
legend: {
right: '1.5%',
top: '2%',
data: [
{
name: '事件数量',
itemStyle: {
color: '#FFF21A',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
{
name: '上月同期',
itemStyle: {
color: '#01C5FF',
},
icon:
'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
},
],
itemWidth: 15,
itemHeight: 15,
itemGap: 30,
selectedMode: false, //选择
textStyle: {
color: '#F1F2FF',
},
},
xAxis: [
{
type: 'category',
data: data.x,
axisPointer: {
type: 'shadow',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
},
],
yAxis: [
{
type: 'value',
name: '单位:个',
nameTextStyle: {
color: '#F1F2FF',
fontSize: '16',
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
axisLabel: {
show: true,
color: '#F1F2FF',
fontSize: 15,
fontWeight: 500,
},
splitLine: {
lineStyle: {
color: 'rgba(89,126,178,0.7)',
},
},
},
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(89,126,178,0.7)',
width: 2,
},
},
},
],
series: [
{
name: '上月同期',
type: 'bar',
barWidth: '7',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00EFFF', // 0% 处的颜色
},
{
offset: 0.69,
color: 'rgba(0, 225, 255, 0.61)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(58,166,239,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: data.lastMonth,
},
{
name: '事件数量',
type: 'line',
itemStyle: {
color: '#FFF21A',
shadowColor: 'rgba(223, 223, 67, 0.3)',
shadowBlur: 7.5,
},
lineStyle: {
color: '#FFF21A',
},
data: data.today,
},
{
name: '',
type: 'effectScatter',
symbolSize: [7, 7],
rippleEffect: {
period: 4,
scale: 4,
brushType: 'fill',
},
tooltip: {
show: false,
},
itemStyle: {
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: '#FFF21A',
},
{
offset: 1,
color: '#1A1835',
},
]),
},
data: data.today,
},
],
};
};
饼图
饼图一
const getOption = (list) => {
return {
title: [
/*{
text: list.total,
top: '34%',
textAlign: 'center',
left: '47%',
textStyle: {
color: '#00FFB0',
fontSize: 20,
fontWeight: '500',
},
},*/
{
text: '人次',
top: '51%',
textAlign: 'center',
left: '47%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '500',
},
},
],
series: [
// 数据
{
//亮圆环
type: 'pie',
radius: ['65%', '71%'],
center: ['50%', '50%'],
data: [
{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
label: {
show: false,
},
},
{
value: list.outProvince,
itemStyle: {
color: '#0BFBFD',
},
label: {
show: false,
},
},
{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
label: {
show: false,
},
},
{
hoverOffset: 1,
value: list.inProvince,
itemStyle: {
color: '#FFB70F',
},
label: {
show: false,
},
labelLine: {
smooth: true,
lineStyle: {
width: 0,
},
},
hoverAnimation: false,
},
{
hoverOffset: 1,
value: list.local,
itemStyle: {
color: '#0C97FE',
},
label: {
show: false,
},
labelLine: {
smooth: true,
lineStyle: {
width: 0,
},
},
hoverAnimation: false,
},
],
},
{
// 内阴影
type: 'pie',
radius: ['50%', '65%'],
center: ['50%', '50%'],
data: [
{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
label: {
show: false,
},
},
{
value: list.outProvince,
itemStyle: {
color: 'rgba(11,251,253,0.3)',
},
label: {
show: false,
},
},
{
value: 1,
itemStyle: {
color: 'rgba(0, 0, 0, 0)',
},
label: {
show: false,
},
},
{
hoverOffset: 1,
value: list.inProvince,
itemStyle: {
color: 'rgba(255,183,15,0.3)',
},
label: {
show: false,
},
labelLine: {
smooth: true,
length: 1,
length2: 20,
},
hoverAnimation: false,
},
{
hoverOffset: 1,
value: list.local,
itemStyle: {
color: 'rgba(12,151,254,0.2)',
},
label: {
show: false,
},
labelLine: {
smooth: true,
length: 1,
length2: 20,
},
hoverAnimation: false,
},
],
},
{
name: '最外部进度条',
type: 'gauge',
radius: '80%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[
0.85,
new echarts.graphic.LinearGradient(0, 0.5, 1, 0, [
{
offset: 0,
color: 'rgba(145,207,255,0)',
},
{
offset: 0.5,
color: 'rgba(145,207,255,0.2)',
},
{
offset: 1,
color: '#046F89',
},
]),
],
[1, '#07204B'],
],
width: 4,
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
show: false,
},
title: {
//标题
show: false,
},
data: [
{
name: 'title',
value: 4,
},
],
pointer: {
show: false,
},
animationDuration: 4000,
},
],
};
};
饼图二
const getOption = (list) => {
var data = list.woman;
return {
title: [
{
text: '人次',
top: '50%',
textAlign: 'center',
left: '47%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '500',
},
},
],
series: [
{
type: 'pie',
center: ['50%', '50%'],
radius: ['68%', '80%'],
emphasis: {
scale: false,
},
startAngle: -180,
clockwise: false,
labelLine: {
show: false,
},
data: [
{
name: '',
value: data > 100 ? 100 : data,
itemStyle: {
color: '#05e28d',
},
},
],
},
{
type: 'pie',
center: ['50%', '50%'],
radius: ['60%', '95%'],
startAngle: -180,
clockwise: false,
labelLine: {
show: false,
},
itemStyle: {
color: 'rgba(0,0,0,0)',
},
emphasis: {
scale: false,
label: {
borderColor: 'rgb(0, 2, 69)',
},
},
data: [
{
name: '',
value: data / 2,
},
{
//画中间的图标
name: '',
value: 0,
itemStyle: {
color: '#fff',
},
label: {
position: 'inside',
formatter: function () {
return '{a|女}';
},
rich: {
a: {
color: '#fff',
fontSize: 16,
width: 25,
height: 25,
borderRadius: 21,
borderWidth: 4,
borderColor: 'rgb(0, 2, 69)',
fontWeight: 600,
backgroundColor: '#00CA34',
},
},
},
},
{
//画剩余的刻度圆环
name: '',
value: 100 - data / 2,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
label: {
show: false,
},
},
],
},
//男 半圆的线
{
type: 'pie',
center: ['50%', '50%'],
radius: ['65%', '85%'],
emphasis: {
scale: false,
},
startAngle: -180,
clockwise: false,
labelLine: {
show: false,
},
data: [
{
name: '',
value: data,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
},
{
name: '',
value: (100 - data) * 0.5,
itemStyle: {
color: '#00EAFF',
},
},
{
//画中间的图标
name: '',
value: 0,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
},
{
//画剩余的刻度圆环
name: '',
value: 100 - data - (100 - data) * 0.5,
itemStyle: {
color: '#00EAFF',
},
label: {
show: false,
},
},
],
},
//男 中心圆
{
type: 'pie',
center: ['50%', '50%'],
radius: ['78%', '85%'],
emphasis: {
scale: false,
},
startAngle: -180,
clockwise: false,
labelLine: {
show: false,
},
z: 12,
data: [
{
name: '',
value: data,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
},
{
name: '',
value: (100 - data) * 0.5,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
},
{
//画中间的图标
name: '',
value: 0,
itemStyle: {
color: '#fff',
},
label: {
position: 'inside',
fontWeight: 'normal',
formatter: function () {
return '{a|男}';
},
rich: {
a: {
color: '#fff',
fontSize: 14,
width: 25,
height: 25,
borderRadius: 21,
fontWeight: 100,
borderWidth: 4,
borderColor: 'rgb(0 2 69)',
fontFamily: 'Microsoft YaHei',
// lineHeight:100,
backgroundColor: '#009EFF',
},
},
},
},
{
//画剩余的刻度圆环
name: '',
value: 100 - data - (100 - data) * 0.5,
itemStyle: {
color: 'rgba(0,0,0,0)',
},
label: {
show: false,
},
},
],
},
//最外层
{
type: 'pie',
clockwise: false,
radius: ['89%', '92%'],
emphasis: {
scale: false,
},
silent: true,
center: ['50%', '50%'],
labelLine: { show: false },
data: [
{
value: 1,
itemStyle: {
color: 'rgba(19,159,190,0.7)',
shadowColor: 'rgba(19,159,190,0.7)',
borderWidth: 2,
borderColor: 'rgba(19,159,190,0.7)',
shadowBlur: 5,
borderRadius: 10,
},
},
{
value: 44,
itemStyle: {
color: 'rgba(19,159,190,0.3)',
},
},
{
value: 1,
itemStyle: {
color: 'rgba(19,159,190,0.7)',
shadowColor: 'rgba(19,159,190,0.7)',
borderWidth: 2,
borderColor: 'rgba(19,159,190,0.7)',
shadowBlur: 5,
borderRadius: 10,
},
},
{
value: 44,
itemStyle: {
color: 'rgba(19,159,190,0.3)',
},
},
{
value: 1,
itemStyle: {
color: 'rgba(19,159,190,0.7)',
shadowColor: 'rgba(19,159,190,0.7)',
borderWidth: 2,
borderColor: 'rgba(19,159,190,0.7)',
shadowBlur: 5,
borderRadius: 10,
},
},
{
value: 44,
itemStyle: {
color: 'rgba(19,159,190,0.3)',
},
},
{
value: 1,
itemStyle: {
color: 'rgba(19,159,190,0.7)',
shadowColor: 'rgba(19,159,190,0.7)',
borderWidth: 2,
borderColor: 'rgba(19,159,190,0.7)',
shadowBlur: 5,
borderRadius: 10,
},
},
{
value: 44,
itemStyle: {
color: 'rgba(19,159,190,0.3)',
},
},
],
},
],
};
};
饼图三
const getOption = (data) => {
return {
title: [
{
text: '人次',
top: '51%',
textAlign: 'center',
left: '47%',
textStyle: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '500',
},
},
],
series: [
{
name: '半径模式',
type: 'pie',
radius: ['45%', '80%'],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: false,
},
labelLine: {
length: 1,
length2: 20,
smooth: true,
},
data: [
{
value: data.low,
name: 'social',
itemStyle: {
color: '#03FFFF',
borderWidth: 3,
},
},
{
value: data.middle,
name: 'shopping',
itemStyle: {
color: '#00FFA4',
borderWidth: 3,
},
},
{
value: data.high,
name: 'reading',
itemStyle: {
color: '#0097FF',
borderWidth: 3,
},
},
],
},
],
};
};
其他
树状
const getOption = (data) => {
return {
grid: {
left: '5%',
right: '5%',
bottom: '0',
top: '20%',
containLabel: true,
},
xAxis: {
data: data.xdata,
triggerEvent: true,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
rotate: -30,
color: '#F1F2FF',
},
},
yAxis: {
name: '',
nameTextStyle: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: 'hill',
barMinHeight: 10,
type: 'pictorialBar',
barCategoryGap: '-80%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
//color: 'rgba(98,114,255,0.8)',
color: function (params) {
let colorList = [
'rgba(98,114,255,0.6)',
'rgba(98,114,255,0.8)',
'rgba(98,114,255,0.6)',
'rgba(98,114,255,0.8)',
'rgba(98,114,255,0.6)',
];
return colorList[params.dataIndex];
},
},
label: {
formatter: '{@score}%',
show: true,
position: 'top',
color: '#00FFB0',
fontSize: 20,
},
data: data.data,
},
],
};
};
水球
此处注意echart5.0以上版本需额外引入 import ‘echarts-liquidfill’;
const getOption = () => {
return {
series: [
{
type: 'liquidFill',
name: '',
radius: '85%',
center: ['50%', '45%'],
data: [0.55, 0.5, 0.5],
color: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'],
outline: {
show: false,
},
backgroundStyle: {
color: 'transparent',
borderColor: 'transparent',
borderWidth: 1,
shadowColor: 'transparent',
shadowBlur: 0,
},
label: {
show: false,
},
},
],
};
};