diff --git a/src/view/dialog/echarts/jypxs copy.vue b/src/view/dialog/echarts/jypxs copy.vue new file mode 100644 index 0000000..69fc9a4 --- /dev/null +++ b/src/view/dialog/echarts/jypxs copy.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/src/view/dialog/echarts/jypxs.vue b/src/view/dialog/echarts/jypxs.vue index 1056379..97a7e6a 100644 --- a/src/view/dialog/echarts/jypxs.vue +++ b/src/view/dialog/echarts/jypxs.vue @@ -37,104 +37,60 @@ let datas = [ value: 80, }, ]; +const colorList = ["#ffd813", "#08daaa", "#6571fc"]; const getOption = () => { data.option = { - color: data.color, - + //标题 title: { - // 圆环标题 - // text: "就业率", // 主标题 + // text: "近五年全省清洁能源发电及电能占比情况", textStyle: { - // 主标题样式 - color: "#fff", - - fontSize: 16, + color: "#212b43", + fontSize: 14, //fontWeight: 'normal', }, - // 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, - 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}}`; - } - }, + bottom: "0;", }, tooltip: { trigger: "item", - formatter: "{b}:{d}", }, - calculable: true, series: [ { - name: "", type: "pie", - // radius: ["45%", "90%"], - // center: ["25%", "50%"], + 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, + position: "outside", + formatter: "{a|{b}:{d}%}\n{hr|}", + rich: { + hr: { + backgroundColor: "auto", + borderRadius: 3, + width: 1, + height: 3, + padding: [3, 3, 0, -12], + }, + a: { + padding: [0, 1, -20, 15], + color: "auto", }, }, }, - label: { - show: true, - formatter: "{b}:{c}" + "个\n\n", - borderWidth: 10, - borderRadius: 4, - padding: [0, -80], - }, - data: datas, + data: [ + { value: 200, name: "高血压" }, + { value: 230, name: "糖尿病" }, + { value: 198, name: "其他疾病患者" }, + { value: 80, name: "无重大疾病患者" }, + ], }, ], };