diff --git a/src/view/dialog/echarts/jypxs.vue b/src/view/dialog/echarts/jypxs.vue index 1056379..199d9f1 100644 --- a/src/view/dialog/echarts/jypxs.vue +++ b/src/view/dialog/echarts/jypxs.vue @@ -19,6 +19,7 @@ const data = reactive({ "rgba(82, 174, 255, 1)", ], }); +const colorList = ['#ffd813', '#08daaa', '#6571fc','red']; let datas = [ { name: "高血压", @@ -50,23 +51,9 @@ const getOption = () => { fontSize: 16, }, - // left: "24%", // 定位到适合的位置 - // top: "38%", // 定位到适合的位置 - // subtext: `100%`, // 副标题 - // subtextStyle: { - // // 副标题样式 - // color: "#00FFFB", - // fontSize: 22, - // fontWeight: "bold", - // }, - // textAlign: "center", // 主、副标题水平居中显示 + }, - // grid: { - // top: "13%", - // left: "1%", - // right: "1%", - // bottom: "0%", - // }, + legend: { itemHeight: 10, itemWidth: 25, @@ -107,34 +94,43 @@ const getOption = () => { }, tooltip: { trigger: "item", - formatter: "{b}:{d}", + formatter: "{b}:{c}", }, - calculable: true, series: [ { - name: "", - type: "pie", - // radius: ["45%", "90%"], - // center: ["25%", "50%"], + type: 'pie', + radius: [0, 100], + center: ['50%', '40%'], - roseType: "radiuas", - labelLine: { - normal: { - length: 30, // 改变标示线的长度 - length2: 80, - lineStyle: { - color: "white", // 改变标示线的颜色 + roseType: 'area', + itemStyle: { + color: (params) => { + return colorList[params.dataIndex]; + }, + borderRadius: 8, }, - }, - }, - label: { - show: true, - formatter: "{b}:{c}" + "个\n\n", - borderWidth: 10, - borderRadius: 4, - padding: [0, -80], - }, - data: datas, + //标题与数字一行显示 + label: { + show: true, + position: 'outside', + formatter: '{a|{b}:{c}}\n{hr|}', + rich: { + hr: { + + backgroundColor: 'auto', + borderRadius: 3, + width: 3, + height: 3, + padding: [3, 3, 0, -12], + }, + a: { + padding: [-30, 15, -20, 15], + color: 'auto', + }, + }, + }, + + data: datas, }, ], };