单柱状图
chart3() {
let chart = this.$echarts.init(document.getElementById("block2-chart3"));
const offsetX = 10;
const offsetY = 6;
const primaryColor = "41, 190, 255"
const isMaxShow = true;
// 绘制左侧面
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
// console.log(shape);
const c0 = [shape.x, shape.y];
const c1 = [shape.x - offsetX, shape.y - offsetY];
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
const c3 = [xAxisPoint[0], 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 = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
const c4 = [shape.x + offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 绘制顶面
const CubeTop = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
const c3 = [shape.x, shape.y - offsetX];
const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 注册三个面图形
this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
this.$echarts.graphic.registerShape('CubeRight', CubeRight);
this.$echarts.graphic.registerShape('CubeTop', CubeTop);
const MAX = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
const VALUE = [100, 200, 300, 400, 300, 200, 100, 300, 400, 300, 200, 100];
var option = {
grid: {
containLabel: true,
left: 5,
right: 5,
bottom: 10,
top: '30%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// dataZoom: [
// {
// type: 'inside',
// startValue: 0,
// endValue: 6
// },
// {
// startValue: 0,
// endValue: 6,
// height: 7,
// bottom: 0,
// showDetail: false
// }
// ],
legend: {
data: ['金额', '占比'],
textStyle: {
color: '#939AC4',
fontSize: 11,
},
itemWidth: 10,
itemHeight: 10,
icon: "circle",
left: 10,
top: 10,
},
xAxis: [
{
type: 'category',
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
},
},
axisLabel: {
show: true,
fontSize: 11,
color: 'rgba(123, 129, 166, 1)'
},
}
],
yAxis: [
{
name: '单位:万人',
nameTextStyle: {
fontSize: '10',
color: 'rgba(123, 129, 166, 1)'
},
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
},
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
fontSize: 11,
color: 'rgba(123, 129, 166, 1)'
},
// axisLine: {
// show: false,
// },
}
],
series: [
{
// 最大高度
type: 'custom',
tooltip: {
show: false
},
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .1)`
}
}, {
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .3)`
}
}, {
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .4)`
}
}]
}
},
data: MAX
},
{
// 实际高度
type: 'custom',
// name: '金额',
itemStyle: {
color: 'rgba(41, 190, 255, 1)'
},
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
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: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
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: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
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: `rgba(${primaryColor},1)`
},
},
],
};
},
data: VALUE,
},
]
};
chart.setOption(option);
window.addEventListener("resize", function () {
chart.resize();
});
}
双柱状图+折线
chart1() {
let chart = this.$echarts.init(document.getElementById("block4-chart1"));
const offsetX = 10;
const offsetY = 6;
const primaryColor = "0, 108, 255"
const primaryColor2 = "251, 101, 48"
const isMaxShow = true;
// 绘制左侧面
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
// console.log(shape);
const c0 = [shape.x, shape.y];
const c1 = [shape.x - offsetX, shape.y - offsetY];
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
const c3 = [xAxisPoint[0], 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 = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
const c4 = [shape.x + offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 绘制顶面
const CubeTop = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
const c3 = [shape.x, shape.y - offsetX];
const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 注册三个面图形
this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
this.$echarts.graphic.registerShape('CubeRight', CubeRight);
this.$echarts.graphic.registerShape('CubeTop', CubeTop);
const MAX = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
const VALUE = [100, 200, 300, 400, 300, 200, 100,300, 400, 300, 200, 100];
var option = {
grid: {
containLabel: true,
left: 5,
right: 5,
bottom: 10,
top: '30%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// dataZoom: [
// {
// type: 'inside',
// startValue: 0,
// endValue: 6
// },
// {
// startValue: 0,
// endValue: 6,
// height: 7,
// bottom: 0,
// showDetail: false
// }
// ],
legend: {
data: ['办理套餐量', '退订量', '退订率'],
textStyle: {
color: '#939AC4',
fontSize: 11,
},
itemWidth: 10,
itemHeight: 10,
icon: "circle",
left: 10,
top: 10,
},
xAxis: [
{
type: 'category',
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
},
},
axisLabel: {
show: true,
fontSize: 11,
color: 'rgba(123, 129, 166, 1)'
},
}
],
yAxis: [
{
name: '单位:万元',
nameTextStyle: {
fontSize: '10',
color: 'rgba(123, 129, 166, 1)'
},
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
},
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
fontSize: 11,
color: 'rgba(123, 129, 166, 1)'
},
// axisLine: {
// show: false,
// },
},
{
name: '%:单位',
nameTextStyle: {
fontSize: '10',
color: 'rgba(123, 129, 166, 1)'
},
type: 'value',
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value}%",
fontSize: 11,
color: 'rgba(123, 129, 166, 1)'
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,.1)",
},
},
axisLine: {
show: false,
},
}
],
series: [
{
// 最大高度
type: 'custom',
tooltip: {
show: false
},
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: -10,
children: [
{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .1)`
}
}, {
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .3)`
}
}, {
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, .4)`
}
}]
}
},
data: MAX
},
{
// 最大高度
type: 'custom',
itemStyle: {
color: 'rgba(0, 108, 255, 1)'
},
name: '办理套餐量',
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: -10,
children: [
{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}
}, {
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}
}, {
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor}, 1)`
}
}]
}
},
data: VALUE
},
{
// 最大高度
type: 'custom',
tooltip: {
show: false
},
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: 12,
children: [
{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor2}, .1)`
}
}, {
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor2}, .3)`
}
}, {
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: `rgba(${primaryColor2}, .4)`
}
}]
}
},
data: MAX
},
{
// 实际高度
type: 'custom',
name: '退订量',
// tooltip: {
// show: false
// },
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
x: 12,
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: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor2}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor2}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
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: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${primaryColor2}, 1)`, // 0% 处的颜色
},
{
offset: 1,
color: `rgba(${primaryColor2}, 0.2)`, // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
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: `rgba(${primaryColor2},1)`
},
},
],
};
},
data: VALUE,
},
{
name: '退订率',
yAxisIndex: 1,
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 10,
lineStyle: {
normal: {
color: 'rgba(37, 241, 181, 1)',
type: 'dashed'
},
},
itemStyle: {
color: "rgba(37, 241, 181, 1)",
borderColor: "#fff",
borderWidth: 3,
},
data: VALUE
},
]
};
chart.setOption(option);
window.addEventListener("resize", function () {
chart.resize();
});
},