parent
3eb9b174c6
commit
a7c062c4c3
@ -0,0 +1,316 @@
|
|||||||
|
<template>
|
||||||
|
<div id="main"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
// 定义柱状图左侧图形元素
|
||||||
|
const leftRect = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 15, //柱状图宽
|
||||||
|
zWidth: 8, //阴影折角宽
|
||||||
|
zHeight: 4, //阴影折角高
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const api = shape.api;
|
||||||
|
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||||
|
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||||
|
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||||
|
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||||
|
|
||||||
|
ctx.moveTo(p0[0], p0[1]);
|
||||||
|
ctx.lineTo(p1[0], p1[1]);
|
||||||
|
ctx.lineTo(p2[0], p2[1]);
|
||||||
|
ctx.lineTo(p3[0], p3[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p0[0], p0[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 定义柱状图右侧以及顶部图形元素
|
||||||
|
const rightRect = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 14,
|
||||||
|
zWidth: 10,
|
||||||
|
zHeight: 8,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const api = shape.api;
|
||||||
|
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||||
|
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
|
||||||
|
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||||
|
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||||
|
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
|
||||||
|
const p6 = [
|
||||||
|
shape.x + shape.width / 2 + shape.zWidth,
|
||||||
|
shape.y - shape.zHeight / 2,
|
||||||
|
];
|
||||||
|
const p7 = [
|
||||||
|
shape.x - shape.width / 2 + shape.zWidth,
|
||||||
|
shape.y - shape.zHeight,
|
||||||
|
];
|
||||||
|
ctx.moveTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p3[0], p3[1]);
|
||||||
|
ctx.lineTo(p5[0], p5[1]);
|
||||||
|
ctx.lineTo(p6[0], p6[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
|
||||||
|
ctx.moveTo(p4[0], p4[1]);
|
||||||
|
ctx.lineTo(p6[0], p6[1]);
|
||||||
|
ctx.lineTo(p7[0], p7[1]);
|
||||||
|
ctx.lineTo(p1[0], p1[1]);
|
||||||
|
ctx.lineTo(p4[0], p4[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 注册图形元素
|
||||||
|
echarts.graphic.registerShape("leftRect", leftRect);
|
||||||
|
echarts.graphic.registerShape("rightRect", rightRect);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Histogram",
|
||||||
|
props: {
|
||||||
|
getDataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
labels: ["骨科", "心胸外科", "普通外科", "神经外科", "整形外科"],
|
||||||
|
seriesData: [
|
||||||
|
{
|
||||||
|
label: "骨科",
|
||||||
|
value: [32],
|
||||||
|
isHave:false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "心胸外科",
|
||||||
|
value: [24],
|
||||||
|
isHave:false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "普通外科",
|
||||||
|
value: [42],
|
||||||
|
isHave:false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "神经外科",
|
||||||
|
value: [20],
|
||||||
|
isHave:false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "整形外科",
|
||||||
|
value: [18],
|
||||||
|
isHave:false
|
||||||
|
},
|
||||||
|
],
|
||||||
|
colors: [
|
||||||
|
[
|
||||||
|
{ offset: 0, color: "rgba(26, 132, 191, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(52, 163, 224, 0.5)" },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ offset: 0, color: "rgba(137, 163, 164, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(137, 163, 164, 0.5)" },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ offset: 0, color: "rgba(44, 166, 166, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(44, 166, 166, 0.5)" },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ offset: 0, color: "rgba(34, 66, 186, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(34, 66, 186, 0.5)" },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ offset: 0, color: "rgba(250,200,88, 1)" },
|
||||||
|
{ offset: 1, color: "rgba(250,200,88, 0.6)" },
|
||||||
|
],
|
||||||
|
],
|
||||||
|
option: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 包装接口数据
|
||||||
|
this.wrapData(this.getDataList);
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
height: "80%",
|
||||||
|
top: "8%",
|
||||||
|
// bottom: "5%",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
data: this.labels,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: -20, // 表示倾斜的角度
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// data: this.getlegendData(),
|
||||||
|
// right: "25",
|
||||||
|
// top: "18",
|
||||||
|
// icon: "rect",
|
||||||
|
// itemHeight: 10,
|
||||||
|
// itemWidth: 10,
|
||||||
|
// textStyle: {
|
||||||
|
// color: "red",
|
||||||
|
// },
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: ["#fff"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: this.getSeriesData(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getlegendData() {
|
||||||
|
let that = this;
|
||||||
|
const data = [];
|
||||||
|
this.labels.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
name: item,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
that.colors[index]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
getSeriesData() {
|
||||||
|
let that = this;
|
||||||
|
const data = [];
|
||||||
|
this.seriesData.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
type: "custom",
|
||||||
|
name: item.label,
|
||||||
|
renderItem: function (params, api) {
|
||||||
|
return that.getRenderItem(params, api);
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true, // 显示数值
|
||||||
|
position: "insideTop", // 数值显示的位置
|
||||||
|
textStyle: {
|
||||||
|
//数值样式
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
formatter: function (data) {
|
||||||
|
let txt = '';
|
||||||
|
that.seriesData.forEach(a =>{
|
||||||
|
if (a.label == data.seriesName && !a.isHave) {
|
||||||
|
a.isHave = true;
|
||||||
|
txt = data.value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return txt;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: item.value,
|
||||||
|
itemStyle: {
|
||||||
|
color: () => {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
that.colors[index]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
console.log("data总:", data);
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
getRenderItem(params, api) {
|
||||||
|
const index = params.seriesIndex;
|
||||||
|
let location = api.coord([api.value(0) + index, api.value(1)]);
|
||||||
|
// var extent = api.size([0, api.value(1)]);
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "leftRect",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
},
|
||||||
|
style: api.style(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "rightRect",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0) + index,
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
},
|
||||||
|
style: api.style(),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
wrapData(list) {
|
||||||
|
let that = this;
|
||||||
|
that.labels = [];
|
||||||
|
that.seriesData = [];
|
||||||
|
list.forEach((item) => {
|
||||||
|
that.labels.push(item.deptName);
|
||||||
|
that.seriesData.push({
|
||||||
|
label: item.deptName,
|
||||||
|
value: [item.deptCount],
|
||||||
|
isHave:false
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
var chartDom = document.getElementById("main");
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
this.option && myChart.setOption(this.option);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue