TEAMModelOS/TEAMModelOS/ClientApp/components/student-analysis/total/BaseKnowledgeDetail.vue

<template>
    <div id="knowledgeBar"></div>
</template>

<script>
export default {
    name: "hello",
    props: ['echartData'],
  data() {
    return {
      x: ['方程与不等式', '图形的性质', '统计与概率', '函数', '图形的相似', '锐角三角函数', '几何图形初步', '投影与视图'],
      y:[28,10,23,25,11,10,12,10]
    };
  },
  mounted() {
    this.drawLine();

  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myBar = this.$echarts.init(document.getElementById("knowledgeBar"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "axis", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
            shadowStyle: {
              color: "rgba(128,128,128,0.1)"
            }
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#fff"
          }
        },
        // ---- gird区域 ---
        grid: {
          show: false, // 是否显示直角坐标系网格
          top: 30, // 相对位置 top\bottom\left\right
          height:430,
          containLabel: true, // gird 区域是否包含坐标轴的刻度标签
        },
        dataZoom: {
          show: true,
          realtime: true,
          type: "inside",
        },
        xAxis: {
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          type: "category", // 轴类型， 默认为 'category'
          name: "月份", // 轴名称
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            color: "transparent",
            padding: [5, 0, 10, -5]
          },
          nameGap: 35, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转
          axisLabel: {
            // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            margin: 15,
            rotate:60,
            color: "#989898", // 默认取轴线的颜色,
          },
          splitLine: {
            show: false,
            lineStyle: {
               color: '#4c504a',
            }
          },
          splitArea: {
            show: false // 是否显示，默认为false
          },
          data:this.x
        },
        yAxis: {
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            color: "#fff",
            padding: [5, 0, 0, 5] // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 270, // 坐标轴名字旋转
          axisLine: {
            show: false, // 是否显示
            lineStyle: {
              color: "#595959",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#989898", // 默认轴线的颜色
            fontSize: 12,
            formatter: '{value} %' ,

          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4c504a",
              width: 0.5,
              type: "solid"
            }
          }
        },
        series: [
          {
            type: "bar", 
            itemStyle: {
              color: "#4ad8f1",
              width: 20,
            },
            barWidth:30,
            data:this.y
          }]
      };

      // 绘制图表
      myBar.setOption(option);
      window.addEventListener("resize", function() {
        myBar.resize();
      });

      let that = this;
      myBar.on('click', function (params) {
        that.$emit('handleItemClick', params);
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#knowledgeBar {
  width: 100%;
  height: 460px;
  margin: 0 auto;
  display: block;
}
</style>