几个特别的图表的实现的option
2020-09-10 本文已影响0人
卟噜卟噜叭
1. Y轴缺省，x轴分割线缺省，如图
image.png
option: {
tooltip: {
trigger: 'axis',
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '20%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
axisLabel: {
textStyle: {
color: '#00E3EA', //坐标值得具体的颜色
},
},
axisLine: {
//y轴
show: false,
},
splitLine: {
//网格线
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#00E3EA', //坐标值得具体的颜色
},
},
axisLine: {
//y轴
show: false,
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
lineStyle: {
color: '#025474',
},
},
},
series: [
{
name: '一般隐患',
data: [20, 19, 21, 19, 18, 17, 12],
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#3591C7',
lineStyle: {
color: '#3591C7',
},
},
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3591C7',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
},
},
},
{
name: '重大隐患',
data: [2, 1, 0, 1, 2, 1, 1],
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#DF639B',
lineStyle: {
color: '#DF639B',
},
},
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#DF639B',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
},
},
},
],
},
};
},
2. 图例文字跟图例颜色同色，如图
image.png
legend: {
top: 10,
width: 500,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
itemGap: 15,
data: ['危大工程','安全管理', '文明施工', '消防安全', '设备设施', '临时用电', '安全防护', '其他'],
textStyle: {
color: [ '#D17D8C', '#AB7956', '#FE8BFF', '#70D3CE', '#2BD388','#B74E9E','#53B7FE','#888960','#31F8E5','#32F3FE', '#F7FD59', '#FDAA59', '#D04C50',],
},
},
3. 横向柱状图，缺省坐标轴，柱子有背景色，如图
image.png
option: {
title: {
text: '施工人数(人)',
textStyle: {
color: '#59fdfa',
fontSize: 13,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
show: false,
top: '20%',
left: '3%',
right: '15%',
bottom: '0',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
show: false,
splitLine: {
//网格线
show: false,
},
},
yAxis: {
type: 'category',
data: ['四标', '三标', '二标', '一标'],
axisLabel: {
color: '#abb8ce',
textStyle: {
color: '#00E3EA', //坐标值得具体的颜色
},
},
axisLine: {
//y轴
show: false,
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
show: false,
},
},
series: [
{
name: '2011年',
type: 'bar',
data: [0, 124, 315, 231],
barWidth: 15,
showBackground: true,
backgroundStyle: {
color: 'rgba(45, 187, 250, 0.2)',
},
itemStyle: {
normal: {
label: {
show: true,
position: [122, 2],
textStyle: {
color: '#fff',
fontSize: 12,
},
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#2A89D2',
},
{
offset: 1,
color: '#41C8FE',
},
]),
},
},
},
],
},
4. 环形饼图，图中间有图片，graphic是关键，如图
image.png
option: {
title: {
text: '机械数量(台)',
textStyle: {
color: '#59fdfa',
fontSize: 13,
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
legend: {
height: 20,
center: 10,
bottom: 10,
itemWidth: 5,
itemHeight: 5,
textStyle: {
color: '#ffffff',
},
data: ['塔吊', '吊车', '挖机', '旋挖机', '履带吊', '成槽机'],
},
graphic: {
elements: [
{
type: 'image',
style: {
image: require('../../assets/images/common/mch.png'),
width: 30,
height: 35,
},
left: 'center',
top: '55',
},
],
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '40%'],
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 80, name: '塔吊' },
{ value: 60, name: '吊车' },
{ value: 15, name: '挖机' },
{ value: 20, name: '旋挖机' },
{ value: 30, name: '履带吊' },
{ value: 18, name: '成槽机' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
normal: {
color: function (params) {
//自定义颜色
var colorList = [
'#6D54E4',
'#E45462',
'#FF8B93',
'#E4C054',
'#00AB85',
'#53B8FF',
];
return colorList[params.dataIndex];
},
},
},
},
],
},
