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

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

<script>
export default {
    name: "hello",
    props: ['echartData'],
  data() {
      return {
        echartDatas: [],
        gradeRate: 62.4,
        areaRate:76.2
      };
    },
    created() {
    },
  mounted() {
    this.drawLine(this.echartData);

  },
  methods: {
    drawLine(echartData) {
        let myBar = this.$echarts.init(document.getElementById("stuAverageBar"));
        var option = {
          legend: {
            data: [{
              name: '班级得分率',
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: '年级得分率',
              color: "red",
              textStyle: {
                color: '#fff'
              }
            },
            {
              name: '区级得分率',
              color: "red",
              textStyle: {
                color: '#fff'
              }
            }
            ]

          },
          tooltip: {
            show: true, // 是否显示提示框，默认为true
            trigger: "axis", // 数据项图形触发
            axisPointer: {
              // 指示样式
              type: "shadow",
              axis: "auto",
              shadowStyle: {
                color: "rgba(128,128,128,0.1)"
              }
            },
            padding: 5,
            textStyle: {
              color: "#fff"
            },
            formatter: function (params) {
              return params[0].name + '<br>'
                + params[0].marker + params[0].seriesName + ':' + params[0].data + '%<br>'
                + params[1].marker + params[1].seriesName + ':'+ params[1].data + '%<br>'
                + params[2].marker + params[2].seriesName + ':'+ params[2].data + '%<br>'
            }
          },
          grid: {
            top: 80, // 相对位置 top\bottom\left\right
          },
          dataZoom: {
            show: true,
            realtime: true,
            type: "inside",
          },
          //toolbox: {
          //  show: true,
          //  feature: {
          //    magicType: { show: true, type: ['line', 'bar'] },
          //    saveAsImage: { show: true }
          //  }
          //},
          xAxis: {
            show: true,
            offset: 0,
            type: "category",
            axisLabel: {
              show: true,
              inside: false,
              margin: 15,
              color: "#989898",
            },
            data: echartData.map(item => item.name)
          },
          yAxis: {
            show: true,
            type: "value",
            min: 0,
            max:100,
            axisLabel: {
              show: true,
              inside: false,
              rotate: 0,
              margin: 8,
              color: "#989898",
              formatter: '{value} %',
              fontSize: 12,
              fontFamily: "Microsoft YaHei"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#4c504a",
                width: 0.5,
                type: "solid"
              }
            }
          },
          series: [
            {
              name:'班级得分率',
              type: "bar",
              itemStyle: {
                normal: {  //渐变色
                      color: '#66cccc'
                    },
                width: 20,
              },
              markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ],
              },
              barWidth:50,
              data: echartData.map(item => item.entryRate)
            },
            {
              name:'年级得分率',
              type: "line",
              itemStyle: {
                color: "#ff33cc",
                width: 0,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#ff33cc',
                  type: "dashed"
                }
              },
              data: echartData.map(item => this.gradeRate)
            },
            {
              name:'区级得分率',
              type: "line",
              itemStyle: {
                color: "#66ff99",
                width: 0,
              },
              symbol: 'none',
              lineStyle: {
                type: "dashed",
                width: 0,
              },
              markLine: {
                data: [
                  { type: 'average' }
                ],
                lineStyle: {
                  color: '#66ff99',
                  type: "dashed"
                }
              },
              data: echartData.map(item => this.areaRate)
            },
          ]
        };

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

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