【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放

效果图

从上到下，依次是F11效果，和正常网页效果，以及小屏效果。都是同比例缩放的，布局不会混乱

聊一下

为了让大家直观的看到所有的代码，所以结构方法等就不分各个组件引入了，会很麻烦要找哪是哪，我直接把所有的图都写在了一个vue组件内。并配上注释，相信大家可以很容易找到哪里对应哪里区域

核心点

这里的核心点就是等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写css定死，通过屏幕大小改变对应等比例缩放，达到屏幕适配效果

前置条件

下载dataV

npm install @jiaminghi/data-view

下载echarts

npm install echarts --save

下载elementul

npm i element-ui -S

下载china.json
由于数据比较大，我另一个帖子写了，就不重复了，直接去复制这个文件https://blog.csdn.net/seeeeeeeeeee/article/details/121495485

main.js引入

引入dataV

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

引入elementul

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

引入china.json

import geoJson from '@/utils/china.json'
echarts.registerMap('china', geoJson);

引入echarts

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

第一步：创建等比例缩放函数 drawMixin.js

// 屏幕适配 mixin 函数// * 默认缩放值
const scale = {width: '1',height: '1',
}// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))export default {data() {return {// * 定时函数drawTiming: null}},mounted () {//进入触发this.calcRate()window.addEventListener('resize', this.resize)},beforeDestroy () {window.removeEventListener('resize', this.resize)},methods: {calcRate () {//拿到整个页面元素const appRef = this.$refs["appRef"]//如果没有值就结束if (!appRef) return // 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))//判断：如果有值代表页面变化了if (appRef) {//判断当前宽高比例是否大于默认比例if (currentRate > baseProportion) {// 如果大于代表更宽了，就是放大了//那么把默认缩放的宽高改为：同比例放大scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)scale.height = (window.innerHeight / baseHeight).toFixed(5)console.log(scale.width,scale.height,'放大');//整个页面的元素样式，缩放宽高用当前同比例放大的宽高appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`} else {// 如果不大于默认比例代表缩小了。//那么把默认缩放的宽高改为：同比例缩小scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)scale.width = (window.innerWidth / baseWidth).toFixed(5)console.log(scale.width,scale.height,'缩小');//整个页面的元素样式，缩放宽高用当前同比例放大的宽高appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`}}},resize () {clearTimeout(this.drawTiming)this.drawTiming = setTimeout(() => {this.calcRate()}, 200)}},
}

第二步：创建用来给日期时间转换格式用的函数index.js

/*** @param {Function} fn 防抖函数* @param {Number} delay 延迟时间*/
export function debounce(fn, delay) {var timer;return function () {var context = this;var args = arguments;clearTimeout(timer);timer = setTimeout(function () {fn.apply(context, args);}, delay);};
}/*** @param {date} time 需要转换的时间* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss*/
export function formatTime(time, fmt) {if (!time) return '';//没传时间返回空else {const date = new Date(time);const o = {'M+': date.getMonth() + 1,//月'd+': date.getDate(),//日'H+': date.getHours(),//时'm+': date.getMinutes(),//分's+': date.getSeconds(),//秒'q+': Math.floor((date.getMonth() + 3) / 3),//月+3/3S: date.getMilliseconds(),//返回时间的毫秒};if (/(y+)/.test(fmt))//匹配1个到多个y//这一步把年转换完毕fmt = fmt.replace(RegExp.$1,//拿到y+匹配到的第一个分组(date.getFullYear() + '').substr(4 - RegExp.$1.length));//这一步把生下的格式继续匹配转换for (const k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ('00' + o[k]).substr(('' + o[k]).length));}}return fmt;}
}

第三步：大屏可视化代码

复制进去就行了

<template><div id="index" ref="appRef"><div class="bg"><dv-loading v-show="loading">Loading...</dv-loading><div class="host-body"><div><!-- 顶部title部分 --><el-row><el-col :span="6"><dv-decoration-8class="title_right":color="['#008CFF', '#00ADDD']"/></el-col><el-col :span="12"><div class="title_text">数 据 可 视 化 系 统</div><dv-decoration-5class="title_center":color="['#008CFF', '#00ADDD']"/></el-col><el-col :span="6"><div class="title_time">{{ dateYear + dateWeek + dateDay }}</div><dv-decoration-8:reverse="true"class="title_left":color="['#008CFF', '#00ADDD']"/></el-col></el-row><!-- 主体部分 --><el-row><!-- 第一列 --><el-col :span="6"><!-- 饼图部分 --><div class="left_box1"><dv-border-box-12><div id="Rose_diagram"></div><dv-active-ring-chart:config="config"class="left_box1_rose_right"/><divclass="rose_text"v-for="(item, index) in numberData":key="index"><p><span class="coin">￥</span><span class="rose_text_nmb">{{item.number.number}}</span></p><p><span>{{ item.text }}</span><span class="colorYellow">(件)</span></p></div></dv-border-box-12></div><!-- 柱状图部分 --><div class="left_box2"><dv-border-box-12 style="padding-top: 10px"><p style="margin-left: 15px">数据统计图</p><div id="columnar"></div></dv-border-box-12></div><!-- 轮播表格部分 --><div class="left_box3"><dv-border-box-12 style="padding-top: 10px"><dv-scroll-board:config="board_info"class="carousel_list"oddRowBGC="#fff"/></dv-border-box-12></div></el-col><!-- 第二列 --><el-col :span="12"><!-- 中国地图 --><div id="china-map"></div><!-- 折线图 --><div class="line_center"><dv-border-box-8><div id="line_center_diagram"></div></dv-border-box-8></div></el-col><!-- 第三列 --><el-col :span="6"><!-- 轮播排行榜部分 --><div class="right_box1"><dv-border-box-12><dv-decoration-7 style="width: 100%; height: 30px">销 售 排 行 榜</dv-decoration-7><dv-scroll-ranking-board:config="config"style="width: 95%; height: 87%; margin-left: 2%"/></dv-border-box-12></div><!-- 虚线柱状图部分 --><div class="right_box2"><dv-border-box-12 :reverse="true"><div id="dotter_bar"></div></dv-border-box-12></div><!-- 部分 --><div class="right_box3"><dv-border-box-12 :reverse="true"><dv-conical-column-chart :config="cone" class="cone_box" /></dv-border-box-12></div></el-col></el-row></div></div></div></div>
</template><script>
import drawMixin from "../utils/drawMixin"; //自适应缩放
import { formatTime } from "../utils/index.js"; //日期格式转换
import * as echarts from "echarts";
export default {mixins: [drawMixin],data() {return {//定时器timing: null,//loading图loading: true,//时分秒dateDay: null,//年月日dateYear: null,//周几dateWeek: null,//周几weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],//轮播排行榜config: {data: [{name: "周口",value: 55,},{name: "南阳",value: 120,},{name: "西峡",value: 78,},{name: "驻马店",value: 66,},{name: "新乡",value: 80,},{name: "信阳",value: 45,},{name: "漯河",value: 29,},],},//左侧饼图文字numberData: [{number: {number: 15,},text: "今日构建总量",},{number: {number: 1144,},text: "总共完成数量",},{number: {number: 361,},text: "正在编译数量",},],//左侧轮播表格配置项board_info: {header: ["人员", "月产量", "月合格率"],data: [["张三", "10830", "90%"],["张四", "13500", "92%"],["张五", "10350", "97%"],["张六", "13300", "94%"],["张七", "12500", "95%"],["张八", "11500", "96%"],["张九", "12500", "89%"],["王六", "10360", "95%"],["王二", "10567", "91%"],["李四", "15721", "99%"],],evenRowBGC: "#020308",oddRowBGC: "#382B47",headerBGC: "#020308",},// 定义颜色colorList: {linearYtoG: {type: "linear",x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: "#f5b44d",},{offset: 1,color: "#28f8de",},],},linearGtoB: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#43dfa2",},{offset: 1,color: "#28f8de",},],},linearBtoG: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#1c98e8",},{offset: 1,color: "#28f8de",},],},areaBtoG: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(35,184,210,.2)",},{offset: 1,color: "rgba(35,184,210,0)",},],},},//锥形柱状图cone: {data: [{name: "周口",value: 55,},{name: "南阳",value: 120,},{name: "西峡",value: 71,},{name: "驻马店",value: 66,},{name: "新乡",value: 80,},{name: "信阳",value: 35,},{name: "漯河",value: 15,},],showValue: true,},};},mounted() {//获取实时时间this.timeFn();//加载loading图this.cancelLoading();//中国地图this.china_map();//左侧玫瑰饼图this.Rose_diagram();//左侧柱状图this.columnar();//中间折线图this.line_center_diagram();//虚线柱状图this.dotter_bar();},beforeDestroy() {//离开时删除计时器clearInterval(this.timing);},methods: {//右上角当前日期时间显示：每一秒更新一次最新时间timeFn() {this.timing = setInterval(() => {//获取当前时分秒this.dateDay = formatTime(new Date(), "HH: mm: ss");//获取当前年月日this.dateYear = formatTime(new Date(), "yyyy-MM-dd");//获取当前周几this.dateWeek = this.weekday[new Date().getDay()];}, 1000);},//loading图cancelLoading() {setTimeout(() => {this.loading = false;}, 500);},//中国地图china_map() {let mapChart = this.$echarts.init(document.getElementById("china-map")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图let series = []; //存放循环配置项let res = []; //存放射线的起始点和结束点位置let province = []; //存放有射线的省的名字，以此来拿到对应省份的坐标//提前存好的所有省份坐标，用于后面根据名字拿到对应的左边let chinaGeoCoordMap = {新疆: [86.9023, 41.148],西藏: [87.8695, 31.6846],内蒙古: [110.5977, 41.3408],青海: [95.2402, 35.4199],四川: [102.9199, 30.1904],黑龙江: [128.1445, 46.7156],甘肃: [102.7129, 38.166],云南: [101.0652, 24.6807],广西: [108.7813, 23.6426],湖南: [111.5332, 27.3779],陕西: [108.5996, 33.7396],广东: [113.8668, 22.8076],吉林: [126.1746, 43.5938],河北: [115.4004, 38.1688],湖北: [112.2363, 30.8572],贵州: [106.6113, 26.6385],山东: [118.2402, 36.2307],江西: [115.7156, 27.99],河南: [113.0668, 33.8818],辽宁: [123.0438, 41.0889],山西: [112.4121, 36.6611],安徽: [117.2461, 31.0361],福建: [118.3008, 25.9277],浙江: [120.498, 29.0918],江苏: [119.8586, 32.915],重庆: [107.7539, 29.8904],宁夏: [105.9961, 37.1096],海南: [109.9512, 19.2041],台湾: [120.8254, 23.5986],北京: [116.4551, 40.2539],天津: [117.4219, 39.4189],上海: [121.4648, 31.2891],香港: [114.6178, 22.3242],澳门: [113.5547, 21.6484],};//后台给的数据模拟let lineData = [{val: 32, //数据blat: [86.9023, 41.148], //发射点elon: [87.8695, 31.6846], //接收点bcitysim: "新疆", //发射省的名字ecitysim: "西藏", //接收省的名字},{val: 31,blat: [87.8695, 31.6846],elon: [95.2402, 35.4199],bcitysim: "西藏",ecitysim: "青海",},{val: 33,blat: [86.9023, 41.148],elon: [95.2402, 35.4199],bcitysim: "新疆",ecitysim: "青海",},{val: 33,blat: [116.4551, 40.2539],elon: [119.8586, 32.915],bcitysim: "北京",ecitysim: "江苏",},{val: 33,blat: [120.8254, 23.5986],elon: [109.9512, 19.2041],bcitysim: "台湾",ecitysim: "海南",},{val: 33,blat: [120.498, 29.0918],elon: [115.7156, 27.99],bcitysim: "浙江",ecitysim: "江西",},{val: 33,blat: [117.2461, 31.0361],elon: [119.8586, 32.915],bcitysim: "安徽",ecitysim: "江苏",},{val: 33,blat: [117.2461, 31.0361],elon: [105.9961, 37.1096],bcitysim: "安徽",ecitysim: "宁夏",},{val: 33,blat: [117.2461, 31.0361],elon: [107.7539, 29.8904],bcitysim: "安徽",ecitysim: "重庆",},{val: 33,blat: [117.2461, 31.0361],elon: [123.0438, 41.0889],bcitysim: "安徽",ecitysim: "辽宁",},{val: 33,blat: [119.8586, 32.915],elon: [102.7129, 38.166],bcitysim: "江苏",ecitysim: "甘肃",},{val: 33,blat: [119.8586, 32.915],elon: [128.1445, 46.7156],bcitysim: "江苏",ecitysim: "黑龙江",},{val: 33,blat: [119.8586, 32.915],elon: [110.5977, 41.3408],bcitysim: "江苏",ecitysim: "内蒙古",},{val: 33,blat: [119.8586, 32.915],elon: [101.0652, 24.6807],bcitysim: "江苏",ecitysim: "云南",},{val: 33,blat: [119.8586, 32.915],elon: [86.9023, 41.148],bcitysim: "江苏",ecitysim: "新疆",},{val: 33,blat: [86.9023, 41.148],elon: [110.5977, 41.3408],bcitysim: "新疆",ecitysim: "内蒙古",},{val: 33,blat: [86.9023, 41.148],elon: [102.9199, 30.1904],bcitysim: "新疆",ecitysim: "四川",},];//循环拿到处理好的数据for (var i = 0; i < lineData.length; i++) {province.push(lineData[i].bcitysim); //存进去每个省的名字province.push(lineData[i].ecitysim); //存进去每个省的名字res.push({fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示coords: [lineData[i].blat, //发射lineData[i].elon, //接收],count: lineData[i].val, //数据});}let index_data = new Set(province); //把省的名字去重let data_res = []; //定义一个新的变量存放省的坐标//注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来index_data.forEach((item) => {data_res.push({name: item, //每个省的名字value: chinaGeoCoordMap[item], //每个省的坐标});});//循环往series内添加配置项series.push({//射线效果图层type: "lines", //类型：射线zlevel: 1, //类似图层效果effect: {show: true, //是否显示图标symbol: "arrow", //箭头图标symbolSize: 5, //图标大小trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重},label: {show: true,},lineStyle: {color: "#fff",normal: {color: "#00A0FF",width: 1, //尾迹线条宽度opacity: 0.5, //尾迹线条透明度curveness: 0.1, //尾迹线条曲直度},},//提示框信息tooltip: {formatter: function (param) {return (param.data.fromName +">" +param.data.toName +"<br>数量：" +param.data.count);},},data: res, //拿到射线的起始点和结束点},//散点图// {//   type: "effectScatter",//散点图//   coordinateSystem: "geo",//这个不能删，删了不显示//   zlevel: 1,//   rippleEffect: {//     //涟漪特效//     period: 4, //动画时间，值越小速度越快//     brushType: "stroke", //波纹绘制方式 stroke, fill//     scale: 4, //波纹圆环最大限制，值越大波纹越大//   },//   //设置文字部分//   label: {//     normal: {//       show: true, //省份名显示隐藏//       position: "right", //省份名显示位置//       offset: [5, 0], //省份名偏移设置//       formatter: function (params) {//         //圆环显示省份名//         return params.name;  //这个名字是根据data中的name来显示的//       },//       fontSize: 12,//文字大小//     },//     emphasis: {//       show: true,//     },//   },//   symbol: "circle",//散点图//   symbolSize: 5,//散点大小//   itemStyle: {//散点样式//     normal: {//       show: true,//       color: "#fff",//     },//   },//   data: data_res, //处理好后的散点图坐标数组// },//点击高亮{type: "map",mapType: "china",zlevel: 1,roam: true,geoIndex: 0,tooltip: {show: true,},itemStyle: {areaColor: "#00196d",borderColor: "#0a53e9",},emphasis: {show: true,label: {normal: {show: true, // 是否显示对应地名textStyle: {color: "#fff",},},},itemStyle: {areaColor: "#00196d",borderColor: "#0a53e9",},},});//配置let option = {//title可要可不要// title: {//   text: "查查的地图",//   textStyle: {//     color: "#ffffff",//   },// },legend: {show: true,selected: {},x: "left",orient: "vertical",textStyle: {color: "white",},data: [],},//鼠标移上去的弹框tooltip: {trigger: "item",show: true,},//geo：这是重点geo: {map: "china", //中国地图zoom: 1.2, //缩放倍数roam: false, //是否允许缩放和拖拽地图label: {normal: {show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就truetextStyle: {//名字的样式color: "#fff",},},emphasis: {show: true,},},//地图样式itemStyle: {normal: {borderColor: "#293171", //地图边框颜色borderWidth: "2", //地图边框粗细areaColor: "#0A0F33", //地图背景色},//省份地图阴影emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "#fff",},},},series: series, //图表配置};mapChart.setOption(option); //生成图表},//玫瑰饼图Rose_diagram() {let mapChart = this.$echarts.init(document.getElementById("Rose_diagram")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图let option = {color: ["#37a2da","#32c5e9","#9fe6b8","#ffdb5c","#ff9f7f","#fb7293","#e7bcf3","#8378ea",],tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)",},toolbox: {show: true,},calculable: true,legend: {orient: "horizontal",icon: "circle",bottom: 0,x: "center",data: ["data1", "data2", "data3", "data4", "data5", "data6"],textStyle: {color: "#fff",},},series: [{name: "通过率统计",type: "pie",radius: [10, 50],roseType: "area",center: ["50%", "40%"],data: [{ value: 10, name: "data1" },{ value: 5, name: "data2" },{ value: 15, name: "data3" },{ value: 25, name: "data4" },{ value: 20, name: "data5" },{ value: 35, name: "data6" },],},],};mapChart.setOption(option); //生成图表},//柱状图columnar() {let mapChart = this.$echarts.init(document.getElementById("columnar")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图let option = {title: {text: "",},tooltip: {trigger: "axis",backgroundColor: "rgba(255,255,255,0.1)",axisPointer: {type: "shadow",label: {show: true,backgroundColor: "#7B7DDC",},},},legend: {data: ["已贯通", "计划贯通", "贯通率"],textStyle: {color: "#B4B4B4",},top: "0%",},grid: {x: "8%",width: "95%",y: "4%",},xAxis: {data: ["市区","万州","江北","南岸","北碚","綦南","长寿","永川","璧山","江津","城口","大足","垫江","丰都","奉节","合川","江津区","开州","南川","彭水","黔江","石柱","铜梁","潼南","巫山","巫溪","武隆","秀山","酉阳","云阳","忠县","川东","检修",],axisLine: {lineStyle: {color: "#B4B4B4",},},axisTick: {show: false,},},yAxis: [{splitLine: { show: false },axisLine: {lineStyle: {color: "#B4B4B4",},},axisLabel: {formatter: "{value} ",},},],series: [{name: "已贯通",type: "bar",barWidth: 10,itemStyle: {normal: {barBorderRadius: 5,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#956FD4" },{ offset: 1, color: "#3EACE5" },]),},},data: [46, 50, 55, 650, 75, 85, 99, 125, 140, 215, 232, 244, 252, 333,46, 50, 55, 65, 75, 85, 99, 225, 140, 215, 85, 99, 125, 140, 215,232, 244, 252, 75,],},{name: "计划贯通",type: "bar",barGap: "-100%",barWidth: 10,itemStyle: {normal: {barBorderRadius: 5,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(156,107,211,0.8)" },{ offset: 0.2, color: "rgba(156,107,211,0.5)" },{ offset: 1, color: "rgba(156,107,211,0.2)" },]),},},z: -12,data: [180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 560, 626, 595,675, 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 360, 398,447, 484, 504, 500, 326, 495, 328,],},],};mapChart.setOption(option); //生成图表},//折线图line_center_diagram() {let mapChart = this.$echarts.init(document.getElementById("line_center_diagram")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图let option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],position: "bottom",axisLine: true,axisLabel: {color: "rgba(255,255,255,.8)",fontSize: 12,},},yAxis: {type: "value",name: "年度生产量",nameLocation: "end",nameGap: 24,nameTextStyle: {color: "rgba(255,255,255,.5)",fontSize: 14,},splitNumber: 4,axisLine: {lineStyle: {opacity: 0,},},splitLine: {show: true,lineStyle: {color: "#fff",opacity: 0.1,},},axisLabel: {color: "rgba(255,255,255,.8)",fontSize: 12,},},grid: {left: 50,right: 10,bottom: 25,top: "18%",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",smooth: true,symbol: "emptyCircle",symbolSize: 8,itemStyle: {normal: {color: "#fff",},},//线的颜色样式lineStyle: {normal: {color: this.colorList.linearBtoG,width: 3,},},//填充颜色样式areaStyle: {normal: {color: this.colorList.areaBtoG,},},},],};mapChart.setOption(option); //生成图表},//右侧虚线柱状图图dotter_bar() {let mapChart = this.$echarts.init(document.getElementById("dotter_bar")); //图表初始化，china-map是绑定的元素window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图// Generate datalet category = [];let dottedBase = +new Date();let lineData = [];let barData = [];for (let i = 0; i < 20; i++) {let date = new Date((dottedBase += 3600 * 24 * 1000));category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-"));let b = Math.random() * 200;let d = Math.random() * 200;barData.push(b);lineData.push(d + b);}// optionlet option = {tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},grid: {left: 50,right: 10,bottom: 25,top: "18%",},legend: {data: ["line", "bar"],textStyle: {color: "#ccc",},},xAxis: {data: category,axisLine: {lineStyle: {color: "#ccc",},},},yAxis: {splitLine: { show: false },axisLine: {lineStyle: {color: "#ccc",},},},series: [{name: "line",type: "line",smooth: true,showAllSymbol: true,symbol: "emptyCircle",symbolSize: 15,data: lineData,},{name: "bar",type: "bar",barWidth: 10,itemStyle: {borderRadius: 5,// color: "#14c8d4",color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#14c8d4" },{ offset: 1, color: "#43eec6" },]),},data: barData,},{name: "line",type: "bar",barGap: "-100%",barWidth: 10,itemStyle: {// color: "rgba(20,200,212,0.5)",color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(20,200,212,0.5)" },{ offset: 0.2, color: "rgba(20,200,212,0.2)" },{ offset: 1, color: "rgba(20,200,212,0)" },]),},z: -12,data: lineData,},{name: "dotted",type: "pictorialBar",symbol: "rect",itemStyle: {color: "#0f375f",},symbolRepeat: true,symbolSize: [12, 4],symbolMargin: 1,z: -10,data: lineData,},],};mapChart.setOption(option); //生成图表},},
};
</script><style lang="scss">
//全局样式部分！！！！
* {margin: 0;padding: 0;list-style-type: none;outline: none;box-sizing: border-box;
}
html {margin: 0;padding: 0;
}
body {font-family: Arial, Helvetica, sans-serif;line-height: 1.2em;background-color: #f1f1f1;margin: 0;padding: 0;
}
a {color: #343440;text-decoration: none;
}
//--------------------------------------------//页面样式部分！！！！
#index {color: #d3d6dd;width: 1920px;height: 1080px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-origin: left top;overflow: hidden;.bg {//整体页面背景width: 100%;height: 100%;padding: 16px 16px 0 16px;background-image: url("../assets/pageBg.png"); //背景图background-size: cover; //背景尺寸background-position: center center; //背景位置}//顶部右边装饰效果.title_left {width: 100%;height: 50px;}//顶部左边装饰效果.title_right {width: 100%;height: 50px;margin-top: 18px;}//顶部中间装饰效果.title_center {width: 100%;height: 50px;}//顶部中间文字数据可视化系统.title_text {text-align: center;font-size: 24px;font-weight: bold;margin-top: 14px;color: #008cff;}//时间日期.title_time {text-align: center;}//中国地图#china-map {height: 660px;width: 100%;}//中间折线图.line_center {width: 100%;height: 288px;}//左1模块.left_box1 {height: 310px;width: 100%;margin-bottom: 10px;position: relative;}//左2模块.left_box2 {height: 310px;width: 100%;margin-bottom: 10px;}//左3模块.left_box3 {height: 310px;width: 100%;}//右1模块.right_box1 {height: 310px;width: 100%;margin-bottom: 10px;}//右2模块.right_box2 {height: 310px;width: 100%;margin-bottom: 10px;}//右3模块.right_box3 {height: 310px;width: 100%;}//左1模块-玫瑰饼图#Rose_diagram {height: 70%;width: 55%;}//左1模块-圆环图.left_box1_rose_right {height: 85%;width: 55%;position: absolute;right: 0;top: 0;}//左1模块-文字部分.rose_text {display: inline-block;margin-top: 4%;margin-left: 4%;}// 左1模块-￥符号样式.coin {font-size: 20px;color: #ffc107;}//左1模块-（件）样式.colorYellow {color: yellowgreen;}//左1模块-数字样式.rose_text_nmb {font-size: 20px;color: #00b891;}//左2模块 柱状图#columnar {height: 97%;width: 95%;margin-left: 3%;margin-top: 5px;}//折线图#line_center_diagram {height: 100%;width: 100%;}//轮播表格.carousel_list {width: 96%;height: 98%;margin-left: 10px;}//虚线柱状图#dotter_bar {width: 100%;height: 100%;}//锥形图.cone_box {width: 95%;height: 97%;margin-left: 3%;}
}
</style>

【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放相关推荐

数据可视化模板_10分钟，做一份数据可视化分析报表
做一份涵盖内容多.涉及数据量大的数据可视化分析报表要多久?10分钟够吗?如果奥威BI系列的分析软件会说话,恐怕要吐槽10分钟太多,5分钟足够.不说别的,论做智能数据可视化分析报表的效率,奥威BI系列软 ...
python 可视化图表联动_Vue2+Echarts实现多种图表数据可视化Dashboard详解（附源码）...
数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 vue-r ...
基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
数据大屏项目Vue+DataV+Echarts(附源码)
一.项目描述 1 前端项目 1.1 项目简介一个基于 Vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替 ...
在Vue中使用Echarts来实现（数据可视化）
一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts ...
可视化大屏的几种屏幕适配方案，总有一种是你需要的
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是 ...
vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易满足绝大部分的开发需要在可视化库中有较好的体验和口碑二.在V ...
前端vue显示柱状图_详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）_旧址_前端开发者...
数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 eleme ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
ECharts实现中国地图数据可视化
项目中数据可视化已经太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts:一般都有折线图.柱形图.饼形图,还有常见的地图,今天就地图来说一下--中国地图. 1.首先官 ...