JKbigScreen/src/components/PlatformAchievement/6.vue

<template>
  <div id="c6" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {
  name: "chart",
  props: {
    dataArr: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.gatherers();
  },
  watch: {
    dataArr() {
      this.myChart.clear();
      this.gatherers();
    }
  },
  methods: {
    gatherers() {
      let dataArr = this.dataArr;
      let color = [
        ["rgba(254,196,0,0.15)", "rgba(254,196,0,1)"],
        ["rgba(105,218,123,0.15)", "rgba(19,205,215,1)"]
      ];
      let topColor = ["#FEC400", "#13CDD7"];
      let chartData = [];
      let chartName = [];
      let list = [];
      dataArr.forEach(function(item, index) {
        chartName.push(item.label);
        chartData.push({
          value: item.value,
          symbol: "circle",
          symbolPosition: "end",
          itemStyle: {
            normal: {
              color: topColor[index % 2]
            }
          }
        });
        list.push({
          value: item.value,
          symbolOffset: [0, 0],
          symbol: "path://M419.5,746.986L401,983h37Z",
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color[index % 2][0]
                  },
                  {
                    offset: 0,
                    color: color[index % 2][1]
                  }
                ],
                globalCoord: false
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: "top",
              offset: [0, 0],
              textStyle: {
                color: topColor[index % 2],
                // fontWeight: 900,
                fontSize: 18
              }
            }
          }
        });
      });
      let myChart = this.$echarts.init(document.getElementById("c6"));
      this.myChart = myChart;
      // 绘制图表
      myChart.setOption({
        grid: {
          left: "5%",
          top: "22%",
          right: "12%",
          bottom: "8%",
          containLabel: true
        },
        title: [
          {
            text: "(万元)",
            left: "4%",
            bottom: "5%",
            textStyle: {
              fontWeight: 900,
              fontSize: 18,
              color: "#fff",
              textAlign: "center"
            }
          },
          // {
          //   text: "(日)",
          //   right: "10%",
          //   bottom: "5%",
          //   textStyle: {
          //     fontWeight: 900,
          //     fontSize: 18,
          //     color: "#8998aa",
          //     textAlign: "center"
          //   }
          // }
        ],
        xAxis: [
          {
            type: "category",
            offset: 5,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#404b5f"
              }
            },
            axisLabel: {
               formatter: "{value}日",
               interval:0,
              textStyle: {
                color: "#fff",
                // fontWeight: 900,
                fontSize: 18
              }
            },
            data: chartName
          }
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "#07355a"
            },
            show: true //隐藏或显示
          },
          axisLabel: {
            show: true, //隐藏或显示
            textStyle: {
              color: "#fff",
              // fontWeight: 900,
              fontSize: 18
            }
          }
        },
        series: [
          {
            type: "pictorialBar",
            name: "案件归类",
            symbolSize: [30, "100%"],
            z: 10,
            data: list
          },
          {
            name: "top",
            type: "pictorialBar",
            symbolSize: [11, 11],
            symbolOffset: [0, 0],
            data: chartData,
            z: 20
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  computed: {}
};
</script>
<style scoped>
</style>