vue 集成eacharts

<template>
  <div class="user-info">
    <h2>个人信息</h2>
    <ul>
      <li>
        <label>昵称：</label>
        <span>测试数据</span>
      </li>
      <li>
        <label>账号：</label>
        <span>13678380508</span>
      </li>
      <li>
        <label>性别：</label>
        <span>男</span>
      </li>
      <li>
        <label>积分：</label>
        <span>1300</span>
      </li>
    </ul>
    <div ref="main" class="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "userInfo",
  mounted() {
    const { vm } = { vm: this };
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(vm.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "数据统计",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["资源浏览量", "课程学习量", "答题量", "面试题评论", "积分"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期日",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "资源浏览量",
          type: "line",
          stack: "Total",
          data: [1220, 1322, 101, 9134, 390, 3230, 3210],
        },
        {
          name: "课程学习量",
          type: "line",
          stack: "Total",
          data: [2240, 8182, 9191, 2344, 290, 3430, 1310],
        },
        {
          name: "答题量",
          type: "line",
          stack: "Total",
          data: [150, 2932, 2031, 154, 8490, 5330, 4410],
        },
        {
          name: "面试题评论",
          type: "line",
          stack: "Total",
          data: [3320, 332, 301, 334, 3930, 330, 3320],
        },
        {
          name: "积分",
          type: "line",
          stack: "Total",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    });
  },
};
</script>

<style scoped lang="less">
.user-info {
  h2 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  ul {
    margin-bottom: 20px;
    li {
      label {
        font-weight: bold;
      }
    }
  }

  .main {
    height: 400px;
  }
}
</style>

<template>
  <div id="app">
    <div class="topbox w100">
      <div class="contentbox w1600">福建省水电站清理整治工作平台</div>
    </div>
    <div class="center w100">
      <div class="centerbox">
        <div class="left">
          <div class="box1">
            <dv-border-box-10
              class="boxx"
              style="width: 500px; height: 150px; text-align: left"
            >
              <div class="tittle">福建省生态下泄流量2023/02/04考核情况</div>
            </dv-border-box-10>
          </div>
        </div>
         <div id="area" class="main" style="width: 500px; height: 500px;"></div>
        <div class="right">
          <div class="rightbox">
            <div class="rightbox1">
              <dv-border-box-10>dv-border-box-10</dv-border-box-10>
            </div>
            <div class="rightbox2">
              <dv-border-box-10
                class="boxx"
              
              >
                <div class="tittle">福建省生态下泄流量2023/02/04考核情况</div>
              </dv-border-box-10>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";


export default {
  mounted() {
      const myChart = echarts.init(document.getElementById('area'))
      this.$axios.get('https://geo.datav.aliyun.com/areas_v3/bound/350000_full.json').then(ret => {
//防止本地发起axios出现跨域问题，需要写成http://localhost:8999/jilin.json
        echarts.registerMap('jilin', ret.data)
        // 注册矢量地图数据
        var option = {
          visualMap: { // 视觉映射组件
            show: false,
        
            top: '70%',
            bottom: '2%',
            left: '2%',
            textStyle: {
              fontsize: 12
            },
           
          },
          tooltip: { // 悬浮框
            trigger: 'item', // 触发条件
            backgroundColor: 'RGBA(136, 123, 135, 0.8)',
            formatter: '{b}<br/>案件数{c}', // 自定义显示数据
            textStyle: {
              color: '#ffffff'
            }
          },
          series: [
            {
              type: 'map',
              map: 'jilin',
              zoom: 1,
              top: '10%',
              x: 'center',
              label: {
                show: true // 显示               
              },
              itemStyle: {
                normal: { // 静态的时候显示的默认样式
                  areaColor: '#409EFF', // 地图颜色
                  // borderColor: '#886364' // 边框颜色
                },
                emphasis: { // 鼠标移入动态的时候显示的默认样式
                  // borderWidth: 2, // 边框宽度
                  areaColor: 'blue' // 地图颜色
                }
              },
              // 数据
              data: [
                {
                  name: '长春市',
                  value: '1202'
                },
                {
                  name: '吉林市',
                  value: '396'
                },
                {
                  name: '通化市',
                  value: '1125'
                },
                {
                  name: '四平市',
                  value: '635'
                },
                {
                  name: '白山市',
                  value: '586'
                },
                {
                  name: '辽源市',
                  value: '360'
                },
                {
                  name: '白城市',
                  value: '231'
                },
                {
                  name: '延边朝鲜族自治州',
                  value: '196'
                },
                {
                  name: '松原市',
                  value: '80'
                }
              ]
            }
 
          ]
        }
        myChart.setOption(option)
      })


  }
};
</script>


<style lang="less" >
body,
html {
  width: 100%;
  height: 100%;

  #app {
    width: 100%;
    height: 100%;
  }
}
* {
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-image: url(./assets/大屏/bg2.png);
  background-size: 100% 100%;
}
.w100 {
  width: 100%;
  min-width: 1200px;
}
.w1600 {
  width: 90%;
  max-width: 1600px;
  min-width: 1200px;
  margin: 0 auto;
}
.w100 {
  width: 100%;
  min-width: 1200px;
}
.w1700 {
  width: 98%;
  max-width: 1600px;
  min-width: 1200px;
  margin: 0 auto;
}
.contentbox {
  padding-top: 40px;
  display: flex;
  justify-content: center;
  color: #fff;
  font-weight: bolder;
  font-size: 30px;
}

.centerbox {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.rightbox {
  display: flex;
}
.tittle {
  color: #fff;
  padding-left: 20px;
  padding-top: 20px;
}
.cente {
  width: 500px;
  height: 500px;
  background: #fff;
}
.center {
  padding: 30px;
  box-sizing: border-box;
}
 .main {
    height: 400px;
  }
</style>