学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
1.echars立体柱状图制作
代码如下：
注：当要展示的柱子比较多时可以将series里的itemStyle color颜色提取出来写个数组感觉会更好
mychart() {
var myChart = echarts.init(document.getElementById('bprofitTotal3'));
var barWidth = 15;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '概算总额',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 1, color: 'rgba(11, 151, 232, 1)' }
]
} //盖子的颜色
}, {
name: '项目投资完成额',
icon: 'roundRect1',
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 1, color: 'rgba(184, 91, 225, 1)' }
]
} //盖子的颜色
}, '4'],
selectedMode: false,//取消图例上的点击事件
x: 'center',
bottom: '2%',
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 50,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
triggerEvent: true,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
// data: xAxisData,
data: ['新建', '技改', '科技', '信息化', '股权'],
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
z: 2,
name: '概算总额',
type: 'pictorialBar',
symbolPosition: 'end',
data: [410, 420, 520, 520, 610],
symbol: 'diamond',
symbolOffset: ['-70%', '-40%'], //盖子的位置
symbolSize: [15, 13], //盖子的大小
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(94, 232, 252, 1)' },
{ offset: 1, color: 'rgba(30, 169, 237, 1)' }
]
} //盖子的颜色
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '概算总额',
barWidth: barWidth,
barGap: '50%',
data: [410, 420, 520, 520, 610],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(5, 75, 170, 1)' },
{ offset: 0.5, color: 'rgba(11, 151, 232, 1)' },
{ offset: 0.5, color: 'rgba(10, 57, 123, 1)' },
{ offset: 1, color: 'rgba(117, 77, 253, 1)' }
]
}
}
},
{
z: 2,
name: '项目投资完成额',
type: 'pictorialBar',
symbolPosition: 'end',
data: [310, 120, 420, 220, 510],
symbol: 'diamond',
symbolSize: [15, 13], //盖子的大小
symbolOffset: ['70%', '-40%'],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(220, 149, 251, 1)' },
{ offset: 1, color: 'rgba(119, 62, 247, 1)' }
]
}
},
tooltip: {
show: false
}
},
{
z: 1,
type: 'bar',
name: '项目投资完成额',
barWidth: barWidth,
// barGap: '-50%',
data: [310, 120, 420, 220, 510],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(90, 45, 192, 1)' },
{ offset: 0.5, color: 'rgba(184, 91, 225, 1)' },
{ offset: 0.5, color: 'rgba(50, 13, 133, 1)' },
{ offset: 1, color: 'rgba(90, 45, 192, 1)' }
]
}
}
},
]
};
myChart.setOption(option);
},2.echars横柱状图制作
代码如下：
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal6'));
let echartData = [{
name: "二级公司A",
value: 25,
},
{
name: "二级公司B",
value: 14,
},
{
name: "二级公司C",
value: 31,
},
{
name: "二级公司D",
value: 38,
},
{
name: "二级公司E",
value: 48,
},
];
let echartData1 = data;
echartData.sort((a, b) => a.value - b.value);
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
grid: {
left: '20%',
top: '10%',
right: '20%',
bottom: '10%'
},
xAxis: {
show: false,
type: 'value',
},
yAxis: [{
type: 'category',
data: xAxisData,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: "45"//文字旋转角度
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
}, {
type: 'category',
// inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
data: yAxisData,
axisLabel: {
show: true,
fontSize: 24,
color: '#FFFFFF',
fontFamily: 'DS-Digital',
fontWeight: 'bold',
padding: [0, 0, 0, 10],
formatter: '{value}'
}
}],
series: [
{
name: '项目数量',
barMaxWidth: 10,
itemStyle: {
normal: {
borderRadius: 5,
label: {
show: false,
// position: 'top',
position: 'right',
color: '#ffffff'
},
barBorderRadius: 15,
color: function (params) {//渐变色
var colorList = [
['rgba(64, 72, 239, 1)', 'rgba(112, 196, 239, 1)'],
['rgba(45, 201, 235, 1)', 'rgba(20, 210, 184, 1)'],
['rgba(8, 186, 199, 1)', 'rgba(183, 253, 67, 1)'],
['rgba(254, 142, 7, 1)', 'rgba(255, 236, 116, 1)'],
['rgba(255, 130, 152, 1)', 'rgba(255, 160, 115, 1)'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(5, 59, 109, 1)'
},
data: yAxisData,
type: 'bar'
},
]
};
myChart.clear();
myChart.setOption(option);
},3.echars横柱状图制作
代码如下：
注：这里主要使用了symbol实现具体效果
mychart() {
var myChart = echarts.init(document.getElementById('profitTota4'));
var bg = "../images/symbol-nbar.png";
var bar = "../images/symbol-wbar.png";
let echartData = [
{
name: "新建",
value: 254,
},
{
name: "技改",
value: 154,
},
{
name: "科技",
value: 234,
},
{
name: "信息化",
value: 154,
},
{
name: "股权",
value: 324,
},
]
let nameData = echartData.map(v => v.name);
let data = echartData.map(v => v.value);
var barWidth = 15;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
option = {
grid: {
top: '10%',
left: '15%',
right: '10%',
bottom: '8%',
},
xAxis: {
show: false,
},
yAxis: {
data: nameData,
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: '15', color: '#fff',fontWeight:'400' },
},
axisLine: {
show: false,
},
axisTick: false,
},
series: [
{
type: 'pictorialBar',
barWidth: barWidth,
zlevel: 2,
symbol:'image://' + bar,
data: data,
},
{
type: 'pictorialBar',
barWidth: barWidth,
symbol: 'image://' + bg,
data: data.map(function (item) {
return {
realValue: item,
value: maxNum + 100,
};
}),
label: {
show: true,
position: 'right',
distance: 60,
align: "right",
formatter: function (params) {
return params.data.realValue;
},
color: '#FFD52D',
fontSize: 24,
fontFamily: 'DS-Digital',
fontWeight: 'bold',
},
},
],
};
myChart.clear();
myChart.setOption(option);
},
4.echars横柱里边带小方格图形制作
代码如下：
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal2'));
let colors = [{
one: "rgba(0, 135, 255, 1)",
two: "rgba(17, 60, 127, 1)",
}, {
one: "#9336FF",
two: "#146AFF",
}, {
one: "#082757",
two: "#02B093",
}];
let echartData = [{
name: "火电",
value: 64,
},
{
name: "水电",
value: 14,
},
{
name: "风电",
value: 99,
},
{
name: "光伏",
value: 38,
},
{
name: "煤炭",
value: 48,
},
{
name: "化工",
value: 56,
},
{
name: "运输",
value: 16,
},
{
name: "其他",
value: 21,
}
];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
grid: {
left: '15%',
top: '10%',
right: '15%',
bottom: '10%',
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// crossStyle: {
// color: '#999'
// }
// },
// formatter: function (params) {
// // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
// let firstParams = params[0];
// let sndParams = params[1];
// return firstParams.marker + firstParams.name + ' ' + firstParams.data + ' %';
// },
// },
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: xAxisData,
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
fontFamily: 'DS-Digital',
fontWeight: 'bold',
color: '#0087FF',
fontSize: '18'
},
formatter: function (value) {
return value + '';
},
},
data: echartData
}],
series: [
{
name: '超概项目预警',
type: 'bar', //设置类型为象形柱状图
barWidth: '12', //柱图宽度
barGap: '-100%',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
['rgba(0, 135, 255, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(34, 232, 150, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(188, 240, 206, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(255, 214, 82, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(255, 122, 83, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(237, 57, 97, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(179, 105, 255, 1)', 'rgba(17, 60, 127, 1)'],
['rgba(147, 197, 255, 1)', 'rgba(17, 60, 127, 1)']
]
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: colorList[index][0] // 0% 处的颜色
},
{
offset: 1,
color: colorList[index][1] // 100% 处的颜色
}
]
}
},
label: {
// show: true,
// position: 'right',
// color: "#FFFFFF",
// formatter: function (params) {//设置柱状图上文本的颜色不同
// // console.log(params.dataIndex)
// if (params.dataIndex % 2 == 0) {
// return '{a|' + yAxisData[params.dataIndex] + '}'
// } else {
// return '{b|' + yAxisData[params.dataIndex] + '}'
// }
// },
// rich: {
// a: {
// color: "#0EFCFF"
// },
// b: {
// color: "#6947FF"
// },
// }
}
},
},
z: 10,
zlevel: 0,
barGap: '-100%',
data: yAxisData,
},
{
type: 'pictorialBar', //设置类型为象形柱状图
barWidth: 12,
symbol: 'rect', //图形类型，带圆角的矩形
symbolMargin: '3', //图形垂直间隔
symbolRepeat: true, //图形是否重复
symbolRepeat: 'fixed',
symbolClip: true,
symbolSize: [2, 14],
itemStyle: {// 分隔
normal: {
color: '#0F375F'
}
},
width: "100%",
z: 0,
zlevel: 1,
data: yAxisData,
},
]
};
myChart.setOption(option);
},
感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
