话不多说,直接贴代码 ==>> Echarts 3D柱形图 横向
<div id="CScharts6" style="width:100%;height:100%;"></div>
这是方法
getCharts() {
// console.log(target_pct, act_pct)
var myChart = echarts.init(document.getElementById('CScharts6'));
let manNumber = [32, 20, 18, 33];
let womanNumber = [12, 32, 14, 26];
let xData = ['设备1', '设备2', '设备3', '设备4'];
let barWidth = 18;
let manColors = [];
let womanColors = [];
for (let i = 0; i < 10; i++) {
manColors.push({
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6FCAF9', // 最左边
},
{
offset: 0.5,
color: '#69B5F4', // 左边的右边 颜色
},
{
offset: 0.5,
color: '#4D7DB5', // 右边的左边 颜色
},
{
offset: 1,
color: '#6AB8F9',
},
],
});
womanColors.push({
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6CE6C5', // 最左边
},
{
offset: 0.5,
color: '#6EE7C6', // 左边的右边 颜色
},
{
offset: 0.5,
color: '#5AC1A7', // 右边的左边 颜色
},
{
offset: 1,
color: '#61CDB1',
},
],
});
}
let option = {
// backgroundColor: '#010d3a',
//提示框
tooltip: {
trigger: 'axis',
confine:true,
formatter: function (e) {
// console.log(e);
var str =
e[0].axisValue +
"<br>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
e[0].color.colorStops[0].color +
";'></span>" +
"" +
e[0].seriesName +
" : " +
e[0].value +
"(%)<br>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
e[3].color.colorStops[0].color +
";'></span>" +
"" +
e[3].seriesName +
" : " +
e[3].value +
"(%)";
return str;
},
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
// 图例
legend: {
//legend自己调位置,不想展示就设置show:false
show: true,
itemGap: 20,
top: 20,
right: '10%',
// itemWidth: 14,
itemHeight: 14,
selectedMode: false,
data: [
{
name: '计划完成量',
icon: 'roundRect',
itemStyle: {
color: '#02E4FF',
},
},
{
name: '实际完成量',
icon: 'roundRect',
itemStyle: {
color: '#02E4FF',
},
},
],
textStyle: {
color: '#fff',
},
},
/**区域位置*/
grid: {
left: '14%',
right: '10%',
top: '0',
bottom: '16%',
},
//X轴
yAxis: {
data: xData,
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: "#D1D2D5",
},
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(135,140,147,1)", //左侧显示线
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
// formatter: "{value}%",
textStyle: {
color: "#A5A5A6",
fontSize: 12,
},
},
},
xAxis: {
show: true,
splitNumber: 4,
axisLine: {
show: true,
lineStyle: {
color: "#D1D2D5",
},
},
axisTick: {
show: false,
},
splitLine: {
show:false
},
axisLabel: {
show:true,
formatter: "{value}%",
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
color: "#A7A7A8", // x轴颜色
fontWeight: "normal",
fontSize: "12",
lineHeight: 22,
},
interval: 0, //标签设置为全部显示
margin: 15,
lineHeight: 15,
}
},
series: [
{
name: '计划完成量',
type: 'bar',
barWidth: barWidth,
itemStyle: {
normal: {
color: function (params) {
return manColors[params.dataIndex % 7];
},
},
},
data: manNumber,
},
{
z: 2,
type: 'pictorialBar',
data: manNumber,
symbol: 'diamond',
symbolOffset: ['-50%', '-60%'],
symbolSize: [barWidth * 0.5, barWidth],
itemStyle: {
normal: {
color: function (params) {
return manColors[params.dataIndex % 7];
},
},
},
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'end',
data: manNumber,
symbol: 'diamond',
symbolOffset: ['50%', '-60%'],
symbolSize: [barWidth * 0.5, barWidth],
itemStyle: {
normal: {
borderWidth: 0,
color: '#72E0FB',
},
},
},
// ---------------------分割线---------------------
{
name: '实际完成量',
type: 'bar',
barWidth: barWidth,
itemStyle: {
normal: {
color: function (params) {
return womanColors[params.dataIndex % 7];
},
},
},
data: womanNumber,
},
{
z: 2,
type: 'pictorialBar',
data: womanNumber,
symbol: 'diamond',
symbolOffset: ['-50%', '60%'],
symbolSize: [barWidth * 0.5, barWidth],
itemStyle: {
normal: {
color: function (params) {
return womanColors[params.dataIndex % 7];
},
},
},
},
{
z: 3,
type: 'pictorialBar',
symbolPosition: 'end',
data: womanNumber,
symbol: 'diamond',
symbolOffset: ['50%', '60%'],
symbolSize: [barWidth * 0.5, barWidth],
itemStyle: {
normal: {
borderWidth: 0,
color: "#8CF4DD",
},
},
},
],
};
},