diff --git a/src/view/dialog/echarts/jypxs.vue b/src/view/dialog/echarts/jypxs.vue index 97a7e6a..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: "高血压", @@ -37,60 +38,99 @@ let datas = [ value: 80, }, ]; -const colorList = ["#ffd813", "#08daaa", "#6571fc"]; const getOption = () => { data.option = { - //标题 + color: data.color, + title: { - // text: "近五年全省清洁能源发电及电能占比情况", + // 圆环标题 + // text: "就业率", // 主标题 textStyle: { - color: "#212b43", - fontSize: 14, //fontWeight: 'normal', + // 主标题样式 + color: "#fff", + + fontSize: 16, }, - }, //图例组件 + + }, + legend: { - bottom: "0;", + itemHeight: 10, + itemWidth: 25, + icon: "rect", + orient: "vertical", + top: "center", + right: "16%", + itemGap: 30, // 垂直间距 + textStyle: { + align: "left", + color: "#ffffff", + verticalAlign: "middle", + rich: { + name: { + width: 80, + fontSize: 16, + }, + value: { + width: 30, + align: "right", + fontFamily: "Medium", + fontSize: 16, + }, + rate: { + width: 20, + align: "right", + fontSize: 16, + }, + }, + }, + data: datas, + formatter: (name) => { + if (datas.length) { + const item = datas.filter((item) => item.name === name)[0]; + return `{name|${name}} {value| ${item.value}}`; + } + }, }, tooltip: { trigger: "item", + formatter: "{b}:{c}", }, series: [ { - type: "pie", - radius: [0, 100], - center: ["50%", "40%"], + type: 'pie', + radius: [0, 100], + center: ['50%', '40%'], - roseType: "area", - itemStyle: { - color: (params) => { - return colorList[params.dataIndex]; - }, - borderRadius: 8, - }, //标题与数字一行显示 - label: { - show: true, - position: "outside", - formatter: "{a|{b}:{d}%}\n{hr|}", - rich: { - hr: { - backgroundColor: "auto", - borderRadius: 3, - width: 1, - height: 3, - padding: [3, 3, 0, -12], + roseType: 'area', + itemStyle: { + color: (params) => { + return colorList[params.dataIndex]; + }, + borderRadius: 8, }, - a: { - padding: [0, 1, -20, 15], - color: "auto", + //标题与数字一行显示 + 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: [ - { value: 200, name: "高血压" }, - { value: 230, name: "糖尿病" }, - { value: 198, name: "其他疾病患者" }, - { value: 80, name: "无重大疾病患者" }, - ], + + data: datas, }, ], };