v-charts开发笔记

---

  data() {
    return {
      title: {
        text: '不良事件级别总体分布'
      },
      pieSettings: {
        type: 'pie',
        label: {
          show: true,
          formatter: '{c}, {d}%'
        }
      },
      pieLegend: {
        bottom: 150,
        left: 'center'
      },
      pieChartData: {
        columns: ['level', 'total'],
        rows: [{'level': 'Ⅳ级', 'total': 335},
          {'level': 'Ⅲ级', 'total': 225},
          {'level': 'Ⅱ级', 'total': 100},
          {'level': 'Ⅰ级', 'total': 5}]
      },
      chartExtend: {
        series(arr) {
          arr.forEach((item, index) => {
            item.center = ['50%', '45%']; // 饼图在容器中的位置
          })
          return arr;
        }
      }
    }
  }

---

data() {
    return {
      charData: {
        columns: ['target', 'value'],
        rows: [
          {'target': '实际床位数', 'value': 111},
          {'target': '护士总数', 'value': 222},
          {'target': '医疗机构床护比', 'value': 232},
          {'target': '病区床护比', 'value': 332},
          {'target': '重症医学科床护比', 'value': 334},
          {'target': '儿科病区床护比', 'value': 123},
          {'target': '白班平均护患比', 'value': 223},
          {'target': '夜班平均护患比', 'value': 443},
          {'target': '病区20年及以上护士占比', 'value': 112},
          {'target': '住院患者身体约束率', 'value': 554},
          {'target': '住院患者跌倒发生率', 'value': 223},
          {'target': '住院患者跌倒伤害占比', 'value': 422},
          {'target': '住院患者2期及以上院内压力性损伤发生率', 'value': 453},
          {'target': '置管患者非计划拔管率', 'value': 343},
          {'target': '气管导管（气管插管、气管切开）', 'value': 454},
          {'target': '经口、经鼻胃肠导管', 'value': 678},
          {'target': '导尿管', 'value': 345},
          {'target': '中心静脉导管（CVC）', 'value': 256},
          {'target': '经外周置入中心静脉导管（PICC）', 'value': 457},
          {'target': '导尿管相关尿路感染（CAUTI）', 'value': 557},
          {'target': '中心静脉导管（CVC）', 'value': 669},
          {'target': '经外周置入中心静脉导管（PICC）', 'value': 346},
          {'target': '特级护理', 'value': 334},
          {'target': '一级护理', 'value': 446},
          {'target': '二级护理', 'value': 445},
          {'target': '三级护理', 'value': 667}
        ]
      },
      title: {
        text: 'Ⅲ级以上不良事件分布'
      },
      grid: {
        top: '10%',
        left: '1%',
        right: '2%',
        bottom: '5%',
        containLabel: true
      },
      chartSettings: {
        label: {
          show: true,
          position: 'top'
        }
      },
      pieLegend: {
        bottom: 10,
        show: false,
        left: 'center'
      },
      chartExtend: {
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 45, //倾斜度 -90 至 90 默认为0
            fontSize: '0.15rem',
          }
        },
        series(arr) {
          arr.forEach((item, index) => {
            item.itemStyle = {
              color: function () {
                // 柱状图随机颜色
                return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
              }
            }
          })
          return arr;
        }
      }
    }
  }

---

toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: {readOnly: false},
          magicType: {type: ['line', 'bar']},
          restore: {},
          saveAsImage: {},
          // 添加自定义操作
          myTool: {
            show: true, //是否显示
            title: "横/竖版切换",  //鼠标悬空的提示文字
            icon:
              // 这个是阿里icon svg 后 b的全部字符串
              "path://M300.5 503.8c-11 0-21.3-4.3-29-12L110 330.4c-7.7-7.7-12-18.1-12-29 0-11 4.3-21.3 12-29L271.4 111c7.7-7.7 18.1-12 29-12 11 0 21.3 4.3 29 12l161.5 161.3c7.7 7.7 12 18.1 12 29 0 11-4.3 21.3-12 29L329.5 491.8c-7.7 7.8-18 12-29 12zM161.8 301.4l138.7 138.7 138.7-138.7-138.7-138.7-138.7 138.7zM300.5 928.5c-11 0-21.3-4.3-29-12L110 755.1c-7.7-7.7-12-18.1-12-29 0-11 4.3-21.3 12-29l161.4-161.4c7.7-7.7 18.1-12 29-12 11 0 21.3 4.3 29 12L490.9 697c7.7 7.7 12 18.1 12 29 0 11-4.3 21.3-12 29L329.5 916.5c-7.7 7.7-18 12-29 12zM161.8 726l138.7 138.7L439.2 726 300.5 587.3 161.8 726zM896.6 271.4H551.8c-16.6 0-30-13.4-30-30s13.4-30 30-30h344.8c16.6 0 30 13.4 30 30s-13.4 30-30 30zM896.6 553.7H551.8c-16.6 0-30-13.4-30-30s13.4-30 30-30h344.8c16.6 0 30 13.4 30 30s-13.4 30-30 30zM896.6 836H551.8c-16.6 0-30-13.4-30-30s13.4-30 30-30h344.8c16.6 0 30 13.4 30 30s-13.4 30-30 30z",
            onclick: this.changeView,
          }
        }
      }