1.效果图
2.echarts.graphic.extendShape
echarts.graphic.extendShape
是ECharts中用于扩展自定义图形形状的方法。通过调用echarts.graphic.extendShape
方法,您可以定义并创建新的自定义图形形状,以满足特定的数据可视化需求。
-
参数:
- 传入一个对象作为参数,对象包含了自定义图形形状的属性和方法。
- 在对象中,通常包含
shape
属性用于定义图形的形状属性,以及buildPath
方法用于定义绘制图形路径的逻辑。
-
使用方法:
- 在调用
echarts.graphic.extendShape
时,传入一个对象,对象中包含了自定义图形形状的属性和方法。 - 在定义自定义图形形状时,通常需要指定图形的形状属性(如坐标、大小等)和绘制路径的逻辑。
- 在调用
3.代码
<template>
<div class="main">
<div ref="echarts1" id="echarts1"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
inheritAttrs: false,
mounted() {
let x = [0,1,2,3]
let y= [100,200,300,200]
this.getEcharts(x,y);
},
methods: {
getEcharts(xData, yData) {
let line = this.$refs.echarts1;
let echarts = this.$echarts.init(line);
let fontSize = (window.innerHeight / 1080) * 100 * 0.12;
// 绘制左侧面
const wid = 15;
const w1 = Math.sin(Math.PI / 6) * wid; //4
const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
const snapHeight = wid / 2;
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - w2, shape.y];
const c2 = [shape.x - w2, xAxisPoint[1]];
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 = 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 = [shape.x, xAxisPoint[1]];
const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight];
const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
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 + w1, shape.y - w2 + snapHeight]; //右点
const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
const c4 = [shape.x - w2, shape.y];
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);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
color: "#CFE3FC",
},
borderWidth: 1,
},
grid: {
top: "10%",
left: "5%",
bottom: "5%",
right: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: xData,
axisLine: {
show: true,
lineStyle: {
color: "#3e6f8e",
width: 1,
},
},
axisTick: {
show: false,
length: 9,
alignWithLabel: false,
lineStyle: {
color: "#AAA",
},
},
axisLabel: {
fontSize: fontSize,
margin: 10,
color: "white",
},
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
opacity: 0.2,
width: 1,
},
},
},
yAxis: {
type: "value",
nameTextStyle: {
color: "white",
fontSize: fontSize,
},
axisLine: {
show: true,
lineStyle: {
color: "#3e6f8e",
width: 1,
},
},
axiosTick: {
show: false,
},
axisLabel: {
color: "white",
fontSize: fontSize,
margin: 10,
},
splitLine: {
show: true,
lineStyle: {
color: "#ffffff",
opacity: 0.2,
width: 1,
},
},
nameGap: 20,
},
series: [
{
type: "bar",
tooltip: {
show: false,
},
itemStyle: {
color: "transparent",
},
data: yData,
},
{
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] + wid * 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 this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#059de6",
},
{
offset: 1,
color: "#059de6",
},
]),
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: xlocation,
},
style: {
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#254193",
},
{
offset: 1,
color: "#254193",
},
]),
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: xlocation,
},
style: {
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#17e0fe",
},
{
offset: 1,
color: "#17e0fe",
},
]),
},
},
],
};
},
color: "blue",
data: yData,
},
],
};
echarts.setOption(option);
window.addEventListener("resize", function () {
echarts.resize();
});
},
},
};
</script>
<style lang="less">
#echarts1 {
width: 100%;
height: 21vh;
}
.main{
width: 100%;
height: 100%;
}
</style>