页面背景图及饼图显示优化

yangfeng

2023-12-06 93d04e35d6ff02470687b73ff7494b62bdc85f2c

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -17,6 +17,7 @@
//引入echart
import * as echarts from "echarts";
let myChart;
let myRightChart;
export default {
  components: {
    ChartTitle,
@@ -83,6 +84,9 @@
              show: false,
              startValue: this.startValue, // 从头开始
              endValue: this.endValue, // 一次性展示几个
              zoomOnMouseWheel: false,
              moveOnMouseWheel: true,
              moveOnMouseMove: true,
            },
          ],
          legend: {
@@ -108,7 +112,7 @@
                // rotate:45,
                margin: 10,
                show: true,
                fontSize:12,
                fontSize: 12,
                textStyle: {
                  color: function (params, index) {
                    let colorList = ["#dcb018", "#00FFFF"];
@@ -162,6 +166,9 @@
                textStyle: {
                  color: "#00FFFF",
                },
                formatter: function (value) {
                  return `${value}%`;
                },
              },
            },
          ],
@@ -173,7 +180,21 @@
              label: {
                show: true,
                position: "right",
                color: "#00FFFF",
                formatter: function (params) {
                  if (params.dataIndex % 2 == 0) {
                    return `{a|${params.value}%}`;
                  } else {
                    return `{b|${params.value}%}`;
                  }
                },
                rich: {
                  a: {
                    color: "#00FFFF",
                  },
                  b: {
                    color: "#dcb018",
                  },
                },
              },
              itemStyle: {
                normal: {
@@ -215,7 +236,15 @@
    },
    getChartRight(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      // let myRightChart = echarts.init(chartDom);
      if (
        myRightChart != null &&
        myRightChart != "" &&
        myRightChart != undefined
      ) {
        myRightChart.dispose(); //销毁
      }
      myRightChart = echarts.init(chartDom);
      let img = "/cockpitPage/dotted-circle.png";
      let option;
      if (data) {
@@ -256,7 +285,11 @@
                  borderWidth: 5,
                  borderRadius: 4,
                  formatter: function (params) {
                    return `{a|${params.name}} {b|${params.value + "%"}}`;
                    let label =
                      params.name.length > 5
                        ? `${params.name.slice(0, 4)}...`
                        : params.name;
                    return `{a|${label}} {b|${params.value + "%"}}`;
                  },
                  rich: {
                    a: {
@@ -281,7 +314,7 @@
              labelLine: {
                show: true,
                length: 4,
                length2: 80,
                length2: 70,
                lineStyle: {
                  color: "#dcb018",
                },
@@ -295,10 +328,10 @@
          ],
        };

        option && myChart.setOption(option);
        option && myRightChart.setOption(option);
      } else {
        option = {};
        myChart.setOption(option, true);
        myRightChart.setOption(option, true);
      }
    },
  },
@@ -308,7 +341,7 @@
<style scoped lang="scss">
.bar-chart {
  width: 100%;
  height: calc(100% - 20px);
  height: calc(100% - 10px);
  padding: 20px 0 0;

  .bar-contents {