JKbigScreen/src/components/index/1.vue

<template>
  <div id="c1" style="width: 90%;margin-left:5%;height: 100%;"></div>
</template>
<script>
export default {
  name: "chart",
  props: {
    id: {
      type: String,
      default: "id"
    },
    dataArr: {
      type: Array,
      default: () => {
        return [];
      }
    }
    // colorArr: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // },
    // imageArr: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // }
  },
  data() {
    return {};
  },
  mounted() {
    this.gatherers();
  },
  watch: {
    dataArr() {
      this.myChart.clear();
      this.gatherers();
    }
  },
  methods: {
    gatherers() {
      let myChart = this.$echarts.init(document.getElementById("c1"));
      this.myChart = myChart;
      let dataArr = this.dataArr;
      let chartName = [];
      let chartData = [];
      dataArr.forEach(item => {
        chartName.push(item.label);
        chartData.push(item.value);
      });
      // // 绘制图表
      myChart.setOption({
        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "15%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",

          formatter: function(params) {
            // console.log(params)
            var result = "";
            var dotHtml =
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f9f43b"></span>';
            // var dotHtml2 =
            //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7800"></span>';
            result +=
              dotHtml +
              "申请金额：" +
              params[0].data +
              "</br>"
              // dotHtml2 +
              // "整改到位率：" +
              // params;
            return result;
          },
          // formatter: function(params) {
          //   //提示框内容
          //   var value = "";
          //   for (var i = 0; i < params.length; i++) {
          //     var data = params[i].data;
          //     value += "申请金额  "+data + "万元";
          //   }
          //   return value;
          // },
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          }
        },
        title: [
          {
            text: "(万元)",
            left: "2%",
            bottom: "13%",
            // textAlign: "center",
            textStyle: {
              // fontWeight: 900,
              fontSize: 18,
              color: "#fff",
              textAlign: "center"
            }
          }
          // {
          //   text: "(日)",
          //   right: "0%",
          //   bottom: "13%",
          //   // textAlign: "center",
          //   textStyle: {
          //     fontWeight: 900,
          //     fontSize: 18,
          //     color: "#8998aa",
          //     textAlign: "center"
          //   }
          // }
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00"
              }
            },
            axisLabel: {
              color: "#fff",
              // fontWeight: 900,
              fontSize: 18,
              formatter: "{value}日",
              interval: 0
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            boundaryGap: true,
            data: chartName
          }
        ],

        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                // fontWeight: 900,
                fontSize: 18
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "申请金额",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: `image://${require("../../assets/index/point2.png")}`,
            symbolSize: 16,
            lineStyle: {
              normal: {
                color: "#f9f43b"
              }
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#6c50f3"
              }
            },
            itemStyle: {
              color: "#f9f43b"
            },
            // tooltip: {
            //   show: false
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#fca91f"
                    },
                    {
                      offset: 1,
                      color: "#4e6b57"
                    }
                  ],
                  false
                )
              }
            },
            data: chartData,
            markPoint: {
              data: [{ type: "max", name: "最大值" }],
              symbol: `image://${require("../../assets/index/k2.png")}`,
              symbolSize: [85, 35],
              symbolOffset: [0, -20],
              label: {
                // padding:[100],
                fontSize: 16,
                fontWeight: 800,
                color: "#000"
              }
            }
          }
          // {
          //   name: "放款金额",
          //   type: "line",
          //   smooth: true, //是否平滑
          //   showAllSymbol: true,
          //   symbol: `image://${require("../../assets/index/point1.png")}`,
          //   // symbol: "circle",
          //   symbolSize: 16,
          //   lineStyle: {
          //     normal: {
          //       color: "#3aa1d7"
          //     }
          //   },
          //   label: {
          //     show: false,
          //     position: "top",
          //     textStyle: {
          //       color: "#00ca95"
          //     }
          //   },
          //   itemStyle: {
          //     color: "#fada31"
          //   },
          //   // tooltip: {
          //   //   show: false
          //   // },
          //   areaStyle: {
          //     normal: {
          //       color: new this.$echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         0,
          //         1,
          //         [
          //           {
          //             offset: 0,
          //             color: "#1c5076"
          //           },
          //           {
          //             offset: 1,
          //             color: "#1c5076"
          //           }
          //         ],
          //         false
          //       )
          //       // shadowColor: "rgba(0,202,149, 0.9)",
          //       // shadowBlur: 20
          //     }
          //   },
          //   data: chartData2,
          //   markPoint: {
          //     data: [{ type: "max", name: "最大值" }],
          //     symbol: `image://${require("../../assets/index/k1.png")}`,
          //     symbolSize: [57, 35],
          //     symbolOffset: [0, -20],
          //     label: {
          //       fontSize: 16,
          //       fontWeight: 800,
          //       color: "#fff"
          //     }
          //     // color: "#f00"
          //   }
          // }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  computed: {}
};
</script>
<style scoped>
</style>