Commit b910a8b3 by 唐玉峰

疾病分组

parent e570dbf8
import { nextTick } from '@vue/composition-api'; import { nextTick } from "@vue/composition-api";
import * as echarts from 'echarts'; import * as echarts from "echarts";
/** /**
* @param echarts初始化 * @param echarts初始化
...@@ -11,79 +9,77 @@ import * as echarts from 'echarts'; ...@@ -11,79 +9,77 @@ import * as echarts from 'echarts';
export function initEcharts(option, panelId) { export function initEcharts(option, panelId) {
var svChart; var svChart;
return nextTick(() => { return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId)); svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) { if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId)); svChart = echarts.init(document.getElementById(panelId));
} }
document.getElementById(panelId).setAttribute('_echarts_instance_', ''); document.getElementById(panelId).setAttribute("_echarts_instance_", "");
svChart.clear(); svChart.clear();
svChart.setOption(option); svChart.setOption(option);
svChart.resize(); svChart.resize();
// 屏幕大小改变 // 屏幕大小改变
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
svChart.resize(); svChart.resize();
}); });
return svChart; return svChart;
}) });
} }
//百分比图 智能分组 //百分比图 智能分组
export function categoryChart(data, tcolor) { export function categoryChart(data, tcolor) {
const option = { const option = {
title: [{ title: [
{
text: data + `%`, text: data + `%`,
x: 'center', x: "center",
top: '38%', top: "38%",
textStyle: { textStyle: {
fontSize: '16', //百分比的样式 fontSize: "16", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'Arial', fontFamily: "Arial",
foontWeight: '600', foontWeight: "600",
},
}, },
},], ],
polar: { polar: {
radius: ['100%', '60%'], radius: ["100%", "60%"],
center: ['50%', '50%'], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: 100,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
type: 'category', type: "category",
show: false, show: false,
}, },
series: [{ series: [
name: '', {
type: 'bar', name: "",
type: "bar",
roundCap: true, roundCap: true,
barWidth: 6, barWidth: 6,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: '#f3fafd', //留白颜色 color: "#f3fafd", //留白颜色
}, },
data: [data], data: [data],
coordinateSystem: 'polar', coordinateSystem: "polar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
},]), },
]),
}, },
}, },
},], },
],
}; };
return option; return option;
...@@ -92,62 +88,67 @@ export function categoryChart(data, tcolor) { ...@@ -92,62 +88,67 @@ export function categoryChart(data, tcolor) {
//百分比图 病案入组 //百分比图 病案入组
export function categoryChart11(text, data, tcolor) { export function categoryChart11(text, data, tcolor) {
const option = { const option = {
title: [{ title: [
{
text: text, text: text,
x: 'center', x: "center",
top: '52%', top: "52%",
textStyle: { textStyle: {
fontSize: '14', //百分比的样式 fontSize: "14", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'PingFang SC', fontFamily: "PingFang SC",
foontWeight: '300', foontWeight: "300",
}, },
}, },
{ {
text: data + `%`, text: data ? data : 0 + `%`,
x: 'center', x: "center",
top: '28%', top: "28%",
textStyle: { textStyle: {
fontSize: '20', //百分比的样式 fontSize: "20", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'Arial', fontFamily: "Arial",
foontWeight: '600', foontWeight: "600",
}, },
}, },
], ],
polar: { polar: {
radius: ['100%', '60%'], radius: ["100%", "60%"],
center: ['50%', '50%'], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: 100,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
type: 'category', type: "category",
show: false, show: false,
}, },
series: [{ series: [
name: '', {
type: 'bar', name: "",
type: "bar",
roundCap: true, roundCap: true,
barWidth: 6, barWidth: 6,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: '#f3fafd', //留白颜色 color: "#f3fafd", //留白颜色
}, },
data: [data], data: [data],
coordinateSystem: 'polar', coordinateSystem: "polar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
},]),
}, },
]),
}, },
},], },
},
],
}; };
return option; return option;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment