可视化大屏
文章平均质量分 51
一个假的前端男
一个 迷迷糊糊的前端
展开
-
echarts中间有间隔的圆环
echarts中间有间隔的圆环echarts中间有间隔的圆环echarts中间有间隔的圆环echarts中间有间隔的圆环echarts中间有间隔的圆环echarts中间有间隔的圆环原创 2022-08-02 10:14:18 · 918 阅读 · 0 评论 -
echarts简单的圆角圆环实现
echarts简单的圆角圆环实现echarts简单的圆角圆环实现echarts简单的圆角圆环实现echarts简单的圆角圆环实现echarts简单的圆角圆环实现echarts简单的圆角圆环实现原创 2022-07-26 11:34:38 · 5285 阅读 · 8 评论 -
echarts 圆角圆环
echarts 圆角圆环原创 2022-07-26 09:51:17 · 881 阅读 · 0 评论 -
vue echarts 地图散点图
vue echarts 地图散点图vue echarts 地图散点图vue echarts 地图散点图vue echarts 地图散点图vue echarts 地图散点图vue echarts 地图散点图vue echarts 地图散点图原创 2022-07-15 13:38:24 · 1112 阅读 · 3 评论 -
vue echarts 沙漏图(金字塔)实现
echarts 沙漏图(金字塔)实现echarts 沙漏图(金字塔)实现echarts 沙漏图(金字塔)实现echarts 沙漏图(金字塔)实现echarts 沙漏图(金字塔)实现echarts 沙漏图(金字塔)实现原创 2022-07-14 17:53:20 · 4554 阅读 · 0 评论 -
echarts---------------Tooltip的小圆点之谜
当你要格式提示框浮层内容(Tooltip)信息时会出现小圆点消失这个问题出现原因:自定义提示框组件的时候会用到 formatter这个属性解决方法:marker即你需要的小圆点name:即你数据的名字value:数据的值如下代码: tooltip: { formatter: function (param) { return param.marker + " " + " &nbs原创 2020-12-18 15:21:06 · 789 阅读 · 0 评论 -
v-charts 如何更改文本颜色
<ve-line :data="chartData" :extend='chartExtend' height="100%"></ve-line> data() { this.chartExtend = { 'xAxis.0.axisLabel.color': 'white', //x轴文本颜色 'yAxis.0.axisLabel.color': 'white', //y轴文本改变颜色 legend: { ..原创 2020-12-14 15:58:42 · 1000 阅读 · 0 评论 -
v-charts安装-----填坑
v-charts使用,报错找不到 echarts/lib/visual/dataColor或者安装直接报错This dependency was not found:echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.jsTo install it, you can run: npm install --save echarts/lib/visual/dataColor考虑原因v-char原创 2020-12-14 15:22:23 · 2573 阅读 · 5 评论 -
可视化大屏基础(一)------border-image的认识
值描述border-image-source用在边框的图片的路径。border-image-slice图片边框向内偏移。border-image-width图片边框的宽度。border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。使用1、border-image-source:url(图片路径)2、border-image-slice :50 37 20 127 4条线切割成9...原创 2020-12-11 10:33:02 · 478 阅读 · 0 评论 -
echarts 图例组件如何分行
legend: [{ left:'80', data: ['邮件', 'QQ文件', '微信', '文件传输'], textStyle: { color: '#fff', }},{ top:'20', left:'80', data:['木马','漏洞','恶意文件','其他'], textStyle: { color: '#fff', }}],把图里组件用数组分成2组 其他正常通过left、top、right、bottom 使其布局原创 2021-02-05 17:11:34 · 554 阅读 · 1 评论 -
vue highcharts使用
1、安装 highchartsnpm install highcharts --save2、安装highcharts-vuenpm install highcharts-vue3、在main中引入import HighchartsVue from 'highcharts-vue'Vue.use(HighchartsVue)4、使用html代码<highcharts :options="chartOptions"></highcharts>data中的数据原创 2021-02-04 15:24:02 · 1557 阅读 · 0 评论 -
echarts labelLine(引导线)呈水平展示
通过labelLine属性 把第一段引导线设置为0 labelLine: { length: 0, // 第一段引导线的长度 length2: 50, // 第二段引导线的长度 show: true, color: "#00ffff", }...原创 2021-01-29 11:39:58 · 3770 阅读 · 1 评论 -
vue-cli2.x rem配置
配置 flexible安装lib-flexiblenpm i lib-flexible --save在项目入口文件 main.js 里 引入 lib-flexible引入 lib-flexibleimport 'lib-flexible/flexible'px 转 rem安装 px2rem-loadernpm install px2rem-loader在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由原创 2021-01-28 14:32:18 · 282 阅读 · 0 评论 -
vue-cli3 rem 适配
项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位第一步 安装postcss-px2rem及px2rem-loadernpm install postcss-px2rem px2rem-loader --save第二部 在根目录src中新建util目录下新建rem.js等比适配文件(可根据自己要求放置)// rem等比适.转载 2021-01-27 11:02:50 · 402 阅读 · 0 评论 -
echarts地图 根据数据显示不同的颜色
visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)piecewise 分段var province = ['福建', '江苏', '浙江', '安徽', '广东', '北京', '山东', '上海', '辽宁', '四川', '河北', '河南', '湖南', '山西', '江西', '内蒙古','湖北', '广西', '重庆', '天津','陕西', '贵州', '宁夏', '云南','吉林','青海', '新疆','黑龙江', '甘肃'.原创 2021-01-14 14:25:56 · 6099 阅读 · 1 评论 -
地图边界线下载地址
添加链接描述原创 2021-01-14 11:14:22 · 280 阅读 · 0 评论 -
echarts 柱状图 标注为三角形
原创 2021-01-05 17:59:08 · 906 阅读 · 1 评论 -
e-charts 常用配置
基本配置项折线图散点图基本实现气泡图原创 2020-12-29 22:27:40 · 262 阅读 · 0 评论 -
VUE开发--全屏插件--screenfull
官网https://github.com/sindresorhus/screenfull.js1、安装npm install screenfull --savce2、引入在你需要使用的页面引入import screenfull from 'screenfull'3、使用 (具体API 看官网 这儿只讲我用的)screenfull.request(element, options?) 页面进入全屏 如果只是某一个元素进入全屏 则 screenfull.request(ele)scree原创 2020-12-28 22:23:04 · 1075 阅读 · 1 评论 -
JS 如何判断当前页面是否全屏
// 监听全屏事件触发 fullscreenchange() { let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; if (isFullScreen) { // 进入全屏 } else { // 退出全屏 } ...原创 2020-12-28 13:58:32 · 11668 阅读 · 8 评论 -
echarts自适应
//下面my_charts是html中echarts的IDvar myChart= echarts.init(document.getElementById("my_charts"));myChart.setOption(option);//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可在mounted中window.onresize = function () { myChart.resize(); }...原创 2020-12-24 16:13:15 · 156 阅读 · 1 评论 -
echarts 堆叠图 解决内容为 0 时,数字被覆盖
bug图:解决方案给label中的normal加一个formatter属性具体如下 label: { normal: { show: true, position: 'insideRight', formatter: function(params) { if (params.value > 0) {原创 2020-12-23 17:15:29 · 1020 阅读 · 0 评论 -
echarts 渲染出的图表和文字模糊问题
方法1:使用svg渲染,svg渲染出的图表的清晰度高于canvasvar myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'});方法2:仍然使用canvas渲染,通过调整devicePixelRatio提升清晰度var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5})转载 2020-12-18 16:14:08 · 1198 阅读 · 1 评论 -
e-charts中的基本配置------基础地图
backgroundColor:背景色grid:图表离容器的距离title:标题组件left、right、top、bottom: title组件离容器距离text:标题内容textStyle:标题的样式seriestype:表示类型 这里用的是mapmapType:必须存在label:图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等:normal:表示正常状态emphasis:显示高亮状态show:是否显示 这儿.原创 2020-12-17 17:42:12 · 416 阅读 · 0 评论 -
e-charts中的基本配置------折线图
折线图color:调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色在案例中的作用:改变标题线条颜色和折线颜色 使其能保持一致legend:图例组件(标题)展现了不同系列的标记(symbol),颜色和名字textStyle:图例的公用文本样式可改字体颜色和大小orient:改变标题的布局 (垂直or水平)top、right、bottom、left :标题离容器左侧的距离itemGap:标题每项的间距grid:可以控制直角坐标系内绘图网格原创 2020-12-17 16:50:46 · 353 阅读 · 0 评论 -
vue 中 echarts的使用
华丽的四部曲1、安装 通过 npm 获取 echarts,npm install echarts --save2、引入 (全局引入或按需引入)这里是全局引入在main.js中import echarts from 'echarts' 引入Vue.prototype.$echarts = echarts 挂在在原型链上3、在你需要的页面创建一个又具体宽高的盒子(可以是百分比) 通过ref获取dom <div class="content" ref="lineCh原创 2020-12-17 15:35:28 · 216 阅读 · 0 评论