<template>
  <div id="point"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  mixins: [resize],
  data () {
    return {}
  },
  methods: {
    Draw () {
      this.chart = echarts.init(document.getElementById('point'));
      const option = {
        title: {
          text: "成本效用分析CUA (Cost Utility Analysis)",
          subtext:"筛查干预前8位胃癌患者QALY显著增加，每增加一单位健康效用，成本仅增加9.2万元",
          subtextStyle: {
            color:'#fff',
            align: "right",
            verticalAlign: "top",
            lineHeight: 0,
          },
          top: "3%",
          left: "1%",
          // padding: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontSize: 16,
          },
        },
        color: 'rgb(169, 213, 234)',
        legend: {
          show: false
        },
        grid: {
          top: "28%",
          bottom: "10%",
          left: "10%",
          containLabel: false,
        },
        xAxis: {
          type: "category",
          data: ['1', '2'],
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          // axisLine:{
          //   show:false
          // },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true
          },
          data: ['100', '120', '140', '160', '180', '200']
        },
        yAxis: {
          name: "万元/年",
          nameTextStyle: {
            color: "#636996",
          },
          type: "value",
          max: 30,
          splitLine: {
            show: false
          },
          axisLine: {
            show: true
          },
          data: ["-5", "0", "5", "10", "15", "20"],
        },
        series: [
          {
            name: "",
            type: "scatter",
            data: [
              ['100', 0.84]
            ],
            label: {
              show: true,
              position: 'top',
              color:'#FFF',
            },
            symbolSize: function (data) {
              return Math.sqrt(data[1]) / 0.1;
            },
          },
          {
            name: "",
            type: "scatter",
            data: [
              ['180', 21.98],
            ],
            label: {
              show: true,
              position: 'top',
               color:'#FFF',
            },
            symbolSize: function (data) {
              return Math.sqrt(data[1]) / 0.05;
            },
          },
        ]
      };

      this.chart.clear();
      option && this.chart.setOption(option);
    }
  },
  mounted () {
    this.Draw()
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
#point {
  width: 100%;
  height: 100%;
}
</style>