TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/text.vue

<template>
  <div class="content">
    <div class="map">
      <div id="myChart" :style="{width: '700px', height: '700px'}"></div>
    </div>
    <div class="chart">
      <div id="Chart" :style="{width: '500px', height: '700px'}"></div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import '../../static/china.js' // 引入中国地图数据
  // import 'echarts/map/js/china.js';
  export default {
    data() {
      return {
        chart: null,
        data: [],
        total: 0,
        model1:'',
        periodList: [
          {
            value: 1,
            label: '学前'
          },
          {
            value: 2,
            label: '小学'
          },
          {
            value: 3,
            label: '初中'
          },
          {
            value: 4,
            label: '高中'
          },
          {
            value: 5,
            label: '中职'
          },
        ],
        subjectList: [
          {
            value: 1,
            label: '语文'
          },
          {
            value: 2,
            label: '数学'
          },
          {
            value: 3,
            label: '英语'
          },
          {
            value: 4,
            label: '生物'
          },
          {
            value:5,
            label: '化学'
          },
        ],
        teacherList: [
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500'},
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },

        ],
        geoCoordMap: {
          "四川省": [104.06, 30.67],
          "陕西省": [108.78, 34.40],
          "浙江省": [120.04, 30.35],
          "广东省": [113.23, 23.22],
          "湖北省": [114.12, 30.76],
          "宁夏回族自治区": [106.09, 38.62],
          "河南省": [113.45, 34.90],
          "黑龙江省": [126.48, 45.99],
          "甘肃省": [103.67, 36.22],
          "河北省": [114.34, 38.22],
          "北京市": [116.40, 39.94],
          "江苏省": [118.72, 32.24],
          "辽宁省": [123.24, 41.95],
          "吉林省": [125.23, 43.90],
          "安徽省": [117.17, 31.99],
          "福建省": [119.16, 26.18],
          "江西省": [115.80, 28.77],
          "山东省": [116.91, 36.81],
          "湖南省": [112.80, 28.47],
          "海南省": [110.18, 19.92],
          "贵州省": [106.49, 26.84],
          "云南省": [102.59, 25.25],
          "青海省": [101.60, 36.75],
          "西藏自治区": [90.97, 29.84],
        },
        dataIndex: "",
        teacherData:[
          {
          "name": "高新区",
          "value": 80
        }, {
          "name": "青羊区",
          "value": 87
        }, {
          "name": "天府新区",
          "value": 60
        }, {
          "name": "锦江区",
          "value": 40
        }, {
          "name": "金牛区",
          "value": 50
        }, {
          "name": "郫都区",
          "value": 30
        }, {
          "name": "温江区",
          "value": 40
          }
        ]

      }
    },
    mounted() {
      this.drawLine();
      this.drawChart();
    },

    methods: {

      drawLine() {
        var mapChart = echarts.init(document.getElementById('myChart'));
        // mapChart的配置
        var option = {
          series: [{
            type: 'map',
            mapType: 'china',
            label: {
              normal: {
                show: false,//显示省份标签
                textStyle: { color: "#141414" }//省份标签字体颜色
              },
              emphasis: {//对应的鼠标悬浮效果
                show: true,
                textStyle: { color: "#666" }
              }
            },
            lineStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#58B3CC'
                }, {
                  offset: 1, color: '#F58158'
                }], false),
                width: 1,
                opacity: 0.2,
                curveness: 0.1
              }
            },
            itemStyle: {
              normal: {
                borderWidth: .5,//区域边框宽度
                borderColor: '#666',//区域边框颜色
                areaColor: "#fff",//区域颜色
                //background-image: linear-gradient(135deg, #f5f7fa 0 %, #c3cfe2 100 %);
              },
              emphasis: {
                borderWidth: .5,
                borderColor: '#4b0082',
                areaColor: "#008DFF",
              }
            },
            data: [
              { name: '四川', selected: true },//福建为选中状态
              { name: '广东', selected: true },//福建为选中状态
              { name: '湖北', selected: true },//福建为选中状态
            ]
          }],
        }
        mapChart.setOption(option);
        mapChart.on('click', function (params) {
          this.dataIndex = params.dataIndex;
          console.log(params);
        });
      },
      drawChart() {
        var myChart = echarts.init(document.getElementById('Chart'));
        var xData = [],
          yData = [];
        var min = 50; // 最小值的定义
        this.teacherData.map(function (a, b) {
          xData.push(a.name);
          if (a.value === 0) {
            yData.push(a.value + min);
          } else {
            yData.push(a.value);
          }
        });
        var option = {
          //color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                opacity: 0
              }
            },
            formatter: function (prams) { 
                return "名师数：" + prams[0].data 
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '5%',
            top: '5%',
            height: '50%',
            containLabel: true,
            z: 22
          },
          xAxis: [{
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize: 12
            }
          }],
          yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            max: 150,
            axisLine: {
              lineStyle: {
                color: '#0c3b71'
              }
            },
            axisLabel: {
              color: 'rgb(170,170,170)',
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            max: 200,
          }
          ],
          series: [{
            type: 'bar',
            barWidth: '20',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                //barBorderRadius: [30, 30, 0, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, [
                  //  {
                  //  offset: 0,
                  //  color: '#00feff'
                  //},
                  {
                    offset: 0.5,
                      color: '#4da1ff'
                  },
                  {
                    offset: 1,
                    color: '#4da1ff'
                  }
                  ]
                )
              }
            },
            data: yData,
            zlevel: 11

          },
          ]
        };
        myChart.setOption(option);
      }
       
      },

  }
</script>
<style scoped>
  .content{
    display:flex;

  }
  .map {
    width: 50%;
    height: 600px;
    /*margin-left:150px;*/
    padding-left: 250px;
    /*background: url("../../assets/image/resource/title-bg.jpg") center 120% no-repeat;*/
    /*background-color:aliceblue;*/
  }
  .chart {
    width: 600px;
    height: 700px;
    /*border: 1px solid red;*/
    margin-left: 10px;
    /*background-color: aliceblue;*/
  }
</style>