Skip to content

V
vue-composition-api
Commit b910a8b3 by 唐玉峰
Options

疾病分组

parent e570dbf8
Showing with 91 additions and 91 deletions
src/utils/echarts.js
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 + `%`, {
x: 'center', text: data + `%`,
top: '38%', x: "center",
textStyle: { top: "38%",
fontSize: '16', //百分比的样式 textStyle: {
color: tcolor, fontSize: "16", //百分比的样式
fontFamily: 'Arial', color: tcolor,
foontWeight: '600', fontFamily: "Arial",
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: "",
roundCap: true, type: "bar",
barWidth: 6, roundCap: true,
showBackground: true, barWidth: 6,
backgroundStyle: { showBackground: true,
color: '#f3fafd', //留白颜色 backgroundStyle: {
}, color: "#f3fafd", //留白颜色
data: [data], },
coordinateSystem: 'polar', data: [data],
coordinateSystem: "polar",
itemStyle: {
normal: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ normal: {
offset: 0, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
color: tcolor, //填色颜色 {
},]), offset: 0,
color: tcolor, //填色颜色
},
]),
},
}, },
}, },
},], ],
}; };
return option; return option;
...@@ -92,63 +88,68 @@ export function categoryChart(data, tcolor) { ...@@ -92,63 +88,68 @@ 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, {
x: 'center', text: text,
top: '52%', x: "center",
textStyle: { top: "52%",
fontSize: '14', //百分比的样式 textStyle: {
color: tcolor, fontSize: "14", //百分比的样式
fontFamily: 'PingFang SC', color: tcolor,
foontWeight: '300', fontFamily: "PingFang SC",
foontWeight: "300",
},
}, },
}, {
{ text: data ? data : 0 + `%`,
text: data + `%`, 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: "",
roundCap: true, type: "bar",
barWidth: 6, roundCap: true,
showBackground: true, barWidth: 6,
backgroundStyle: { showBackground: true,
color: '#f3fafd', //留白颜色 backgroundStyle: {
}, color: "#f3fafd", //留白颜色
data: [data], },
coordinateSystem: 'polar', data: [data],
coordinateSystem: "polar",
itemStyle: {
normal: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ normal: {
offset: 0, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
color: tcolor, //填色颜色 {
},]), offset: 0,
color: tcolor, //填色颜色
},
]),
},
}, },
}, },
},], ],
}; };
return option; return option;
} }
\ No newline at end of file
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