添加基础配置表

TreeWish

2023-02-27 f98dba354a2d8f7b8d77984f2667432ff0b33363

 src/components/chart/FileFormat.vue

@@ -16,12 +16,7 @@
    this.initChart()
  },
  methods: {
    


    async initChart() {

      
      let data = [
        {
          name: "user1",
@@ -69,109 +64,110 @@
      let yAxis = []
      if (res.code == 200) {
        data = res.result.map(item => {
          xAxis.push(item.name);
          yAxis.push(item.count);
          xAxis.push(item.name)
          yAxis.push(item.count)
        })
      }
      let option = {
      grid: {
        // 让图表占满容器
        top: "12%",
        left: "15%",
        right: "10%",
        bottom: "15%",
      },
     
      xAxis: {
        data: xAxis,
        axisLabel: {
          show: true,
          color: "#ffff",
        grid: {
          // 让图表占满容器
          top: "12%",
          left: "15%",
          right: "10%",
          bottom: "15%",
        },
        axisTick: {
          show: false,
        tooltip: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(95, 180, 237, 0.32)",
        xAxis: {
          data: xAxis,
          axisLabel: {
            show: true,
            color: "#ffff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(95, 180, 237, 0.32)",
            },
          },
        },
      },
      yAxis: {      
        axisLine: {
          show: false,
         
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#ffff",
        },
        // 分割线
        splitLine: {
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#ffff",
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: "#5d7289",
              width: 1,
              type: "dashed"
            }
          },
      },
      series: [
        {
          // 顶部圆片
          type: "pictorialBar",
          animation: false,
          itemStyle: {
            color: "rgba(115, 240, 252, 1)",
          },
          symbolRepeat: false,
          symbolSize: [15, 8],
          symbolMargin: 1,
          z: 10,
          data: data,
          symbolPosition: "end",
          symbolOffset: [0, -4],
        },
        {
          // 底部圆片
          type: "pictorialBar",
          animation: false,

          itemStyle: {
            color: "rgba(50, 96, 225, 0.8)",
          },
          symbolRepeat: false,
          symbolSize: [15, 8],
          symbolMargin: 1,
          z: 10,
          data: data,
          symbolPosition: "start",
          symbolOffset: [0, 3],
        },
        {
          barWidth: 15,
          animation: false,

          type: "bar",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#ffff",
              type: "dashed",
            },
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
              { offset: 0, color: "rgba(82, 180, 249, 1)" },
            ]),
          },
          data: yAxis,
        },
      ],
};
        series: [
          {
            // 顶部圆片
            type: "pictorialBar",
            animation: false,
            itemStyle: {
              color: "rgba(115, 240, 252, 1)",
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "end",
            symbolOffset: [0, -4],
          },
          {
            // 底部圆片
            type: "pictorialBar",
            animation: false,

            itemStyle: {
              color: "rgba(50, 96, 225, 0.8)",
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "start",
            symbolOffset: [0, 3],
          },
          {
            barWidth: 15,
            animation: false,

            type: "bar",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#ffff",
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
                { offset: 0, color: "rgba(82, 180, 249, 1)" },
              ]),
            },
            data: yAxis,
          },
        ],
      }

      const chart = echarts.init(this.$refs.chart)

@@ -187,6 +183,6 @@
<style lang="less" scoped>
.file-format {
  width: 100%;
  height:calc(100% - 30px);
  height: calc(100% - 30px);
}
</style>