实现效果:
实现代码:
<template>
<div class="Consumption">
<div style="width: 350px; height: 180px" ref="ConsumptionChart" />
</div>
</template>
<script>
import echarts from 'echarts'
const myShape = {
x: 0,
y: 0,
width: 10 //间距
}
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
shape: myShape,
buildPath: function(ctx, shape) {
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x + 14, shape.y - 10]
const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1