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