echartsecharts单柱形图 JS代码 echarts双柱形图 echarts柱形图加折线图（双Y轴） echa

echarts单柱形图


<template>  
<!-- 单柱状图及单变色 -->  
<div class="barGraph_box">  
<barTitle :dateType="dateType" ref="barTitle" :dataColor="dataColor" :title="barObj.dataTitle" @getTime="getTime"></barTitle>  
<div class="barGraph" :id="barObj.barIdName" :style="{height:barHeight}"></div>  
</div>  
</template>  
<script>  
import barGraph from "./js/barGraph.js";  
export default barGraph;  
</script>  
<style lang="less" scoped>  
.barGraph_box {  
width: 100%;  
// height: 30vh;  
margin-top: 10px;  
margin-bottom: 10px;  
}  
.barGraph {  
width: 100%;  
height: 30vh;  
}  
.datail_title {  
font-weight: bold;  
font-size: 16px;  
text-align: left;  
}  
.alinRight {  
text-align: right;  
padding-right: 10px;  
}  
.m-t-10 {  
margin-top: 10px;  
}  
.tab_div {  
padding: 0 10px;  
width: 100%;  
background-image: url(/static/img/lineTitle.png);  
background-repeat: no-repeat;  
background-size: 100%;  
background-position: 0px 33px;  
height: 40px;  
line-height: 12px;  
}  
  
/deep/ .el-input--mini {  
width: 135px !important;  
  
}  
</style>

JS代码

//参数格式：
{
this.dataType = "2";  
this.dateType = "quarte";  
this.radioShow = true  
this.barObj = {  
dataTitle: "电厂WANO综合指数",  
dateType: 'quarte',  
barIdName: "barObj",  
xAxisText: [  
"EXELON",  
"DNMC",  
"KHNP",  
"EDF ENTERGY",  
"TARIO POWER",  
"EDF",  
"NPCIL",  
"TAIR POWER"  
],  
barList: [  
{ name: "EXELON", value: 98.12, type: "" },  
{ name: "DNMC", value: 92.6, type: "point" },  
{ name: "KHNP", value: 89.36, type: "" },  
{ name: "EDF ENTERGY", value: 78.32, type: "" },  
{ name: "TARIO POWER", value: 78.02, type: "" },  
{ name: "EDF", value: 74.14, type: "" },  
{ name: "NPCIL", value: 66.27, type: "" },  
{ name: "TAIR POWER", value: 60.98, type: "" }  
],  
min: 100,  
max: 0,  
interval: 20,  
barName: "分",  
normalColor: "#45affd",  
specialColor: "#EF7814",  
legend: false,  
legendName: [""]  
};
}

initEchart() {  
if(this.barObj.legend){  
if(this.barObj.normalColor =="#EF7814"){  
this.iconImg = orangeImg  
}else if(this.barObj.normalColor =="#45affd"){  
this.iconImg = blueImg  
}else if(this.barObj.normalColor =="#29CB97"){  
this.iconImg = greenImg  
}  
}  
const dataIndex = this.dataIndex;  
let that = this;  
var echarts = require("echarts");  
var myChart = echarts.init(  
document.getElementById(this.barObj.barIdName)  
);  
// 绘制左侧面  
const wid = 20;  
const w1 = Math.sin(Math.PI / 3) * wid;//6 顶部平面形状凸起高度  
const w2 = Math.sin(Math.PI / 3) * wid; //3  
const snapHeight = wid/1 ;//4  
const CubeLeft = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
// shape是从custom传入的  
const xAxisPoint = shape.xAxisPoint;  
const c0 = [shape.x, shape.y - 2];  
const c1 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
const c2 = [shape.x - w2, xAxisPoint[1] - w1 + snapHeight - 2];  
const c3 = [shape.x, xAxisPoint[1]];  
ctx  
.moveTo(c0[0], c0[1])  
.lineTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.closePath();  
}  
});  
// 绘制右侧面  
const CubeRight = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const xAxisPoint = shape.xAxisPoint;  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x, xAxisPoint[1] - 0];  
const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight - 2];  
const c4 = [shape.x + w1, shape.y - w2 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 绘制顶面  
const CubeTop = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x + w1, shape.y - w2 + snapHeight - 2]; //右点  
const c3 = [  
shape.x - w2 + w1,  
shape.y - w1 - w2 + +snapHeight * 2 - 2  
];  
const c4 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 注册三个面图形  
echarts.graphic.registerShape("CubeLeft", CubeLeft);  
echarts.graphic.registerShape("CubeRight", CubeRight);  
echarts.graphic.registerShape("CubeTop", CubeTop);  
var option = {  
legend: {  
show:this.barObj.legend,  
left:50,  
orient:"vertical",  
data:this.barObj.legendName,  
itemWidth:30,  
itemHeight:15,  
icon:"[image://"+this.iconImg+]()"",  
},
grid: {  
//图表的上下左右的距离  
x: this.barObj.barName == '次数'?20:10,  
y: 40,  
x2: 10,  
y2: 40,  
padding: "0 0 0 0",  
containLabel: true  
},  
xAxis: {  
type: "category",  
data: this.barObj.xAxisText,  
splitLine: {  
show: false  
},  
axisTick: {show: false, alignWithLabel: true },  
axisLine: {  
show: true,  
lineStyle: {  
color: "#45AFFD"  
},  
textStyle: {  
color: "red"  
}  
},  
triggerEvent: true,  
axisLabel: {  
show: true,  
interval: 0,  
//超过5个文字换行显示...  
formatter: function(value) {  
let strs = value.split(''); //字符串数组  
let str = ''  
for(let i = 0, s; s = strs[i++];) { //遍历字符串数组  
str += s;  
if(!(i % 6)) str += '\n'; //按需要求余，目前是一个字换一行  
}  
return str  
},  
textStyle: {  
// fontSize: 8,  
color: "#666666"  
}  
  
// rotate:25,//文字倾斜  
},  
boundaryGap:true  
},  
yAxis: {  
boundaryGap:true,  
type: "value",  
name: this.barObj.barName,  
nameTextStyle: {  
padding: [0, 0, 0, -40],  
},  
nameGap: 20,  
min: this.barObj.min,  
max: this.barObj.max,  
// inverse: true,  
interval: this.barObj.interval,  
splitLine: {  
show: true,  
lineStyle: {  
type: "dashed"  
}  
},  
gridTndex: 0,  
axisTick: { show: false },  
axisLine: { show: false },  
axisLabel: {  
show: true,  
textStyle: {  
color: "#666666"  
}  
}  
},
series: [  
{  
//下面就是柱状图的每个柱的颜色设置  
name:this.barObj.legendName[0],  
type: "custom",  
renderItem: (params, api) => {  
const location = api.coord([api.value(0), api.value(1)]);  
let realColor = this.barObj.normalColor;  
if ( (params.dataIndex == 4 || params.dataIndex == 10)) {  
if (params.dataIndex == dataIndex) {  
realColor = this.barObj.specialColor;  
}  
if ( (params.dataIndex == 5 || params.dataIndex == 6)) {  
realColor = this.barObj.greenColor;  
}  
} else {  
// realColor = '#45affd'  
}  
return {  
type: "group",  
children: [  
{  
type: "CubeLeft",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 2, 2, 2, [  
{  
offset: 0,  
color: realColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeRight",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(2, 2, 8, 0, [  
{  
offset: 0,  
color: realColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeTop",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
{  
offset: 0,  
color: realColor == '#EF7814' ? '#FFBD5D' : (realColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
},  
{  
offset: 1,  
color: realColor == '#EF7814' ? '#FFBD5D' : (realColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
}  
])  
}  
}  
]  
};  
},  
data: this.barObj.barList  
},
{  
name:this.barObj.legendName[0],  
type: "bar",  
barWidth: 5,  
label: {  
normal: {  
show: true,  
position: "top",  
// fontSize: 10,  
color: "#45affd",  
formatter: function(params, index) {  
if (params.dataIndex == dataIndex) {  
return "{point|" + (params.value + ((that.barObj.barIdName == 'barObjFactor' || that.barObj.barIdName == 'barObjDivisor1' || that.barObj.barIdName == 'barObjDivisor') ? '%' : '')) + "}";  
} else {  
return "{now|" + (params.value + ((that.barObj.barIdName == 'barObjFactor' || that.barObj.barIdName == 'barObjDivisor1' || that.barObj.barIdName == 'barObjDivisor') ? '%' : '')) + "}";  
}  
  
},  
rich: {  
now: {  
color: this.barObj.normalColor  
},  
point: {  
color: this.barObj.specialColor  
},  
grren: {  
color: this.barObj.greenColor  
},  
},  
// offset: [-2, 0]  
}  
},  
  
itemStyle: {  
color: "transparent"  
},  
tooltip: {},  
data: this.barObj.barList  
}  
]  
};  
myChart.setOption(option);  
window.addEventListener("resize", myChart.resize);  
},

echarts双柱形图

// 参数
{
this.dateType = "month";  
this.barObjTwo = {  
dataTitle: "月累计上网电量",  
barName: "亿度",  
barIdName: "barObjMonthele1",  
xAxisText: ["大亚湾", "宁德", "红沿河", "阳江", "防城港"],  
barList: [260.45, 140.9, 120.74, 150.74, 76.66],  
barList1: [268.45, 148.9, 128.74, 158.74, 78.66],  
min: 0,  
max: 300,  
interval: 50,  
oneColor: "#EF7814",  
twoColor: "#45affd",  
legend: true,  
legendName: ["计划值", "实际值"]  
};
}


//画图表  
initEchart () {  
var echarts = require("echarts");  
var myChart = echarts.init(  
document.getElementById(this.barObj.barIdName)  
);  
// 绘制左侧面  
const wid = 20;  
const w1 = Math.sin(Math.PI / 3) * wid; //6 顶部平面形状凸起高度  
const w2 = Math.sin(Math.PI / 3) * wid; //3  
const snapHeight = wid / 1; //4  
const CubeLeft = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
// shape是从custom传入的  
const xAxisPoint = shape.xAxisPoint;  
const c0 = [shape.x, shape.y - 2];  
const c1 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
const c2 = [shape.x - w2, xAxisPoint[1] - w1 + snapHeight - 2];  
const c3 = [shape.x, xAxisPoint[1]];  
ctx  
.moveTo(c0[0], c0[1])  
.lineTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.closePath();  
}  
});  
// 绘制右侧面  
const CubeRight = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const xAxisPoint = shape.xAxisPoint;  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x, xAxisPoint[1] - 0];  
const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight - 2];  
const c4 = [shape.x + w1, shape.y - w2 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 绘制顶面  
const CubeTop = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x + w1, shape.y - w2 + snapHeight - 2]; //右点  
const c3 = [  
shape.x - w2 + w1,  
shape.y - w1 - w2 + +snapHeight * 2 - 2  
];  
const c4 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 注册三个面图形  
echarts.graphic.registerShape("CubeLeft", CubeLeft);  
echarts.graphic.registerShape("CubeRight", CubeRight);  
echarts.graphic.registerShape("CubeTop", CubeTop);
const oneColor = this.barObj.oneColor;  
const twoColor = this.barObj.twoColor;  
if (this.barObj.legend) {  
if (this.barObj.oneColor == "#EF7814") {  
this.iconImg = orangeImg  
} else if (this.barObj.oneColor == "#45affd") {  
this.iconImg = blueImg  
} else if (this.barObj.oneColor == "#29CB97" || this.barObj.oneColor == "#6EFADE") {  
this.iconImg = greenImg  
}  
if (this.barObj.twoColor == "#EF7814" || this.barObj.twoColor == "#ED6C00") {  
this.iconImg1 = orangeImg  
} else if (this.barObj.twoColor == "#45affd") {  
this.iconImg1 = blueImg  
} else if (this.barObj.twoColor == "#29CB97") {  
this.iconImg1 = greenImg  
}  
}  
var option = {  
legend: {  
show: this.barObj.legend,  
left: 50,  
orient: "horizontal",  
data: [  
{  
name: this.barObj.legendName[0],  
icon: "[image://" + this.iconImg]() + ""  
},  
{ name: this.barObj.legendName[1], icon: "[image://" + this.iconImg1]() + "" }  
],  
itemWidth: 30,  
itemHeight: 15  
// y:20  
},  
grid: {  
//图表的上下左右的距离  
x: 10,  
y: 40,  
x2: 10,  
y2: 40,  
padding: "0 0 0 0",  
containLabel: true  
},  
xAxis: {  
type: "category",  
data: this.barObj.xAxisText,  
splitLine: {  
show: false  
},  
axisTick: { show: false },  
axisLine: {  
show: true,  
lineStyle: {  
color: "#45AFFD"  
},  
textStyle: {  
color: "red"  
}  
},  
triggerEvent: true,  
axisLabel: {  
show: true,  
interval: 0,  
textStyle: {  
// fontSize: 8,  
color: "#666666",  
padding: [0, 0, 0, 30]  
}  
// rotate:25,//文字倾斜  
},  
boundaryGap: true  
},
yAxis: [  
{  
boundaryGap: true,  
type: "value",  
name: this.barObj.barName,  
id: 0,  
nameTextStyle: {  
padding: [0, 0, 0, -40]  
},  
nameGap: 20,  
min: this.barObj.min,  
max: this.barObj.max,  
interval: this.barObj.interval,  
splitLine: {  
show: true,  
lineStyle: {  
type: "dashed"  
}  
},  
gridTndex: 0,  
axisTick: { show: false },  
axisLine: { show: false },  
axisLabel: {  
show: true,  
textStyle: {  
color: "#666666"  
}  
}  
}  
],  
series: [  
// 柱状图1  
{  
//下面就是柱状图的每个柱的颜色设置  
name: this.barObj.legendName[0],  
type: "custom",  
renderItem: (params, api) => {  
const location = api.coord([api.value(0), api.value(1)]);  
location[0] = location[0] + wid * 0;  
const xlocation = api.coord([api.value(0), 0]);  
xlocation[0] = xlocation[0] * 0;  
return {  
type: "group",  
children: [  
{  
type: "CubeLeft",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: xlocation  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 2, 2, 2, [  
{  
offset: 0,  
color: oneColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeRight",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: xlocation  
},  
style: {  
fill: new echarts.graphic.LinearGradient(2, 2, 8, 0, [  
{  
offset: 0,  
color: oneColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},
{  
type: "CubeTop",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
{  
offset: 0,  
color: oneColor == '#EF7814' ? '#FFBD5D' : (oneColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
},  
{  
offset: 1,  
color: oneColor == '#EF7814' ? '#FFBD5D' : (oneColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
}  
])  
}  
}  
]  
};  
},  
data: this.barObj.barList  
},  
  
{  
name: this.barObj.legendName[0],  
type: "bar",  
label: {  
normal: {  
show: true,  
position: "top",  
// fontSize: 10,  
color: oneColor,  
offset: [40, 0]  
}  
},  
  
itemStyle: {  
color: "transparent"  
},  
tooltip: {},  
data: this.barObj.barList  
},  
// 柱状图2  
{  
name: this.barObj.legendName[1],  
type: "custom",  
renderItem: (params, api) => {  
const location = api.coord([api.value(0), api.value(1)]);  
location[0] = location[0] + wid * 2;  
const xlocation = api.coord([api.value(0), 0]);  
xlocation[0] = xlocation[0] + wid * 2;  
return {  
type: "group",  
children: [  
{  
type: "CubeLeft",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: xlocation  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 2, 2, 2, [  
{  
offset: 0,  
color: twoColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeRight",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: xlocation  
},  
style: {  
fill: new echarts.graphic.LinearGradient(2, 2, 2, 8, [  
{  
offset: 0,  
color: twoColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeTop",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: xlocation  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
{  
offset: 0,  
color: twoColor == '#EF7814' ? '#FFBD5D' : (twoColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
},  
{  
offset: 1,  
color: twoColor == '#EF7814' ? '#FFBD5D' : (twoColor == '#29CB97' ? '#6ff0c6' : '#a1d6fe')  
}  
])  
}  
}  
]  
};  
},  
data: this.barObj.barList1  
},
{  
name: this.barObj.legendName[1],  
type: "bar",  
label: {  
normal: {  
show: true,  
position: "top",  
// fontSize: 10,  
color: twoColor,  
offset: [-6, 0]  
}  
},  
  
itemStyle: {  
color: "transparent"  
},  
tooltip: {},  
data: this.barObj.barList1  
}  
]  
};  
myChart.setOption(option);  
window.addEventListener("resize", myChart.resize);  
},

echarts柱形图加折线图（双Y轴）

// 参数：
{
this.barObjSynthetical = {  
dateType: 'month',  
dataTitle: "机组WANO综合指数排名",  
barIdName: "barObjSynthetical",  
xAxisText: ["N1", "L4", "L3", "L2", "L1", "D2", "D1"],  
barList: [  
{ name: "N1", value: 100, type: "" },  
{ name: "L4", value: 96, type: "" },  
{ name: "L3", value: 96, type: "" },  
{ name: "L2", value: 88, type: "" },  
{ name: "L1", value: 88, type: "" },  
{ name: "D2", value: 88, type: "" },  
{ name: "D1", value: 85, type: "" }  
],  
lineList: [  
{ name: "N1", value: 80, type: "" },  
{ name: "L4", value: 24, type: "" },  
{ name: "L3", value: 36, type: "" },  
{ name: "L2", value: 62, type: "" },  
{ name: "L1", value: 83, type: "" },  
{ name: "D2", value: 92, type: "" },  
{ name: "D1", value: 52, type: "" }  
],  
min: 0,  
max: 100,  
interval: 20,  
barName: "分",  
normalColor: "#EF7814",  
lineColor: "#4072EE",  
legend: true,  
legendName: ["综合指数", "先进比例"],  
yAxisIndex: 1  
};
}


//画图表  
initEchart() {  
let that = this;  
const dataIndex = this.dataIndex;  
var echarts = require("echarts");  
var myChart = echarts.init(  
document.getElementById(this.barObj.barIdName)  
);  
// 绘制左侧面  
const wid = 20;  
const w1 = Math.sin(Math.PI / 3) * wid; //6 顶部平面形状凸起高度  
const w2 = Math.sin(Math.PI / 3) * wid; //3  
const snapHeight = wid/1; //1  
const CubeLeft = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
// shape是从custom传入的  
const xAxisPoint = shape.xAxisPoint;  
const c0 = [shape.x, shape.y - 2];  
const c1 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
const c2 = [shape.x - w2, xAxisPoint[1] - w1 + snapHeight - 2];  
const c3 = [shape.x, xAxisPoint[1]];  
ctx  
.moveTo(c0[0], c0[1])  
.lineTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.closePath();  
}  
});  
// 绘制右侧面  
const CubeRight = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const xAxisPoint = shape.xAxisPoint;  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x, xAxisPoint[1] - 0];  
const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight - 2];  
const c4 = [shape.x + w1, shape.y - w2 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 绘制顶面  
const CubeTop = echarts.graphic.extendShape({  
shape: {  
x: 0,  
y: 0  
},  
buildPath: function(ctx, shape) {  
const c1 = [shape.x, shape.y - 2];  
const c2 = [shape.x + w1, shape.y - w2 + snapHeight - 2]; //右点  
const c3 = [  
shape.x - w2 + w1,  
shape.y - w1 - w2 + +snapHeight * 2 - 2  
];  
const c4 = [shape.x - w2, shape.y - w1 + snapHeight - 2];  
ctx  
.moveTo(c1[0], c1[1])  
.lineTo(c2[0], c2[1])  
.lineTo(c3[0], c3[1])  
.lineTo(c4[0], c4[1])  
.closePath();  
}  
});  
// 注册三个面图形  
echarts.graphic.registerShape("CubeLeft", CubeLeft);  
echarts.graphic.registerShape("CubeRight", CubeRight);  
echarts.graphic.registerShape("CubeTop", CubeTop);
var option = {  
legend: {  
show: this.barObj.legend,  
left: 50,  
orient: "horizontal",  
data: [  
{  
name: this.barObj.legendName[0],  
icon: "[image://" + (this.barObj.normalColor]() == '#EF7814' ? orangeImg : blueImg) + ""  
},  
{ name: this.barObj.legendName[1] }  
],  
itemWidth: 30,  
itemHeight: 15  
// y:20  
},  
grid: {  
//图表的上下左右的距离  
x: 10,  
y: 40,  
x2: 10,  
y2: 40,  
padding: "0 0 0 0",  
containLabel: true  
},  
xAxis: {  
type: "category",  
data: this.barObj.xAxisText,  
splitLine: {  
show: false  
},  
axisTick: { show: false,alignWithLabel: true },  
axisLine: {  
show: true,  
lineStyle: {  
color: "#45AFFD"  
},  
textStyle: {  
color: "red"  
}  
},  
triggerEvent: true,  
axisLabel: {  
show: true,  
interval: 0,  
textStyle: {  
// fontSize: 8,  
color: "#666666"  
}  
// rotate:25,//文字倾斜  
},  
boundaryGap: [50, 50],  
scale: true  
},  
yAxis: [  
{  
boundaryGap:true,  
type: "value",  
name: this.barObj.barName,  
id: 0,  
nameTextStyle: {  
padding: [0, 0, 0, -30]  
},  
nameGap: 20,  
min: this.barObj.min,  
max: this.barObj.max,  
interval: this.barObj.interval,  
splitLine: {  
show: true,  
lineStyle: {  
type: "dashed"  
}  
},  
gridTndex: 0,  
axisTick: { show: false },  
axisLine: { show: false },  
axisLabel: {  
show: true,  
textStyle: {  
color: "#666666"  
}  
}  
},  
{  
type: "value",  
show: this.barObj.yAxisIndex == 1,  
name: "%",  
id: 1,  
nameTextStyle: {  
padding: [0, -20, 0, 0]  
},  
nameLocation: "end",  
min: 100,  
max: 0,  
interval: 20,  
axisLabel: {  
show: true,  
textStyle: {  
color: "#666666"  
}  
},  
axisLine: {  
show: false  
},  
splitLine: {  
show: false,  
lineStyle: {  
type: "dashed"  
}  
},  
axisTick: { show: false },  
axisLine: { show: false },  
inverse: false  
}  
],
series: [  
{  
//下面就是柱状图的每个柱的颜色设置  
name: this.barObj.legendName[0],  
type: "custom",  
renderItem: (params, api) => {  
const location = api.coord([api.value(0), api.value(1)]);  
let realColor = this.barObj.normalColor;  
if (dataIndex && params.dataIndex == dataIndex) {  
realColor = this.barObj.specialColor;  
}  
return {  
type: "group",  
children: [  
{  
type: "CubeLeft",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 2, 2, 2, [  
{  
offset: 0,  
color: realColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeRight",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(2, 2, 8, 0, [  
{  
offset: 0,  
color: realColor  
},  
{  
offset: 1,  
color: "rgba(255,255,255,0.8)"  
}  
])  
}  
},  
{  
type: "CubeTop",  
shape: {  
api,  
xValue: api.value(0),  
yValue: api.value(1),  
x: location[0],  
y: location[1],  
xAxisPoint: api.coord([api.value(0), 0])  
},  
style: {  
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
{  
offset: 0,  
color: realColor == '#EF7814' ? '#FFBD5D' : '#59DCFF',  
opacity: 0.5  
},  
{  
offset: 1,  
color: realColor == '#EF7814' ? '#FFBD5D' : '#59DCFF',  
opacity: 0.5  
}  
])  
}  
}  
]  
};  
},  
data: this.barObj.barList  
},  
{  
name: this.barObj.legendName[0],  
type: "bar",  
label: {  
normal: {  
show: true,  
position: "top",  
// fontSize: 10,  
color: "#45affd",  
formatter: function(params, index) {  
if (dataIndex && params.dataIndex == dataIndex) {  
return "{point|" + params.value + "}";  
} else {  
return "{now|" + params.value + "}";  
}  
},  
rich: {  
now: {  
color: this.barObj.normalColor  
},  
point: {  
color: this.barObj.specialColor  
}  
},  
// offset: [-2, 0]  
}  
},
itemStyle: {  
color: "transparent"  
},  
tooltip: {},  
data: this.barObj.barList  
},  
  
{  
name: this.barObj.legendName[1],  
type: "line",  
yAxisIndex: this.barObj.yAxisIndex,  
data: this.barObj.lineList,  
itemStyle: {  
color: this.barObj.lineColor  
},  
symbolSize: 8,  
symbol: "circle",  
tooltip: {  
show: true,  
position: "top"  
},  
label: {  
normal: {  
show: true,  
position: "bottom",  
// fontSize: 10,  
color: this.barObj.lineColor,  
formatter: function(params, index) {  
if (dataIndex && params.dataIndex == dataIndex) {  
  
return "{point|" + (params.value + (that.barObj.dataTitle == '11' ? '%' : '')) + "}";  
} else {  
return "{now|" + (params.value + (that.barObj.dataTitle == '11' ? '%' : ''))+ "}";  
}  
},  
rich: {  
now: {  
color: this.barObj.lineColor  
},  
point: {  
color: this.barObj.specialColor  
}  
},  
// offset: [-2, 0]  
}  
},  
}  
]  
};  
myChart.setOption(option);  
window.addEventListener("resize", myChart.resize);  
},