|
@@ -0,0 +1,295 @@
|
|
|
+<template>
|
|
|
+ <div :id="echartsId" class="knowledgeBar"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'hello',
|
|
|
+ props: ['echartsId','classIndex'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ knowledgeData: [],
|
|
|
+ x: [],
|
|
|
+ y: [],
|
|
|
+ activeItemIndex: 0,
|
|
|
+ curClassIndex:-1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ drawLine() {
|
|
|
+ let _this = this
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ let myBar = this.$echarts.init(document.getElementById(this.echartsId))
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示提示框,默认为true
|
|
|
+ trigger: 'axis', // 数据项图形触发
|
|
|
+ axisPointer: {
|
|
|
+ // 指示样式
|
|
|
+ type: 'shadow',
|
|
|
+ axis: 'auto',
|
|
|
+ shadowStyle: {
|
|
|
+ color: 'rgba(128,128,128,0.1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ padding: 15,
|
|
|
+ textStyle: {
|
|
|
+ // 提示框内容的样式
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ formatter: function(value) {
|
|
|
+ // console.log(value);
|
|
|
+ return value[0].name + ' : ' + value[0].data + '%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ show: false, // 是否显示直角坐标系网格
|
|
|
+ top: 80, // 相对位置 top\bottom\left\right
|
|
|
+ left:'center',
|
|
|
+ width:'75%',
|
|
|
+ height: 440,
|
|
|
+ containLabel: true // gird 区域是否包含坐标轴的刻度标签
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ 'show': true,
|
|
|
+ 'height': 10,
|
|
|
+ 'xAxisIndex': [
|
|
|
+ 0
|
|
|
+ ],
|
|
|
+ bottom:36,
|
|
|
+ 'start': 0,
|
|
|
+ 'end': 100,
|
|
|
+ handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
|
|
|
+ handleSize: '160%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#d3dee5'
|
|
|
+
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ borderColor: '#90979c'
|
|
|
+ }, {
|
|
|
+ 'type': 'inside',
|
|
|
+ 'show': true,
|
|
|
+ 'height': 15,
|
|
|
+ 'start': 0,
|
|
|
+ 'end': 100
|
|
|
+ }],
|
|
|
+ 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',
|
|
|
+ animation: false,
|
|
|
+ itemStyle: {
|
|
|
+ color: function(params) {
|
|
|
+ var key = params.dataIndex
|
|
|
+ if (key === _this.activeItemIndex) {
|
|
|
+ return '#ff9999'
|
|
|
+ } else {
|
|
|
+ return '#1b9dff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#ff9999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.y
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ // 绘制图表
|
|
|
+ myBar.setOption(option)
|
|
|
+ myBar.resize()
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ myBar.resize()
|
|
|
+ })
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ myBar.on('click', function(params) {
|
|
|
+ that.activeItemIndex = params.dataIndex
|
|
|
+ that.$emit('handleItemClick', params)
|
|
|
+ myBar.setOption(option)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ doRender(data,classIndexs) {
|
|
|
+ let classIndex = this.getCurClassIndex
|
|
|
+ console.log(classIndex)
|
|
|
+ // 区分全部班级以及单个班级的数据
|
|
|
+ this.x = data.pointList
|
|
|
+ this.y = classIndex === -1 ? data.stupercent.grade.map(item => (Number(item)).toFixed(2)) : data.pointList.map(pointName => data.classpercent[pointName][classIndex].toFixed(2))
|
|
|
+ this.drawLine()
|
|
|
+ },
|
|
|
+
|
|
|
+ doSubjectChange(subject){
|
|
|
+ let curclassIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(subject)
|
|
|
+ let curJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curclassIndex].levelKey
|
|
|
+ let transArr = this.$GLOBAL.EXERCISE_LEVELS()
|
|
|
+ curJson.pointList = curJson.pointList.map((i,index) => transArr[index])
|
|
|
+ for(let key in curJson.classpercent){
|
|
|
+ if(!isNaN(key)){
|
|
|
+ let newKey = transArr[+key - 1]
|
|
|
+ curJson.classpercent[newKey] = curJson.classpercent[key]
|
|
|
+ curJson.stupercent[newKey] = curJson.stupercent[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return curJson
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ if (this.getKnowledgeData) {
|
|
|
+ // this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(this.getAnalysisJson.classes.map(item => item.className))]) // 获取班级列表
|
|
|
+ this.doRender(this.getKnowledgeData,this.curClassIndex)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$EventBus.$on('onCollapseChange',val => {
|
|
|
+ const myBar = this.$echarts.init(document.getElementById(this.echartsId))
|
|
|
+ myBar.setOption({
|
|
|
+ grid: {
|
|
|
+ width: val ? '90%' : '80%'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ // 获取最新散点图数据
|
|
|
+ getKnowledgeData() {
|
|
|
+ let curclassIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
|
|
|
+ let curJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curclassIndex].levelKey
|
|
|
+ let transArr = this.$GLOBAL.EXERCISE_LEVELS()
|
|
|
+ curJson.pointList = curJson.pointList.map((i,index) => transArr[index])
|
|
|
+ for(let key in curJson.classpercent){
|
|
|
+ if(!isNaN(key)){
|
|
|
+ let newKey = transArr[+key - 1]
|
|
|
+ curJson.classpercent[newKey] = curJson.classpercent[key]
|
|
|
+ curJson.stupercent[newKey] = curJson.stupercent[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return curJson
|
|
|
+ },
|
|
|
+ getCurSubject(){
|
|
|
+ return this.$store.state.totalAnalysis.currentSubject
|
|
|
+ },
|
|
|
+ getAnalysisJson() {
|
|
|
+ return this.$store.state.totalAnalysis.analysisJson
|
|
|
+ },
|
|
|
+ getCurClassIndex(){
|
|
|
+ return this.$store.state.totalAnalysis.curClassIndex
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ getCurSubject(n,o){
|
|
|
+ console.log(n,o)
|
|
|
+ this.doRender(this.doSubjectChange(n),this.curClassIndex)
|
|
|
+ },
|
|
|
+ // getKnowledgeData: {
|
|
|
+ // handler(n,o) {
|
|
|
+ // if (n) {
|
|
|
+ // console.log(n,o)
|
|
|
+ // this.doRender(n,this.curClassIndex)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ classIndex(n,o){
|
|
|
+ console.log('柱状图变化了', n - 1)
|
|
|
+ this.curClassIndex = n - 1
|
|
|
+ this.doRender(this.getKnowledgeData,n - 1)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ .knowledgeBar {
|
|
|
+ width:100%;
|
|
|
+ height: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+</style>
|