let xData = ['全额资助','非全额资助'];
let projectData = [18,26];
let fundData = [5.8,10];
let legend = ["项目数", "经费数"];
let option = {
color: ["#333FFF", "#23B899"],
timeline: {
show: false,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function(prams){
var newStr = prams[0].seriesName + ":<br/>"
let unit = prams[0].seriesName == '项目数'? '个':'万元'
newStr += (prams[0].marker + ' ' + prams[0].name + '：' + prams[0].value + unit + '<br/>')
return newStr
}
},
legend : {
top : '4%',
left : 'center',
itemWidth : 12,
itemHeight : 12,
itemGap: 100,
icon : 'horizontal',
textStyle : {
color : '#4F5A6E',
fontSize : 16,
},
data: legend,
selectedMode: false,
},
grid: [
// 左边
{
show: false,
left: "5%",
top: "12%",
bottom: "0%",
containLabel: true,
width: "35%",
},
// 中间
{
show: false,
left: "52%",
top: "12%",
bottom: "0%",
width: "0%",
},
// 右边
{
show: false,
right: "8%",
top: "12%",
bottom: "0%",
containLabel: true,
width: "35%",
},
],
xAxis: [
{
type: "value",
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
show: false,
},
{
gridIndex: 2,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: true,
lineStyle: {
type: "solid",
color: "#E4E4E4",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
fontSize: 12,
color: "#333333",
lineHeight: 16,
align: "center",
},
data: xData.map(function (value) {
return {
value: value,
textStyle: {
align: "center",
},
};
}),
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: true,
lineStyle: {
type: "solid",
color: "#E4E4E4",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
],
series: [
{
name: legend[0],
type: "bar",
barWidth: 10,
stack: "1",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#ccdafb",
},
{
offset: 1,
color: "#416FBE",
},
]),
},
label: {
show: true,
position: "left",
color: "#416FBE",
},
data: projectData,
animationEasing: "elasticOut",
},
{
// 值分隔
name: legend[0],
type: "pictorialBar",
itemStyle: {
color: "#fff",
},
xAxisIndex: 0,
yAxisIndex: 0,
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [2, 12],
symbolPosition: "start",
symbolOffset: [0, -1],
data: projectData,
width: 25,
z: 0,
zlevel: 3,
},
{
name: legend[1],
type: "bar",
stack: "2",
barWidth: 10,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#FF554E",
},
{
offset: 1,
color: "#F99B97",
},
]),
},
label: {
show: true,
position: "right",
color: "#FF554E",
},
data: fundData,
animationEasing: "elasticOut",
},
{
// 值分隔
name: legend[1],
type: "pictorialBar",
itemStyle: {
color: "#fff",
},
xAxisIndex: 2,
yAxisIndex: 2,
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [2, 12],
symbolPosition: "start",
symbolOffset: [0, -1],
data: fundData,
width: 25,
z: 0,
zlevel: 3,
},
],
};