如图配置项
1650618309(1).png
var xData3 = ["网架类问题", "运行类问题"];
var data3 = [this.count.count1, this.count.count2];
var option = {
tooltip: {
trigger: "axis",
show: false,
},
grid: {
left: 50,
bottom: 50,
top: 50,
right: 40,
},
xAxis: {
data: xData3,
name: "",
// 坐标轴刻度相关设置
axisTick: {
show: false,
},
// 坐标轴线的相关设置
axisLine: {
show: true,
lineStyle: {
color: "#414965",
},
},
// 坐标轴刻度标签的相关设置
axisLabel: {
// 可以设置成 0 强制显示所有标签
interval: 0,
textStyle: {
color: "#fff",
fontSize: 12,
},
margin: 15, //刻度标签与轴线之间的距离。
},
},
yAxis: {
name: "",
nameTextStyle: {
color: "#fff",
},
// 坐标轴在grid区域中的分隔线
splitLine: {
show: true,
lineStyle: {
color: "#fff",
opacity: 0.15,
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
opacity: 0.15,
},
},
axisLabel: {
textStyle: {
color: '#68CDE9',
fontSize: 12,
},
},
},
series: [
{
//三个最低下的圆片
// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
name: "",
type: "pictorialBar",
symbolSize: [40, 8],
symbolOffset: [0, 5],
z: 12,
// 图形样式
itemStyle: {
opacity: 1,
normal: {
show: true,
color:function(params){
var colorlist = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#09A4F8",
},
{
offset: 1,
color: "#36B8FB",
},
]),
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#0F9DE8",
},
{
offset: 1,
color: "#5ABBEF",
},
])];
return colorlist[params.dataIndex];
},
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#36B8FB",//0%处的颜色
// },
// {
// offset: 1,
// color: "#09A4F8",//100%处的颜色
// },
// ]),
barBorderRadius: 0,
borderWidth: 0,
},
},
// 显示最底下的圆片
data: [1, 1],
},
//下半截柱状图
{
name: "2020",
type: "bar",
barWidth: 40,
barGap: "100%",
itemStyle: {
//lenged文本
opacity: 0.1,
normal: {
show: true,
color:function(params){
var colorlist = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#07A2F9",
},
{
offset: 1,
color: "#53EEF0",
},
]),
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#00A7F7",
},
{
offset: 1,
color: "#B26BE9",
},
])];
return colorlist[params.dataIndex];
},
barBorderRadius: 0,
borderWidth: 0,
},
},
label: {
show: true,
position: "top",
distance: 10,
color: "#fff",
},
data: data3,
},
{
name: "",
type: "pictorialBar",
// 图形的大小
symbolSize: [40, 8],
// 图形相对于原本位置的偏移
symbolOffset: [0, -5],
z: 12,
itemStyle: {
opacity: 1,
normal: {
show: true,
color:function(params){
var colorlist = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#06949F",
},
{
offset: 1,
color: "#2BB9C1",
},
]),
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#0F9DE8",
},
{
offset: 1,
color: "#5ABBEF",
},
])];
return colorlist[params.dataIndex];
},
barBorderRadius: 0,
borderWidth: 0,
},
},
// 图形的定位位置
symbolPosition: "end",
data: data3,
},
],
};
this.dom = echarts.init(this.$refs.dom)
this.dom.setOption(option)