Vue-cli + DataV ＋echarts (大屏)

最新推荐文章于 2024-08-11 18:57:37 发布

置顶 m0_54527593

最新推荐文章于 2024-08-11 18:57:37 发布

阅读量810

点赞数 2

本文链接：https://blog.csdn.net/m0_54527593/article/details/121693844

版权

一、Vue-cli + DataV ＋echarts (大屏)

1.创建项目，安装dataV

 vue create demo  
 npm install @jiaminghi/data-view

2.安装echarts

 npm install echarts@4

3.加载echarts（中国地图）

//按需引入DataV
 // plugs/index.js
 import Vue from "vue";
 import {  fullScreenContainer } from '@jiaminghi/data-view' //容器
 Vue.use(fullScreenContainer);

 // main.js
 import echarts from 'echarts'
 Vue.prototype.$echarts =echarts;
 import china from 'echarts/map/json/china.json' // 引入json文件
 echarts.registerMap('china', china) // 在echarts中注册使用这个文件
 
 new Vue({
   render: h => h(App),
   data:function(){
     return{
       ercharts1:null  
     }
   },
 }).$mount('#app')


 //App.vue
 <dv-full-screen-container class="bgc">      //容器
      <Map />  //封装组件
 </dv-full-screen-container>

 //设置配置项 （地图）
 //map.vue 组件
       let option = {
         tooltip: {
           trigger: "item",
           formatter: function (params) {
             if (params.data) {
               return params.data.name + "：  " + params.data.value;
             } else {
               return params.name + "：  " + "0"; //自行定义formatter格式
             }
           },
         },
         visualMap: {
           // 是否开启数据映射
           show:true,
           // 展示value的颜色
           color: ["#008bbd", "#32a3cb", "#9cdbf2"],
           // 范围
           symbolSize: [0, 1500]
         },
         geo: {
           map: "china",
           roam: true, //是否开启缩放和平移
           zoom: 1.1, //视角缩放比例
           label: {
             // hover前
             normal: {
               show: true,
               textStyle: {
                 color: "#fff",
                 fontSize: 15,
               },
             },
             //  hover后
             emphasis: {
               textStyle: {
                 color: "black",
               },
             },
           },
           itemStyle: {
             // hover前
             normal: {
               // 偏移量
               shadowOffsetX: 1,
               shadowOffsetY: 1,
               // 边框颜色
               borderColor: "#ACC3FA",
               // 地区边框阴影
               shadowColor: "#fff",
               // 地区颜色
               areaColor: "#0A258C",
               borderWidth: 0.6, //设置外层边框
             },
             //  hover后
             emphasis: {
               shadowOffsetX: 0,
               shadowOffsetY: 1,
               shadowBlur: 10,
               borderWidth: 1,
               //鼠标选择区域颜色
               areaColor: "#FFAA12",
             },
           },
         },
         series: [
           {
             name: "信息量",
             type: "map",
             map: "china",
             geoIndex: 0,
             data: this.dataList,
           },
         ],
       };
 
 //初始化
 this.$root.echarts1 = this.$echarts.init(document.getElementById('regionCharts'));
 this.$root.echarts1.setOption(option);
 this.$nextTick(()=>{
      this.$root.echarts1.resize();// 防止图表不刷新
 })

4.注