<template>
    <div class="center_bottom">
      <Echart
        :options="options"
        id="bottomLeftChart"
        class="echarts_bottom"
      ></Echart>
    </div>
  </template>
  
  <script>
  import { graphic } from "echarts";
  import  Echart  from "../../../../../components/echart/index.vue";
  //import * as graphic from "echarts";
  export default {
    components: { Echart},
    data() {
      return {
        options: {},
      };
    },
    props: {},
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        debugger
        this.pageflag = true;
      let json = {
  success: true,
  data: {
    category: ["吉林市", "吉安市", "重庆市", "十堰市", "七台河市", "新界", "贺州市", "廊坊市", "天津市", "连江县", "本溪市", "上海市", "临沧市", "安顺市", "岳阳市", "哈尔滨市", "武威市", "四平市", "沈阳市", "铜仁市", "泉州市", "阿克苏地区", "内江市", "黔西南布依族苗族自治州", "石嘴山市", "宁波市", "晋城市", "咸宁市", "甘南藏族自治州", "福州市"],
    barData: [25, 91, 17, 10, 58, 51, 12, 51, 94, 97, 68, 91, 65, 48, 90, 60, 19, 29, 75, 97, 55, 91, 44, 31, 42, 18, 91, 69, 91, 12],
    lineData: [26, 161, 55, 63, 70, 145, 37, 61, 157, 106, 105, 159, 73, 52, 169, 133, 105, 103, 123, 174, 71, 103, 122, 97, 89, 26, 151, 154, 129, 45],
    rateData: ["96", "57", "31", "16", "83", "35", "32", "84", "60", "92", "65", "57", "89", "92", "53", "45", "18", "28", "61", "56", "77", "88", "36", "32", "47", "69", "60", "45", "71", "27"]
  }
};
this.init(json.data);
this.pageflag = false;
      },
      init(newData) {
        this.options = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: {
              color: "#FFF",
            },
            formatter: function (params) {
              // 添加单位
              var result = params[0].name + "<br>";
              params.forEach(function (item) {
                if (item.value) {
                  if (item.seriesName == "安装率") {
                    result +=
                      item.marker +
                      " " +
                      item.seriesName +
                      " : " +
                      item.value +
                      "%</br>";
                  } else {
                    result +=
                      item.marker +
                      " " +
                      item.seriesName +
                      " : " +
                      item.value +
                      "个</br>";
                  }
                } else {
                  result += item.marker + " " + item.seriesName + " :  - </br>";
                }
              });
              return result;
            },
          },
          legend: {
            data: ["已安装", "计划安装", "安装率"],
            textStyle: {
              color: "#B4B4B4",
            },
            top: "0",
          },
          grid: {
            left: "50px",
            right: "40px",
            bottom: "30px",
            top: "20px",
          },
          xAxis: {
            data: newData.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4",
                },
              },
  
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4",
                },
              },
              axisLabel: {
                formatter: "{value}% ",
              },
            },
          ],
          series: [
            {
              name: "已安装",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                borderRadius: 5,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#956FD4" },
                  { offset: 1, color: "#3EACE5" },
                ]),
              },
              data: newData.barData,
            },
            {
              name: "计划安装",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                borderRadius: 5,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" },
                ]),
              },
              z: -12,
              data: newData.lineData,
            },
            {
              name: "安装率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                color: "#F02FC2",
              },
              data: newData.rateData,
            },
          ],
        };
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .center_bottom {
    width: 100%;
    height: 100%;
  
    .echarts_bottom {
      width: 100%;
      height: 100%;
    }
  }
  </style>
  